API tools faq
paste
Advertisement
Whistik

Untitled

Whistik
Aug 8th, 2018
268
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.62 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.  
  6. <!-- Basic -->
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>Glitche - Resume</title>
  9. <meta name="description" content="">
  10. <meta name="keywords" content="">
  11.  
  12. <!-- Mobile Specific Metas -->
  13. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  14.  
  15. <!-- Load Fonts -->
  16. <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,300italic,300,100italic,400italic,500,500italic,700,700italic&amp;subset=latin,cyrillic' rel='stylesheet'>
  17.  
  18. <!-- CSS -->
  19. <link rel="stylesheet" href="https://beshley.com/glitche_demo/red/css/glitche-basic.css" />
  20. <link rel="stylesheet" href="https://beshley.com/glitche_demo/red/css/glitche-layout.css" />
  21. <link rel="stylesheet" href="https://beshley.com/glitche_demo/red/css/ionicons.css" />
  22. <link rel="stylesheet" href="https://beshley.com/glitche_demo/red/css/magnific-popup.css" />
  23. <link rel="stylesheet" href="https://beshley.com/glitche_demo/red/css/animate.css" />
  24.  
  25. <!--[if lt IE 9]>
  26. <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  27. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  28. <![endif]-->
  29.  
  30. <!-- Favicons -->
  31. <link rel="shortcut icon" href="https://beshley.com/glitche_demo/red/images/favicons/favicon.ico">
  32. <link rel="apple-touch-icon" href="https://beshley.com/glitche_demo/red/images/favicons/apple-touch-icon.png">
  33. <link rel="apple-touch-icon" sizes="72x72" href="https://beshley.com/glitche_demo/red/images/favicons/apple-touch-icon-72x72.png">
  34. <link rel="apple-touch-icon" sizes="114x114" href="https://beshley.com/glitche_demo/red/images/favicons/apple-touch-icon-114x114.png">
  35.  
  36. </head>
  37.  
  38. <body>
  39.  
  40. <!-- Preloader -->
  41. <div class="preloader">
  42. <div class="centrize full-width">
  43. <div class="vertical-center">
  44. <div class="pre-inner">
  45. <div class="load typing-load"><p>loading...</p></div>
  46. <span class="typed-load"></span>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51.  
  52. <!-- Container -->
  53. <div class="container">
  54.  
  55. <!-- Header -->
  56. <header>
  57. <div class="head-top">
  58. <a href="#" class="menu-btn"><span></span></a>
  59. <div class="top-menu">
  60. <ul>
  61. <li class="active"><a href="resume.html" class="lnk">Resume</a></li>
  62. <li><a href="portfolio.html" class="lnk">Portfolio</a></li>
  63. <li><a href="blog.html" class="lnk">Blog</a></li>
  64. <li><a href="contacts.html" class="btn">Contacts</a></li>
  65. </ul>
  66. </div>
  67. </div>
  68. </header>
  69.  
  70. <div class="wrapper">
  71.  
  72. <!-- Started -->
  73. <div class="section started">
  74. <div class="centrize full-width">
  75. <div class="vertical-center">
  76. <div class="started-content">
  77. <div class="h-title glitch-effect" data-text="Resume">Resume</div>
  78. <div class="h-subtitle typing-bread">
  79. <p><a href="index.html">Home</a> / <a href="resume.html">Resume</a></p>
  80. </div>
  81. <span class="typed-bread"></span>
  82. </div>
  83. </div>
  84. </div>
  85. <a href="#" class="mouse_btn"><span class="ion ion-mouse"></span></a>
  86. </div>
  87.  
  88. <!-- About -->
  89. <div class="section about">
  90. <div class="content">
  91. <div class="title">
  92. <div class="title_inner">About Me</div>
  93. </div>
  94. <div class="image">
  95. <img src="http://beshley.com/glitche_demo/red/images/man1.jpg" alt="" />
  96. </div>
  97. <div class="desc">
  98. <p>Lorem ipsum dolor sit amet, in quodsi vulputate pro. Ius illum vocent mediocritatem an, cule dicta iriure at. Ubique maluisset vel te, his dico vituperata ut. Pro ei phaedrum maluisset. Ex audire suavitate has, ei quodsi tacimates sapientem sed, pri zril ubique ut. Te cule tation munere noluisse. Enim torquatos ne pri, eum mollis salutandi corrumpit et, fugit apeirian duo ad.</p>
  99. <div class="info-list">
  100. <ul>
  101. <li><strong>Name:</strong> John Doe</li>
  102. <li><strong>Age:</strong> 22 Years</li>
  103. <li><strong>Job:</strong> Web Developer</li>
  104. <li><strong>Citizenship:</strong> Ukraine</li>
  105. <li><strong>Residence: </strong> Kiev</li>
  106. <li><strong>E-mail:</strong> johndoe@domain.com</li>
  107. </ul>
  108. </div>
  109. <div class="bts"><a href="#" class="btn fill" data-text="Download CV">Download CV</a></div>
  110. </div>
  111. <div class="clear"></div>
  112. </div>
  113. </div>
  114.  
  115. <!-- Resume -->
  116. <div class="section resume">
  117. <div class="content">
  118. <div class="cols">
  119. <div class="col col-md">
  120. <div class="title">
  121. <div class="title_inner">Experience</div>
  122. </div>
  123. <div class="resume-items">
  124. <div class="resume-item active">
  125. <div class="date">2013 - Present</div>
  126. <div class="name">Art Director - Facebook Inc</div>
  127. <p>Morbi nulla arcu, pellentesque sed egestas in, tempor eget felis. Nullam tincidunt augue in leo feugiat, quis interdum nisi sollicitudin.</p>
  128. </div>
  129. <div class="resume-item">
  130. <div class="date">2011 - 2012</div>
  131. <div class="name">Front-end Developer - Google Inc</div>
  132. <p>Duis ipsum ligula, feugiat nec auctor vitae, porta sit amet urna. Praesent ex lorem, porta nec aliquet eu, ullamcorper eget nibh.</p>
  133. </div>
  134. <div class="resume-item">
  135. <div class="date">2009 - 2010</div>
  136. <div class="name">Senior Developer - Abc Inc</div>
  137. <p>Morbi nulla arcu, pellentesque sed egestas in, tempor eget felis. Nullam tincidunt augue in leo feugiat, quis interdum nisi sollicitudin.</p>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="col col-md">
  142. <div class="title">
  143. <div class="title_inner">Education</div>
  144. </div>
  145. <div class="resume-items">
  146. <div class="resume-item">
  147. <div class="date">2007 - 2008</div>
  148. <div class="name">Art University of New York</div>
  149. <p>Morbi nulla arcu, pellentesque sed egestas in, tempor eget felis. Nullam tincidunt augue in leo feugiat, quis interdum nisi sollicitudin.</p>
  150. </div>
  151. <div class="resume-item">
  152. <div class="date">2004 - 2006</div>
  153. <div class="name">Front-end Course</div>
  154. <p>Duis ipsum ligula, feugiat nec auctor vitae, porta sit amet urna. Praesent ex lorem, porta nec aliquet eu, ullamcorper eget nibh.</p>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161.  
  162. <!-- Skills -->
  163. <div class="section skills">
  164. <div class="content">
  165. <div class="title">
  166. <div class="title_inner">My Skills</div>
  167. </div>
  168. <div class="skills">
  169. <ul>
  170. <li>
  171. <div class="name">WordPress</div>
  172. <div class="progress">
  173. <div class="percentage" style="width:70%;">
  174. <span class="percent">70%</span>
  175. </div>
  176. </div>
  177. </li>
  178. <li>
  179. <div class="name">HTML & CSS</div>
  180. <div class="progress">
  181. <div class="percentage" style="width:90%;">
  182. <span class="percent">90%</span>
  183. </div>
  184. </div>
  185. </li>
  186. <li>
  187. <div class="name">jQuery</div>
  188. <div class="progress">
  189. <div class="percentage" style="width:75%;">
  190. <span class="percent">75%</span>
  191. </div>
  192. </div>
  193. </li>
  194. <li>
  195. <div class="name">Photoshop</div>
  196. <div class="progress">
  197. <div class="percentage" style="width:80%;">
  198. <span class="percent">80%</span>
  199. </div>
  200. </div>
  201. </li>
  202. </ul>
  203. </div>
  204. </div>
  205. </div>
  206.  
  207. <!-- Service -->
  208. <div class="section service">
  209. <div class="content">
  210. <div class="title">
  211. <div class="title_inner">My Services</div>
  212. </div>
  213. <div class="service-items">
  214. <div class="service-item">
  215. <div class="icon"><span class="ion ion-social-html5"></span></div>
  216. <div class="name">Front-end</div>
  217. <p>Morbi nulla arcu, pellentesque sed egestas in.</p>
  218. </div>
  219. <div class="service-item">
  220. <div class="icon"><span class="ion ion-ipad"></span></div>
  221. <div class="name">Mobile Application</div>
  222. <p>Morbi nulla arcu, pellentesque sed egestas in.</p>
  223. </div>
  224. <div class="service-item">
  225. <div class="icon"><span class="ion ion-ios-search-strong"></span></div>
  226. <div class="name">Investigation</div>
  227. <p>Morbi nulla arcu, pellentesque sed egestas in.</p>
  228. </div>
  229. <div class="service-item">
  230. <div class="icon"><span class="ion ion-code"></span></div>
  231. <div class="name">Programming</div>
  232. <p>Morbi nulla arcu, pellentesque sed egestas in.</p>
  233. </div>
  234. <div class="service-item">
  235. <div class="icon"><span class="ion ion-help-buoy"></span></div>
  236. <div class="name">Awesome Supports</div>
  237. <p>Morbi nulla arcu, pellentesque sed egestas in.</p>
  238. </div>
  239. <div class="service-item">
  240. <div class="icon"><span class="ion ion-social-chrome"></span></div>
  241. <div class="name">Web Development</div>
  242. <p>Morbi nulla arcu, pellentesque sed egestas in.</p>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247.  
  248. <!-- Clients -->
  249. <div class="section clients">
  250. <div class="content">
  251. <div class="title">
  252. <div class="title_inner">Clients</div>
  253. </div>
  254. <div class="box-items">
  255. <div class="box-item">
  256. <div class="image">
  257. <a target="_blank" href="https://www.google.com">
  258. <img src="http://beshley.com/glitche_demo/red/images/clients/client_1.png" alt="" />
  259. <span class="info">
  260. <span class="centrize full-width">
  261. <span class="vertical-center">
  262. <span class="ion ion-link"></span>
  263. </span>
  264. </span>
  265. </span>
  266. </a>
  267. </div>
  268. </div>
  269. <div class="box-item">
  270. <div class="image">
  271. <a target="_blank" href="https://www.google.com">
  272. <img src="http://beshley.com/glitche_demo/red/images/clients/client_2.png" alt="" />
  273. <span class="info">
  274. <span class="centrize full-width">
  275. <span class="vertical-center">
  276. <span class="ion ion-link"></span>
  277. </span>
  278. </span>
  279. </span>
  280. </a>
  281. </div>
  282. </div>
  283. <div class="box-item">
  284. <div class="image">
  285. <a target="_blank" href="https://www.google.com">
  286. <img src="http://beshley.com/glitche_demo/red/images/clients/client_3.png" alt="" />
  287. <span class="info">
  288. <span class="centrize full-width">
  289. <span class="vertical-center">
  290. <span class="ion ion-link"></span>
  291. </span>
  292. </span>
  293. </span>
  294. </a>
  295. </div>
  296. </div>
  297. <div class="box-item">
  298. <div class="image">
  299. <a target="_blank" href="https://www.google.com">
  300. <img src="http://beshley.com/glitche_demo/red/images/clients/client_1.png" alt="" />
  301. <span class="info">
  302. <span class="centrize full-width">
  303. <span class="vertical-center">
  304. <span class="ion ion-link"></span>
  305. </span>
  306. </span>
  307. </span>
  308. </a>
  309. </div>
  310. </div>
  311. <div class="box-item">
  312. <div class="image">
  313. <a target="_blank" href="https://www.google.com">
  314. <img src="http://beshley.com/glitche_demo/red/images/clients/client_2.png" alt="" />
  315. <span class="info">
  316. <span class="centrize full-width">
  317. <span class="vertical-center">
  318. <span class="ion ion-link"></span>
  319. </span>
  320. </span>
  321. </span>
  322. </a>
  323. </div>
  324. </div>
  325. <div class="box-item">
  326. <div class="image">
  327. <a target="_blank" href="https://www.google.com">
  328. <img src="http://beshley.com/glitche_demo/red/images/clients/client_3.png" alt="" />
  329. <span class="info">
  330. <span class="centrize full-width">
  331. <span class="vertical-center">
  332. <span class="ion ion-link"></span>
  333. </span>
  334. </span>
  335. </span>
  336. </a>
  337. </div>
  338. </div>
  339. </div>
  340. <div class="clear"></div>
  341. </div>
  342. </div>
  343.  
  344. </div>
  345.  
  346. <!-- Footer -->
  347. <footer>
  348. <div class="soc">
  349. <a target="_blank" href="https://dribbble.com/"><span class="ion ion-social-dribbble"></span></a>
  350. <a target="_blank" href="https://twitter.com/"><span class="ion ion-social-twitter"></span></a>
  351. <a target="_blank" href="https://github.com/"><span class="ion ion-social-github"></span></a>
  352. <a target="_blank" href="https://www.instagram.com/"><span class="ion ion-social-instagram-outline"></span></a>
  353. </div>
  354. <div class="copy">© 2016 Glitche. All rights reserved.</div>
  355. <div class="clr"></div>
  356. </footer>
  357.  
  358. </div>
  359.  
  360. <!-- jQuery Scripts -->
  361. <script src="https://beshley.com/glitche_demo/red/js/jquery.min.js"></script>
  362. <script src="https://beshley.com/glitche_demo/red/js/jquery.validate.js"></script>
  363. <script src="https://beshley.com/glitche_demo/red/js/typed.js"></script>
  364. <script src="https://beshley.com/glitche_demo/red/js/magnific-popup.js"></script>
  365. <script src="https://beshley.com/glitche_demo/red/js/masonry.pkgd.js"></script>
  366. <script src="https://beshley.com/glitche_demo/red/js/imagesloaded.pkgd.js"></script>
  367. <script src="https://beshley.com/glitche_demo/red/js/masonry-filter.js"></script>
  368.  
  369. <!-- Main Scripts -->
  370. <script src="https://beshley.com/glitche_demo/red/js/glitche-scripts.js"></script>
  371.  
  372. </body>
  373. </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!