API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 13th, 2017
646
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
  3. <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
  4. <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
  5. <head>
  6. <title>Resume / CV</title>
  7. <!-- Meta -->
  8. <meta charset="utf-8">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11. <link rel="shortcut icon" href="favicon.ico">
  12. <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
  13.  
  14. <!-- Global CSS -->
  15. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  16. <!-- Plugins CSS -->
  17. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  18.  
  19. <!-- Theme CSS -->
  20.  
  21. <!--IGNORE THIS STYLE-->
  22. <style>
  23. body {
  24. font-family: 'Roboto', sans-serif;
  25. color: #545E6C;
  26. background: #f5f5f5;
  27. font-size: 14px;
  28. padding: 30px;
  29. -webkit-font-smoothing: antialiased;
  30. -moz-osx-font-smoothing: grayscale;
  31. }
  32. h1,
  33. h2,
  34. h3,
  35. h4,
  36. h5,
  37. h6 {
  38. font-weight: 700;
  39. }
  40. a {
  41. color: #2d7788;
  42. -webkit-transition: all 0.4s ease-in-out;
  43. -moz-transition: all 0.4s ease-in-out;
  44. -ms-transition: all 0.4s ease-in-out;
  45. -o-transition: all 0.4s ease-in-out;
  46. }
  47. a:hover {
  48. text-decoration: underline;
  49. color: #1a454f;
  50. }
  51. a:focus {
  52. text-decoration: none;
  53. }
  54. p {
  55. line-height: 1.5;
  56. }
  57. .wrapper {
  58. background: #42A8C0;
  59. max-width: 960px;
  60. margin: 0 auto;
  61. position: relative;
  62. -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  63. -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  64. box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  65. }
  66. .sidebar-wrapper {
  67. background: #42A8C0;
  68. position: absolute;
  69. right: 0;
  70. width: 240px;
  71. height: 100%;
  72. min-height: 800px;
  73. color: #fff;
  74. }
  75. .sidebar-wrapper a {
  76. color: #fff;
  77. }
  78. .sidebar-wrapper .profile-container {
  79. padding: 30px;
  80. background: rgba(0, 0, 0, 0.2);
  81. text-align: center;
  82. color: #fff;
  83. }
  84. .sidebar-wrapper .name {
  85. font-size: 32px;
  86. font-weight: 900;
  87. margin-top: 0;
  88. margin-bottom: 10px;
  89. }
  90. .sidebar-wrapper .tagline {
  91. color: rgba(255, 255, 255, 0.6);
  92. font-size: 16px;
  93. font-weight: 400;
  94. margin-top: 0;
  95. margin-bottom: 0;
  96. }
  97. .sidebar-wrapper .profile {
  98. margin-bottom: 15px;
  99. }
  100. .sidebar-wrapper .contact-list .fa {
  101. margin-right: 5px;
  102. font-size: 18px;
  103. vertical-align: middle;
  104. }
  105. .sidebar-wrapper .contact-list li {
  106. margin-bottom: 15px;
  107. }
  108. .sidebar-wrapper .contact-list li:last-child {
  109. margin-bottom: 0;
  110. }
  111. .sidebar-wrapper .contact-list .email .fa {
  112. font-size: 14px;
  113. }
  114. .sidebar-wrapper .container-block {
  115. padding: 30px;
  116. }
  117. .sidebar-wrapper .container-block-title {
  118. text-transform: uppercase;
  119. font-size: 16px;
  120. font-weight: 700;
  121. margin-top: 0;
  122. margin-bottom: 15px;
  123. }
  124. .sidebar-wrapper .degree {
  125. font-size: 14px;
  126. margin-top: 0;
  127. margin-bottom: 5px;
  128. }
  129. .sidebar-wrapper .education-container .item {
  130. margin-bottom: 15px;
  131. }
  132. .sidebar-wrapper .education-container .item:last-child {
  133. margin-bottom: 0;
  134. }
  135. .sidebar-wrapper .education-container .meta {
  136. color: rgba(255, 255, 255, 0.6);
  137. font-weight: 500;
  138. margin-bottom: 0px;
  139. margin-top: 0;
  140. }
  141. .sidebar-wrapper .education-container .time {
  142. color: rgba(255, 255, 255, 0.6);
  143. font-weight: 500;
  144. margin-bottom: 0px;
  145. }
  146. .sidebar-wrapper .languages-container .lang-desc {
  147. color: rgba(255, 255, 255, 0.6);
  148. }
  149. .sidebar-wrapper .languages-list {
  150. margin-bottom: 0;
  151. }
  152. .sidebar-wrapper .languages-list li {
  153. margin-bottom: 10px;
  154. }
  155. .sidebar-wrapper .languages-list li:last-child {
  156. margin-bottom: 0;
  157. }
  158. .sidebar-wrapper .interests-list {
  159. margin-bottom: 0;
  160. }
  161. .sidebar-wrapper .interests-list li {
  162. margin-bottom: 10px;
  163. }
  164. .sidebar-wrapper .interests-list li:last-child {
  165. margin-bottom: 0;
  166. }
  167. .main-wrapper {
  168. background: #fff;
  169. padding: 60px;
  170. padding-right: 300px;
  171. }
  172. .main-wrapper .section-title {
  173. text-transform: uppercase;
  174. font-size: 20px;
  175. font-weight: 500;
  176. color: #2d7788;
  177. position: relative;
  178. margin-top: 0;
  179. margin-bottom: 20px;
  180. }
  181. .main-wrapper .section-title .fa {
  182. width: 30px;
  183. height: 30px;
  184. margin-right: 8px;
  185. display: inline-block;
  186. color: #fff;
  187. -webkit-border-radius: 50%;
  188. -moz-border-radius: 50%;
  189. -ms-border-radius: 50%;
  190. -o-border-radius: 50%;
  191. border-radius: 50%;
  192. -moz-background-clip: padding;
  193. -webkit-background-clip: padding-box;
  194. background-clip: padding-box;
  195. background: #2d7788;
  196. text-align: center;
  197. padding-top: 8px;
  198. font-size: 16px;
  199. position: relative;
  200. top: -2px;
  201. }
  202. .main-wrapper .section {
  203. margin-bottom: 60px;
  204. }
  205. .main-wrapper .experiences-section .item {
  206. margin-bottom: 30px;
  207. }
  208. .main-wrapper .upper-row {
  209. position: relative;
  210. overflow: hidden;
  211. margin-bottom: 2px;
  212. }
  213. .main-wrapper .job-title {
  214. color: #3F4650;
  215. font-size: 16px;
  216. margin-top: 0;
  217. margin-bottom: 0;
  218. font-weight: 500;
  219. }
  220. .main-wrapper .time {
  221. position: absolute;
  222. right: 0;
  223. top: 0;
  224. color: #97AAC3;
  225. }
  226. .main-wrapper .company {
  227. margin-bottom: 10px;
  228. color: #97AAC3;
  229. }
  230. .main-wrapper .project-title {
  231. font-size: 16px;
  232. font-weight: 400;
  233. margin-top: 0;
  234. margin-bottom: 5px;
  235. }
  236. .main-wrapper .projects-section .intro {
  237. margin-bottom: 30px;
  238. }
  239. .main-wrapper .projects-section .item {
  240. margin-bottom: 15px;
  241. }
  242. .skillset .item {
  243. margin-bottom: 15px;
  244. overflow: hidden;
  245. }
  246. .skillset .level-title {
  247. font-size: 14px;
  248. margin-top: 0;
  249. margin-bottom: 12px;
  250. }
  251. .skillset .level-bar {
  252. height: 12px;
  253. background: #f5f5f5;
  254. }
  255. .skillset .level-bar-inner {
  256. height: 12px;
  257. background: #7bc2d3;
  258. }
  259. .footer {
  260. padding: 30px;
  261. padding-top: 60px;
  262. }
  263. .footer .copyright {
  264. line-height: 1.6;
  265. color: #545E6C;
  266. font-size: 13px;
  267. }
  268. .footer .fa-heart {
  269. color: #fb866a;
  270. }
  271. /* Extra small devices (phones, less than 768px) */
  272. @media (max-width: 767px) {
  273. .sidebar-wrapper {
  274. position: static;
  275. width: inherit;
  276. }
  277. .main-wrapper {
  278. padding: 30px;
  279. }
  280. .main-wrapper .time {
  281. position: static;
  282. display: block;
  283. margin-top: 5px;
  284. }
  285. .main-wrapper .upper-row {
  286. margin-bottom: 0;
  287. }
  288. }
  289. /* Small devices (tablets, 768px and up) */
  290. /* Medium devices (desktops, 992px and up) */
  291. @media (min-width: 992px) {
  292. .skillset .level-title {
  293. display: inline-block;
  294. float: left;
  295. width: 30%;
  296. margin-bottom: 0;
  297. }
  298. .skillset .level-bar {
  299. display: inline-block;
  300. width: 70%;
  301. float: left;
  302. position: relative;
  303. top: 1px;
  304. }
  305. }
  306. /* Large devices (large desktops, 1200px and up) */
  307. /* Ex-Large devices (large desktops, 1200px and up) */
  308. </style>
  309. <!--END OF STYLE-->
  310.  
  311.  
  312. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  313. <!--[if lt IE 9]>
  314. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  315. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  316. <![endif]-->
  317. </head>
  318.  
  319. <body>
  320. <div class="wrapper">
  321. <div class="sidebar-wrapper">
  322. <div class="profile-container">
  323. <!--CHANGE PICTURE-->
  324. <img class="profile" src="assets/images/profile.png" alt="" />
  325. <!--NAME AND JOB DESCRIPTION-->
  326. <h1 class="name">Alan Doe</h1>
  327. <h3 class="tagline">Full Stack Developer</h3>
  328. </div><!--//profile-container-->
  329.  
  330. <!--CHANGE YOUR PERSONAL INFORMATION-->
  331. <div class="contact-container container-block">
  332. <ul class="list-unstyled contact-list">
  333. <li class="email"><i class="fa fa-envelope"></i><a href="#">alan.doe@website.com</a></li>
  334. <li class="phone"><i class="fa fa-phone"></i><a href="#">0123 456 789</a></li>
  335. <li class="website"><i class="fa fa-globe"></i><a href="#">portfoliosite.com</a></li>
  336. <li class="linkedin"><i class="fa fa-linkedin"></i><a href="#">linkedin.com/in/alandoe</a></li>
  337. <li class="github"><i class="fa fa-github"></i><a href="#" >github.com/username</a></li>
  338. <li class="twitter"><i class="fa fa-twitter"></i><a href="#">@twittername</a></li>
  339. </ul>
  340. </div><!--//contact-container-->
  341.  
  342. <!--CHANGE YOUR PERSONAL EDUCATION-->
  343. <div class="education-container container-block">
  344. <h2 class="container-block-title">Education</h2>
  345. <div class="item">
  346. <h4 class="degree">MSc in Computer Science</h4>
  347. <h5 class="meta">University of London</h5>
  348. <div class="time">2011 - 2012</div>
  349. </div><!--//item-->
  350. <div class="item">
  351. <h4 class="degree">BSc in Applied Mathematics</h4>
  352. <h5 class="meta">Bristol University</h5>
  353. <div class="time">2007 - 2011</div>
  354. </div><!--//item-->
  355. </div><!--//education-container-->
  356.  
  357. <!--CHANGE YOUR PERSONAL Language skills-->
  358. <div class="languages-container container-block">
  359. <h2 class="container-block-title">Languages</h2>
  360. <ul class="list-unstyled interests-list">
  361. <li>English <span class="lang-desc">(Native)</span></li>
  362. <li>French <span class="lang-desc">(Professional)</span></li>
  363. <li>Spanish <span class="lang-desc">(Professional)</span></li>
  364. </ul>
  365. </div><!--//interests-->
  366.  
  367. <!--CHANGE YOUR PERSONAL HOBBIES-->
  368. <div class="interests-container container-block">
  369. <h2 class="container-block-title">Interests</h2>
  370. <ul class="list-unstyled interests-list">
  371. <li>Climbing</li>
  372. <li>Snowboarding</li>
  373. <li>Cooking</li>
  374. </ul>
  375. </div><!--//interests-->
  376.  
  377. </div><!--//sidebar-wrapper-->
  378.  
  379. <div class="main-wrapper">
  380.  
  381. <section class="section summary-section">
  382. <h2 class="section-title"><i class="fa fa-user"></i>Career Profile</h2>
  383. <div class="summary">
  384.  
  385. <!--CHANGE CAREER TEXT HERE-->
  386. <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. You can Aenean commodo ligula eget dolor aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
  387. </div><!--//summary-->
  388. </section><!--//section-->
  389.  
  390. <section class="section experiences-section">
  391. <h2 class="section-title"><i class="fa fa-briefcase"></i>Experiences</h2>
  392.  
  393. <div class="item">
  394. <div class="meta">
  395. <div class="upper-row">
  396. <!--CHANGE JOBS YOU'VE HAD HERE-->
  397. <h3 class="job-title">Lead Developer</h3>
  398. <div class="time">2015 - Present</div>
  399. </div><!--//upper-row-->
  400. <div class="company">Startup Hubs, San Francisco</div>
  401. </div><!--//meta-->
  402. <div class="details">
  403. <p>Describe your role here lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
  404. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
  405. </div><!--//details-->
  406. </div><!--//item-->
  407.  
  408. <div class="item">
  409. <div class="meta">
  410. <div class="upper-row">
  411. <h3 class="job-title">Senior Software Engineer</h3>
  412. <div class="time">2014 - 2015</div>
  413. </div><!--//upper-row-->
  414. <div class="company">Google, London</div>
  415. </div><!--//meta-->
  416. <div class="details">
  417. <p>Describe your role here lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  418.  
  419. </div><!--//details-->
  420. </div><!--//item-->
  421.  
  422. <div class="item">
  423. <div class="meta">
  424. <div class="upper-row">
  425. <h3 class="job-title">UI Developer</h3>
  426. <div class="time">2012 - 2014</div>
  427. </div><!--//upper-row-->
  428. <div class="company">Amazon, London</div>
  429. </div><!--//meta-->
  430. <div class="details">
  431. <p>Describe your role here lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  432. </div><!--//details-->
  433. </div><!--//item-->
  434.  
  435. </section><!--//section-->
  436.  
  437. <!--CHANGE PROJECTS HERE-->
  438. <section class="section projects-section">
  439. <h2 class="section-title"><i class="fa fa-archive"></i>Projects</h2>
  440. <div class="intro">
  441. <p>You can list your side projects or open source libraries in this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ligula in nunc bibendum fringilla a eu lectus.</p>
  442. </div><!--//intro-->
  443. <div class="item">
  444. <span class="project-title"><a href="#">Velocity</a></span> - <span class="project-tagline">A responsive website template designed to help startups promote, market and sell their products.</span>
  445.  
  446. </div><!--//item-->
  447. <div class="item">
  448. <span class="project-title"><a href="#">DevStudio</a></span> -
  449. <span class="project-tagline">A responsive website template designed to help web developers/designers market their services. </span>
  450. </div><!--//item-->
  451. <div class="item">
  452. <span class="project-title"><a href="#" >Tempo</a></span> - <span class="project-tagline">A responsive website template designed to help startups promote their products or services and to attract users &amp; investors</span>
  453. </div><!--//item-->
  454. <div class="item">
  455. <span class="project-title"><a href="#">Atom</a></span> - <span class="project-tagline">A comprehensive website template solution for startups/developers to market their mobile apps. </span>
  456. </div><!--//item-->
  457. <div class="item">
  458. <span class="project-title"><a href="#">Delta</a></span> - <span class="project-tagline">A responsive Bootstrap one page theme designed to help app developers promote their mobile apps</span>
  459. </div><!--//item-->
  460. </section><!--//section-->
  461.  
  462.  
  463.  
  464. </div><!--//main-body-->
  465. </div>
  466.  
  467.  
  468.  
  469. <!-- Javascript -->
  470. <script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
  471. <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  472. <!-- custom js -->
  473. <script type="text/javascript" src="assets/js/main.js"></script>
  474. </body>
  475. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!