API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 24th, 2018
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.88 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
  4. <!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
  5. <!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8" />
  8. <title>Ceevee | Free Responsive HTML5/CSS3 Template</title>
  9. <meta name="generator" content="GravCMS" />
  10. <meta name="description" content="An exclusive HTML5/CSS3 freebie by Peter Finlan, for Codrops." />
  11. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  12. <link rel="icon" type="image/png" href="/user/themes/ceevee/images/favicon.png" />
  13. <link href="/user/plugins/form/assets/form-styles.css" type="text/css" rel="stylesheet" />
  14. <link href="/user/plugins/login/css/login.css" type="text/css" rel="stylesheet" />
  15. <link href="/user/themes/ceevee/css/default.css" type="text/css" rel="stylesheet" />
  16. <link href="/user/themes/ceevee/css/layout.css" type="text/css" rel="stylesheet" />
  17. <link href="/user/themes/ceevee/css/media-queries.css" type="text/css" rel="stylesheet" />
  18. <link href="/user/themes/ceevee/css/magnific-popup.css" type="text/css" rel="stylesheet" />
  19.  
  20. <script src="/user/themes/ceevee/js/modernizr.js"></script>
  21. </head>
  22. <body>
  23. <header id="home">
  24. <nav id="nav-wrap">
  25. <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
  26. <a class="mobile-btn" href="#close" title="Hide navigation">Hide navigation</a>
  27.  
  28.  
  29. <ul id="nav" class="nav">
  30. <li class="current">
  31. <a class="smoothscroll" href="#home">
  32. home
  33. </a>
  34. </li>
  35. <li class="">
  36. <a class="smoothscroll" href="#about">About</a>
  37. </li>
  38. <li class="">
  39. <a class="smoothscroll" href="#resume">Resume</a>
  40. </li>
  41. <li class="">
  42. <a class="smoothscroll" href="#portfolio">Portfolio</a>
  43. </li>
  44. <li class="">
  45. <a class="smoothscroll" href="#testimonials">Testimonials</a>
  46. </li>
  47. <li class="">
  48. <a class="smoothscroll" href="#contact">Contact</a>
  49. </li>
  50. </ul>
  51. </nav>
  52. <div class="row banner">
  53. <div class="banner-text">
  54. <h1 class="responsive-headline">I'm Jonathan Doe.</h1>
  55. <h3>I'm a Manila based <span>graphic designer</span>, <span>illustrator</span> and <span>webdesigner</span> creating awesome and effective visual identities for companies of all sizes around the globe. Let's <a class="smoothscroll" href="#about">start scrolling</a> and learn more <a class="smoothscroll" href="#about">about me</a>.</h3>
  56. <hr />
  57. <ul class="social">
  58. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  59. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  60. <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  61. <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  62. <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  63. <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  64. <li><a href="#"><i class="fa fa-skype"></i></a></li>
  65. </ul>
  66. </div>
  67. </div>
  68. <p class="scrolldown">
  69. <a class="smoothscroll" href="#about"><i class="icon-down-circle"></i></a>
  70. </p>
  71. </header>
  72.  
  73. <div id="content">
  74. <section id="about">
  75. <div class="row">
  76. <div class="three columns">
  77. <img class="profile-pic" src="/user/pages/01.home/_about/profilepic.jpg" alt="" />
  78. </div>
  79.  
  80. <div class="nine columns main-col">
  81. <h2>About Me</h2>
  82. <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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
  83. <div class="row">
  84. <div class="columns contact-details">
  85. <h2>Contact Details</h2>
  86. <p class="address">
  87. Jonathan Doe <br />
  88. 1600 Amphitheatre Parkway <br />
  89. Mountain View, CA 94043 US <br />
  90. (123)456-7890 <br />
  91. a&#110;&#121;&#111;&#110;e&#64;w&#101;&#98;s&#105;&#116;&#101;.&#99;&#111;m <br />
  92. </p>
  93. </div>
  94. <div class="columns download">
  95. <p>
  96. <a href="#" class="button"><i class="fa fa-download"></i>Download Resume</a>
  97. </p>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </section>
  103.  
  104. <section id="resume">
  105. <div class="row education">
  106. <div class="three columns header-col">
  107. <h1><span>Education</span></h1>
  108. </div>
  109. <div class="nine columns main-col">
  110. <div class="row item">
  111. <div class="twelve columns">
  112. <h3>University of Life</h3>
  113. <p class="info">Master in Graphic Design <span>&bull;</span> <em class="date">April 2007</em></p>
  114. <p>
  115. 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, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede mollis pretium.
  116. </p>
  117.  
  118.  
  119. </div>
  120. </div>
  121. <div class="row item">
  122. <div class="twelve columns">
  123. <h3>School of Cool Designers</h3>
  124. <p class="info">B.A. Degree in Graphic Design <span>&bull;</span> <em class="date">March 2003</em></p>
  125. <p>
  126. This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat
  127. </p>
  128.  
  129.  
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <div class="row work">
  135. <div class="three columns header-col">
  136. <h1><span>Work</span></h1>
  137. </div>
  138. <div class="nine columns main-col">
  139. <div class="row item">
  140. <div class="twelve columns">
  141. <h3>Awesome Design Studio</h3>
  142. <p class="info">Senior UX Designer <span>&bull;</span> <em class="date">March 2010 - Present</em></p>
  143. <p>
  144. 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, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede mollis pretium.
  145. </p>
  146.  
  147.  
  148. </div>
  149. </div>
  150. <div class="row item">
  151. <div class="twelve columns">
  152. <h3>Super Cool Studio</h3>
  153. <p class="info">UX Designer <span>&bull;</span> <em class="date">March 2007 - February 2010</em></p>
  154. <p>
  155. This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat
  156. </p>
  157.  
  158.  
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="row skill">
  164. <div class="three columns header-col">
  165. <h1><span>Skills</span></h1>
  166. </div>
  167. <div class="nine columns main-col">
  168. <div class="row item">
  169. <div class="twelve columns">
  170. <p>
  171. 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, fringilla vel, aliquet nec, vulputate eget, arcu. Nullam dictum felis eu pede mollis pretium.
  172. </p>
  173.  
  174. <div class="bars">
  175. <ul class="skills">
  176. <li><span class="bar-expand" style="width: 60%;animation: photoshop 2s ease;"></span><em>Photoshop</em></li>
  177. <li><span class="bar-expand" style="width: 55%;animation: illustrator 2s ease;"></span><em>Illustrator</em></li>
  178. <li><span class="bar-expand" style="width: 50%;animation: wordpress 2s ease;"></span><em>Wordpress</em></li>
  179. <li><span class="bar-expand" style="width: 90%;animation: css 2s ease;"></span><em>CSS</em></li>
  180. <li><span class="bar-expand" style="width: 80%;animation: html5 2s ease;"></span><em>Html5</em></li>
  181. <li><span class="bar-expand" style="width: 50%;animation: jquery 2s ease;"></span><em>Jquery</em></li>
  182. </ul>
  183. </div>
  184.  
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </section>
  190.  
  191. <section id="portfolio">
  192. <div class="row">
  193. <div class="twelve columns collapsed">
  194. <h1>Check Out Some of My Works.</h1>
  195. <div id="portfolio-wrapper" class="bgrid-quarters s-bgrid-thirds cf">
  196. <div class="columns portfolio-item">
  197. <div class="item-wrap">
  198. <a href="#modal-1" title="">
  199. <img alt="" src="/images/1/1/8/e/d/118ed226042321ff030c41d2687eb8b348ae4a6a-coffee.jpeg" />
  200. <div class="overlay">
  201. <div class="portfolio-item-meta">
  202. <h5>Coffee Cup</h5>
  203. <p>Illustration</p>
  204. </div>
  205. </div>
  206. <div class="link-icon"><i class="icon-plus"></i></div>
  207. </a>
  208. </div>
  209. </div>
  210. <div class="columns portfolio-item">
  211. <div class="item-wrap">
  212. <a href="#modal-2" title="">
  213. <img alt="" src="/images/d/9/4/2/2/d9422f3c31d8548e28fc68bd6d22054bafb59a69-console.jpeg" />
  214. <div class="overlay">
  215. <div class="portfolio-item-meta">
  216. <h5>Console</h5>
  217. <p>Web Development</p>
  218. </div>
  219. </div>
  220. <div class="link-icon"><i class="icon-plus"></i></div>
  221. </a>
  222. </div>
  223. </div>
  224. <div class="columns portfolio-item">
  225. <div class="item-wrap">
  226. <a href="#modal-3" title="">
  227. <img alt="" src="/images/f/b/c/c/4/fbcc44999e7327114d42d78480f99ff136a28428-judah.jpeg" />
  228. <div class="overlay">
  229. <div class="portfolio-item-meta">
  230. <h5>Judah</h5>
  231. <p>Webdesign</p>
  232. </div>
  233. </div>
  234. <div class="link-icon"><i class="icon-plus"></i></div>
  235. </a>
  236. </div>
  237. </div>
  238. <div class="columns portfolio-item">
  239. <div class="item-wrap">
  240. <a href="#modal-4" title="">
  241. <img alt="" src="/images/b/7/c/e/2/b7ce2c7cc7b18cc9c698e5b60524878ed7ee230e-intothelight.jpeg" />
  242. <div class="overlay">
  243. <div class="portfolio-item-meta">
  244. <h5>Into The Light</h5>
  245. <p>Photography</p>
  246. </div>
  247. </div>
  248. <div class="link-icon"><i class="icon-plus"></i></div>
  249. </a>
  250. </div>
  251. </div>
  252. <div class="columns portfolio-item">
  253. <div class="item-wrap">
  254. <a href="#modal-5" title="">
  255. <img alt="" src="/images/0/0/0/7/1/000712cd7ac44f5d1b7ee24852b8bbdfe84267bc-farmerboy.jpeg" />
  256. <div class="overlay">
  257. <div class="portfolio-item-meta">
  258. <h5>Farmer Boy</h5>
  259. <p>Branding</p>
  260. </div>
  261. </div>
  262. <div class="link-icon"><i class="icon-plus"></i></div>
  263. </a>
  264. </div>
  265. </div>
  266. <div class="columns portfolio-item">
  267. <div class="item-wrap">
  268. <a href="#modal-6" title="">
  269. <img alt="" src="/images/8/4/4/d/4/844d4d687a0482c473dc2d2be5a4678832f86be8-girl.jpeg" />
  270. <div class="overlay">
  271. <div class="portfolio-item-meta">
  272. <h5>Girl</h5>
  273. <p>Photography</p>
  274. </div>
  275. </div>
  276. <div class="link-icon"><i class="icon-plus"></i></div>
  277. </a>
  278. </div>
  279. </div>
  280. <div class="columns portfolio-item">
  281. <div class="item-wrap">
  282. <a href="#modal-7" title="">
  283. <img alt="" src="/images/7/8/e/7/f/78e7fc828d4c07d6efcd7b19cf75e5c40222e4af-origami.jpeg" />
  284. <div class="overlay">
  285. <div class="portfolio-item-meta">
  286. <h5>Origami</h5>
  287. <p>Illustration</p>
  288. </div>
  289. </div>
  290. <div class="link-icon"><i class="icon-plus"></i></div>
  291. </a>
  292. </div>
  293. </div>
  294. <div class="columns portfolio-item">
  295. <div class="item-wrap">
  296. <a href="#modal-8" title="">
  297. <img alt="" src="/images/f/3/a/1/c/f3a1c817b116b55ad050ecffcbd75eb4b036619e-retrocam.jpeg" />
  298. <div class="overlay">
  299. <div class="portfolio-item-meta">
  300. <h5>Retrocam</h5>
  301. <p>Web Development</p>
  302. </div>
  303. </div>
  304. <div class="link-icon"><i class="icon-plus"></i></div>
  305. </a>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. <div id="modal-1" class="popup-modal mfp-hide">
  311. <img class="scale-with-grid" src="/images/8/9/5/8/7/895872f2ec99d6191648f23c18ed71f7b32b8a0d-coffee.jpeg" alt="" />
  312. <div class="description-box">
  313. <h4>Coffee Cup</h4>
  314. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  315. <span class="categories"><i class="fa fa-tag"></i>Branding, Web Development</span>
  316. </div>
  317. <div class="link-box">
  318. <a href="http://www.behance.net">Details</a>
  319. <a class="popup-modal-dismiss">Close</a>
  320. </div>
  321. </div>
  322. <div id="modal-2" class="popup-modal mfp-hide">
  323. <img class="scale-with-grid" src="/images/b/a/3/4/5/ba345e4e51dcca8a11dcb097dcd706845943348a-console.jpeg" alt="" />
  324. <div class="description-box">
  325. <h4>Console</h4>
  326. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  327. <span class="categories"><i class="fa fa-tag"></i>Branding, Web Development</span>
  328. </div>
  329. <div class="link-box">
  330. <a href="http://www.behance.net">Details</a>
  331. <a class="popup-modal-dismiss">Close</a>
  332. </div>
  333. </div>
  334. <div id="modal-3" class="popup-modal mfp-hide">
  335. <img class="scale-with-grid" src="/images/6/2/d/4/4/62d44a54a385785aa9789bc8bb79b71708e8f048-judah.jpeg" alt="" />
  336. <div class="description-box">
  337. <h4>Judah</h4>
  338. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  339. <span class="categories"><i class="fa fa-tag"></i>Branding</span>
  340. </div>
  341. <div class="link-box">
  342. <a href="http://www.behance.net">Details</a>
  343. <a class="popup-modal-dismiss">Close</a>
  344. </div>
  345. </div>
  346. <div id="modal-4" class="popup-modal mfp-hide">
  347. <img class="scale-with-grid" src="/images/f/c/3/4/2/fc342791fbbe96470b811d993bba8a8d59a09cbe-intothelight.jpeg" alt="" />
  348. <div class="description-box">
  349. <h4>Into The Light</h4>
  350. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  351. <span class="categories"><i class="fa fa-tag"></i>Photography</span>
  352. </div>
  353. <div class="link-box">
  354. <a href="http://www.behance.net">Details</a>
  355. <a class="popup-modal-dismiss">Close</a>
  356. </div>
  357. </div>
  358. <div id="modal-5" class="popup-modal mfp-hide">
  359. <img class="scale-with-grid" src="/images/1/6/5/4/3/165438ab7f525d0ccaebca6958b5505d7ce91779-farmerboy.jpeg" alt="" />
  360. <div class="description-box">
  361. <h4>Farmer Boy</h4>
  362. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  363. <span class="categories"><i class="fa fa-tag"></i>Branding, Webdesign</span>
  364. </div>
  365. <div class="link-box">
  366. <a href="http://www.behance.net">Details</a>
  367. <a class="popup-modal-dismiss">Close</a>
  368. </div>
  369. </div>
  370. <div id="modal-6" class="popup-modal mfp-hide">
  371. <img class="scale-with-grid" src="/images/3/3/c/f/e/33cfedc56590c628e43ad2f8a6a330e14e68159a-girl.jpeg" alt="" />
  372. <div class="description-box">
  373. <h4>Girl</h4>
  374. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  375. <span class="categories"><i class="fa fa-tag"></i>Photography</span>
  376. </div>
  377. <div class="link-box">
  378. <a href="http://www.behance.net">Details</a>
  379. <a class="popup-modal-dismiss">Close</a>
  380. </div>
  381. </div>
  382. <div id="modal-7" class="popup-modal mfp-hide">
  383. <img class="scale-with-grid" src="/images/7/1/e/a/8/71ea819ac5c3f99c30cab37c42fa9d2a954e34d0-origami.jpeg" alt="" />
  384. <div class="description-box">
  385. <h4>Origami</h4>
  386. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  387. <span class="categories"><i class="fa fa-tag"></i>Branding, Illustration</span>
  388. </div>
  389. <div class="link-box">
  390. <a href="http://www.behance.net">Details</a>
  391. <a class="popup-modal-dismiss">Close</a>
  392. </div>
  393. </div>
  394. <div id="modal-8" class="popup-modal mfp-hide">
  395. <img class="scale-with-grid" src="/images/1/b/d/a/a/1bdaab4363f67af6959dcbfb161d8c616b5ca373-retrocam.jpeg" alt="" />
  396. <div class="description-box">
  397. <h4>Retrocam</h4>
  398. <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit..</p>
  399. <span class="categories"><i class="fa fa-tag"></i>Webdesign, Photography</span>
  400. </div>
  401. <div class="link-box">
  402. <a href="http://www.behance.net">Details</a>
  403. <a class="popup-modal-dismiss">Close</a>
  404. </div>
  405. </div>
  406. </div>
  407. </section>
  408.  
  409. <section id="call-to-action">
  410. <div class="row">
  411. <div class="two columns header-col">
  412. <h1><span></span></h1>
  413. </div>
  414. <div class="seven columns">
  415. <h2><a href="http://www.dreamhost.com/r.cgi?287326%7CSTYLESHOUT=1">Host This Template on Dreamhost.</a></a></h2>
  416. <p>Looking for an awesome and reliable webhosting? Try <a href="http://www.dreamhost.com/r.cgi?287326|STYLESHOUT"><span>DreamHost</span></a>.
  417. Get <span>$50 off</span> when you sign up with the promocode <span>STYLESHOUT</span>.</p>
  418. </div>
  419. <div class="three columns action">
  420. <a href="http://www.dreamhost.com/r.cgi?287326|STYLESHOUT" class="button">Sign Up Now</a>
  421. </div>
  422. </div>
  423. </section>
  424.  
  425. <section id="testimonials">
  426. <div class="text-container">
  427. <div class="row">
  428. <div class="two columns header-col">
  429. <h1><span>Testimonials</span></h1>
  430. </div>
  431.  
  432. <div class="ten columns flex-container">
  433. <div class="flexslider">
  434. <ul class="slides">
  435. <li>
  436. <blockquote>
  437. <p>Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it.</p>
  438. <cite>Steve Jobs</cite>
  439. </blockquote>
  440. </li>
  441. <li>
  442. <blockquote>
  443. <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</p>
  444. <cite>Mr. Adobe</cite>
  445. </blockquote>
  446. </li>
  447. </ul>
  448. </div>
  449. </div>
  450. </div>
  451. </div>
  452. </section>
  453.  
  454. <section id="contact">
  455. <div class="row section-head">
  456. <div class="two columns header-col">
  457. <h1><span>Contact Form</span></h1>
  458. </div>
  459. <div class="ten columns">
  460. <p class="lead">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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
  461. </div>
  462. </div>
  463. <div class="row">
  464. <div class="eight columns">
  465. <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  466.  
  467.  
  468.  
  469.  
  470.  
  471.  
  472. <form name="my-nice-form"
  473. action="/home"
  474. method="POST"
  475. id="my-nice-form" class=" "
  476. >
  477.  
  478.  
  479.  
  480.  
  481. <div class="form-field ">
  482. <div class="form-label ">
  483. <label class="inline" >
  484. Name
  485.  
  486. <span class="required">*</span>
  487. </label>
  488. </div>
  489. <div class="form-data "
  490. data-grav-field="text"
  491. data-grav-disabled="true"
  492. data-grav-default="null"
  493. >
  494. <div class="form-input-wrapper ">
  495. <input
  496. name="data[name]"
  497. value=""
  498. type="text"
  499. class=" "
  500. placeholder="Enter&#x20;your&#x20;name" autocomplete="on"
  501. required="required"
  502. />
  503. </div>
  504.  
  505.  
  506. </div>
  507. </div>
  508.  
  509.  
  510. <div class="form-field ">
  511. <div class="form-label ">
  512. <label class="inline" >
  513. Email
  514.  
  515. <span class="required">*</span>
  516. </label>
  517. </div>
  518. <div class="form-data "
  519. data-grav-field="text"
  520. data-grav-disabled="true"
  521. data-grav-default="null"
  522. >
  523. <div class="form-input-wrapper ">
  524. <input
  525. name="data[email]"
  526. value=""
  527. type="text"
  528. class=" "
  529. placeholder="Enter&#x20;your&#x20;email&#x20;address"
  530. required="required"
  531. />
  532. </div>
  533.  
  534.  
  535. </div>
  536. </div>
  537.  
  538.  
  539. <div class="form-field ">
  540. <div class="form-label ">
  541. <label class="inline" >
  542. Message
  543.  
  544. <span class="required">*</span>
  545. </label>
  546. </div>
  547. <div class="form-data "
  548. data-grav-field="textarea"
  549. data-grav-disabled="true"
  550. data-grav-default="null"
  551. >
  552. <div class="form-textarea-wrapper long ">
  553. <textarea
  554. name="data[message]"
  555. class=" "
  556. placeholder="Enter your message" required="required" ></textarea>
  557. </div>
  558.  
  559. </div>
  560. </div>
  561.  
  562. <input type="hidden" name="__form-name__" value="my-nice-form" />
  563.  
  564. <div class="buttons">
  565.  
  566. <button
  567. class="button "
  568.  
  569. type="submit"
  570.  
  571. >
  572. Submit
  573. </button>
  574.  
  575. </div>
  576.  
  577. <input type="hidden" name="__unique_form_id__" value="tKDO13NqGQW2u5I0woaX" /> <input type="hidden" name="form-nonce" value="84c26783533845f7240d322815eaba66" />
  578. </form>
  579.  
  580. </div>
  581. <aside class="four columns footer-widgets">
  582. <div class="widget widget_contact">
  583. <h4>Address and Phone</h4>
  584. <p class="address">
  585. Jonathan Doe <br />
  586. 1600 Amphitheatre Parkway <br />
  587. Mountain View, CA 94043 US <br />
  588. (123) 456-7890 <br />
  589. </p>
  590. </div>
  591. <div class="widget widget_tweets">
  592. <h4 class="widget-title">Latest Tweets</h4>
  593. <div id="tw-widget1">
  594. </div>
  595. </div>
  596. </aside>
  597. </div>
  598. </section>
  599.  
  600. </div>
  601. <footer>
  602. <div class="row">
  603. <div class="twelve columns">
  604. <ul class="social-links">
  605. <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  606. <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  607. <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  608. <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  609. <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  610. <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  611. <li><a href="#"><i class="fa fa-skype"></i></a></li>
  612. </ul>
  613. <ul class="copyright">
  614. <li>Copyright 2014 CeeVee</li>
  615. <li>Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a></li>
  616. </ul>
  617. </div>
  618. <div id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div>
  619. </div>
  620. </footer>
  621. <script>window.jQuery || document.write('<script src="/user/themes/ceevee/js/jquery-1.10.2.min.js"><\/script>')</script>
  622. <script type="text/javascript" src="/user/themes/ceevee/js/jquery-migrate-1.2.1.min.js"></script>
  623. <script>
  624. /*********************************************************************
  625. * #### Twitter Post Fetcher v12.0 ####
  626. * Coded by Jason Mayes 2013. A present to all the developers out there.
  627. * www.jasonmayes.com
  628. * Please keep this disclaimer with my code if you use it. Thanks. :-)
  629. * Got feedback or questions, ask here:
  630. * http://www.jasonmayes.com/projects/twitterApi/
  631. * Github: https://github.com/jasonmayes/Twitter-Post-Fetcher
  632. * Updates will be posted to this site.
  633. *********************************************************************/
  634.  
  635. var twitterFetcher=function(){function w(a){return a.replace(/<b[^>]*>(.*?)<\/b>/gi,function(a,f){return f}).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi,"")}function m(a,c){for(var f=[],g=new RegExp("(^| )"+c+"( |$)"),h=a.getElementsByTagName("*"),b=0,k=h.length;b<k;b++)g.test(h[b].className)&&f.push(h[b]);return f}var x="",k=20,y=!0,p=[],s=!1,q=!0,r=!0,t=null,u=!0,z=!0,v=null,A=!0,B=!1;return{fetch:function(a){void 0===a.maxTweets&&(a.maxTweets=20);void 0===a.enableLinks&&
  636. (a.enableLinks=!0);void 0===a.showUser&&(a.showUser=!0);void 0===a.showTime&&(a.showTime=!0);void 0===a.dateFunction&&(a.dateFunction="default");void 0===a.showRetweet&&(a.showRetweet=!0);void 0===a.customCallback&&(a.customCallback=null);void 0===a.showInteraction&&(a.showInteraction=!0);void 0===a.showImages&&(a.showImages=!1);if(s)p.push(a);else{s=!0;x=a.domId;k=a.maxTweets;y=a.enableLinks;r=a.showUser;q=a.showTime;z=a.showRetweet;t=a.dateFunction;v=a.customCallback;A=a.showInteraction;B=a.showImages;
  637. var c=document.createElement("script");c.type="text/javascript";c.src="https://cdn.syndication.twimg.com/widgets/timelines/"+a.id+"?&lang="+(a.lang||"en")+"&callback=twitterFetcher.callback&suppress_response_codes=true&rnd="+Math.random();document.getElementsByTagName("head")[0].appendChild(c)}},callback:function(a){var c=document.createElement("div");c.innerHTML=a.body;"undefined"===typeof c.getElementsByClassName&&(u=!1);a=[];var f=[],g=[],h=[],b=[],n=[],e=0;if(u)for(c=c.getElementsByClassName("tweet");e<
  638. c.length;){0<c[e].getElementsByClassName("retweet-credit").length?b.push(!0):b.push(!1);if(!b[e]||b[e]&&z)a.push(c[e].getElementsByClassName("e-entry-title")[0]),n.push(c[e].getAttribute("data-tweet-id")),f.push(c[e].getElementsByClassName("p-author")[0]),g.push(c[e].getElementsByClassName("dt-updated")[0]),void 0!==c[e].getElementsByClassName("inline-media")[0]?h.push(c[e].getElementsByClassName("inline-media")[0]):h.push(void 0);e++}else for(c=m(c,"tweet");e<c.length;)a.push(m(c[e],"e-entry-title")[0]),
  639. n.push(c[e].getAttribute("data-tweet-id")),f.push(m(c[e],"p-author")[0]),g.push(m(c[e],"dt-updated")[0]),void 0!==m(c[e],"inline-media")[0]?h.push(m(c[e],"inline-media")[0]):h.push(void 0),0<m(c[e],"retweet-credit").length?b.push(!0):b.push(!1),e++;a.length>k&&(a.splice(k,a.length-k),f.splice(k,f.length-k),g.splice(k,g.length-k),b.splice(k,b.length-k),h.splice(k,h.length-k));c=[];e=a.length;for(b=0;b<e;){if("string"!==typeof t){var d=new Date(g[b].getAttribute("datetime").replace(/-/g,"/").replace("T",
  640. " ").split("+")[0]),d=t(d);g[b].setAttribute("aria-label",d);if(a[b].innerText)if(u)g[b].innerText=d;else{var l=document.createElement("p"),C=document.createTextNode(d);l.appendChild(C);l.setAttribute("aria-label",d);g[b]=l}else g[b].textContent=d}d="";y?(r&&(d+='<div class="user">'+w(f[b].innerHTML)+"</div>"),d+='<p class="tweet">'+w(a[b].innerHTML)+"</p>",q&&(d+='<p class="timePosted">'+g[b].getAttribute("aria-label")+"</p>")):a[b].innerText?(r&&(d+='<p class="user">'+f[b].innerText+"</p>"),d+=
  641. '<p class="tweet">'+a[b].innerText+"</p>",q&&(d+='<p class="timePosted">'+g[b].innerText+"</p>")):(r&&(d+='<p class="user">'+f[b].textContent+"</p>"),d+='<p class="tweet">'+a[b].textContent+"</p>",q&&(d+='<p class="timePosted">'+g[b].textContent+"</p>"));A&&(d+='<p class="interact"><a href="https://twitter.com/intent/tweet?in_reply_to='+n[b]+'" class="twitter_reply_icon">Reply</a><a href="https://twitter.com/intent/retweet?tweet_id='+n[b]+'" class="twitter_retweet_icon">Retweet</a><a href="https://twitter.com/intent/favorite?tweet_id='+
  642. n[b]+'" class="twitter_fav_icon">Favorite</a></p>');B&&void 0!==h[b]&&(l=h[b],void 0!==l?(l=l.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0],l=decodeURIComponent(l).split('"')[1]):l=void 0,d+='<div class="media"><img src="'+l+'" alt="Image from tweet" /></div>');c.push(d);b++}if(null===v){a=c.length;f=0;g=document.getElementById(x);for(h="<ul>";f<a;)h+="<li>"+c[f]+"</li>",f++;g.innerHTML=h+"</ul>"}else v(c);s=!1;0<p.length&&(twitterFetcher.fetch(p[0]),p.splice(0,1))}}}();
  643.  
  644. var config1 = {
  645. "id": '657554810648948736',
  646. "domId": 'tw-widget1',
  647. "maxTweets": 3,
  648. "enableLinks": true,
  649. "showInteraction": false,
  650. "showImages": false,
  651. "showUser": false,
  652. };
  653. twitterFetcher.fetch(config1);
  654. </script>
  655. <script src="/system/assets/jquery/jquery-2.x.min.js" ></script>
  656. <script src="/user/themes/ceevee/js/jquery.flexslider.js" ></script>
  657. <script src="/user/themes/ceevee/js/waypoints.js" ></script>
  658. <script src="/user/themes/ceevee/js/jquery.fittext.js" ></script>
  659. <script src="/user/themes/ceevee/js/magnific-popup.js" ></script>
  660. <script src="/user/themes/ceevee/js/init.js" ></script>
  661.  
  662. </body>
  663. </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!