Advertisement
extasisthemes

Perfume (All In One Page Version)

Jul 27th, 2016
1,247
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.87 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!----- Perfume (All In One Page Version) by extasisthemes ----->
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12.  
  13. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  14. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  15. <script>
  16. (function($){
  17. $(document).ready(function(){
  18. $("a[title]").style_my_tooltips({
  19. tip_follows_cursor:true,
  20. tip_delay_time:90,
  21. tip_fade_speed:600,
  22. attribute:"title"
  23. });
  24. });
  25. })(jQuery);
  26. </script>
  27.  
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29.  
  30. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  31.  
  32. <script type="text/javascript">
  33. $(window).load(function () {
  34. $('#bcontainer').masonry({
  35. itemSelector : ".box",
  36. },
  37. function() { $('#bcontainer').masonry({ appendedContent: $(this) }); }
  38. );
  39. });
  40. </script>
  41.  
  42. <style type="text/css">
  43.  
  44. @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic);
  45.  
  46. ::-webkit-scrollbar-thumb:vertical {
  47. background:#000000;
  48. height:50px;
  49. }
  50.  
  51. ::-webkit-scrollbar {
  52. height:10px;
  53. width:3px;
  54. }
  55.  
  56. #s-m-t-tooltip {
  57. background:#ffffff;
  58. border:1px solid #cfcfcf;
  59. color:#000000;
  60. font-family:'Source Sans Pro', sans-serif;
  61. font-size:10px;
  62. font-style:normal;
  63. font-weight:normal;
  64. letter-spacing:0px;
  65. margin-top:20px;
  66. padding:10px;
  67. text-align:center;
  68. text-decoration:none;
  69. text-transform:uppercase;
  70. z-index:999999999999999999999999999999999999;
  71. }
  72.  
  73. body {
  74. background:#f8f8f8;
  75. color:#000000;
  76. cursor:url(http://i.imgur.com/lhPqll6.png), progress;
  77. font-family:'Source Sans Pro', sans-serif;
  78. font-size:11px;
  79. font-style:normal;
  80. font-weight:normal;
  81. letter-spacing:0px;
  82. margin:0px;
  83. text-align:justify;
  84. text-decoration:none;
  85. text-transform:none;
  86. word-break:break-word;
  87. }
  88.  
  89. a {
  90. border-bottom:1px solid #6633bb;
  91. color:#000000;
  92. text-decoration:none;
  93. -webkit-transition: all 0.5s ease;
  94. -moz-transition: all 0.5s ease;
  95. -o-transition: all 0.5s ease;
  96. }
  97.  
  98. a:hover {
  99. color:#cfcfcf;
  100. }
  101.  
  102. blockquote {
  103. border-left:1px solid #000000;
  104. margin:5px;
  105. padding-left:5px;
  106. }
  107.  
  108. blockquote img {
  109. height:auto;
  110. max-width:200px;
  111. }
  112.  
  113. blockquote blockquote {
  114. border-left:1px solid #000000;
  115. padding-left:5px;
  116. }
  117.  
  118. ul {
  119. padding:10px;
  120. }
  121.  
  122. li {
  123. list-style:none;
  124. padding:2px 0px 1px 0px;
  125. }
  126.  
  127. li:before {
  128. color:#eeeeee;
  129. content:'–––––';
  130. letter-spacing:-3px;
  131. padding-right:10px;
  132. }
  133.  
  134. img {
  135. height:auto;
  136. max-width:100%;
  137. }
  138.  
  139. #header {
  140. background:#ffffff;
  141. border-bottom:1px solid #eeeeee;
  142. margin-top:-200px;
  143. padding-bottom:40px;
  144. padding-top:40px;
  145. position:fixed;
  146. width:100%;
  147. z-index:1;
  148. }
  149.  
  150. .title {
  151. border-bottom:1px solid #6633bb;
  152. display:inline-block;
  153. color:#000000;
  154. font-family:'Source Sans Pro', sans-serif;
  155. font-size:11px;
  156. font-style:normal;
  157. font-weight:700;
  158. letter-spacing:0px;
  159. margin-left:40px;
  160. text-decoration:none;
  161. text-align:left;
  162. text-transform:uppercase;
  163. }
  164.  
  165. .links {
  166. color:#777777;
  167. font-family:'Source Sans Pro', sans-serif;
  168. font-size:11px;
  169. font-style:normal;
  170. font-weight:normal;
  171. letter-spacing:0px;
  172. text-decoration:none;
  173. text-align:left;
  174. text-transform:uppercase;
  175. }
  176.  
  177. .links a {
  178. border-bottom:none;
  179. display:inline-block;
  180. color:#777777;
  181. margin-bottom:5px;
  182. margin-left:20px;
  183. }
  184.  
  185. .links a:hover {
  186. color:#cfcfcf;
  187. }
  188.  
  189. #bcontainer {
  190. margin-bottom:200px;
  191. margin-left:auto;
  192. margin-right:auto;
  193. margin-top:200px;
  194. width:810px;
  195. }
  196.  
  197. #box {
  198. background:#ffffff;
  199. float:left;
  200. width:250px;
  201. margin:10px;
  202. }
  203.  
  204. .aimage {
  205. height:150px;
  206. width:250px;
  207. }
  208.  
  209. .aimage img {
  210. height:150px;
  211. width:250px;
  212. }
  213.  
  214. .abox {
  215. border-bottom:1px solid #eeeeee;
  216. border-left:1px solid #eeeeee;
  217. border-right:1px solid #eeeeee;
  218. }
  219.  
  220. .adetails {
  221. border-bottom:1px solid #eeeeee;
  222. color:#000000;
  223. font-family:'Source Sans Pro', sans-serif;
  224. font-size:12px;
  225. font-style:normal;
  226. font-weight:normal;
  227. letter-spacing:0px;
  228. padding:10px;
  229. text-decoration:none;
  230. text-align:justify;
  231. text-transform:none;
  232. }
  233.  
  234. .acontent {
  235. color:#000000;
  236. font-family:'Source Sans Pro', sans-serif;
  237. font-size:12px;
  238. font-style:normal;
  239. font-weight:normal;
  240. letter-spacing:0px;
  241. padding:10px;
  242. text-decoration:none;
  243. text-align:justify;
  244. text-transform:none;
  245. }
  246.  
  247. .ucontent {
  248. border-left:1px solid #eeeeee;
  249. border-right:1px solid #eeeeee;
  250. border-top:1px solid #eeeeee;
  251. }
  252.  
  253. .updates {
  254. border-bottom:1px solid #eeeeee;
  255. color:#000000;
  256. font-family:'Source Sans Pro', sans-serif;
  257. font-size:12px;
  258. font-style:normal;
  259. font-weight:normal;
  260. letter-spacing:0px;
  261. padding:10px;
  262. text-decoration:none;
  263. text-align:justify;
  264. text-transform:none;
  265. }
  266.  
  267. .fbox {
  268. border-bottom:1px solid #eeeeee;
  269. }
  270.  
  271. .fquestion {
  272. background:#ffffff;
  273. color:#000000;
  274. font-family:'Source Sans Pro', sans-serif;
  275. font-size:12px;
  276. font-style:normal;
  277. font-weight:700;
  278. letter-spacing:0px;
  279. padding:10px;
  280. text-decoration:none;
  281. text-align:justify;
  282. text-transform:none;
  283. }
  284.  
  285. .fanswer {
  286. background:#ffffff;
  287. color:#000000;
  288. font-family:'Source Sans Pro', sans-serif;
  289. font-size:12px;
  290. font-style:normal;
  291. font-weight:normal;
  292. letter-spacing:0px;
  293. padding:10px;
  294. padding-top:0px;
  295. text-decoration:none;
  296. text-align:justify;
  297. text-transform:none;
  298. }
  299.  
  300. .abbox {
  301. padding:10px;
  302. padding-bottom:0px;
  303. padding-top:0px;
  304. }
  305.  
  306. .ntitle {
  307. background:#ffffff;
  308. border:1px solid #eeeeee;
  309. color:#000000;
  310. font-family:'Source Sans Pro', sans-serif;
  311. font-size:12px;
  312. font-style:normal;
  313. font-weight:700;
  314. letter-spacing:0px;
  315. padding:10px;
  316. text-decoration:none;
  317. text-align:left;
  318. text-transform:uppercase;
  319. }
  320.  
  321. .nlinks {
  322. background:#ffffff;
  323. border-left:1px solid #eeeeee;
  324. border-right:1px solid #eeeeee;
  325. border-top:1px solid #eeeeee;
  326. color:#000000;
  327. font-family:'Source Sans Pro', sans-serif;
  328. font-size:12px;
  329. font-style:normal;
  330. font-weight:normal;
  331. letter-spacing:0px;
  332. margin-top:10px;
  333. text-decoration:none;
  334. text-align:justify;
  335. text-transform:none;
  336. }
  337.  
  338. .nlinks a {
  339. border-bottom:1px solid #eeeeee;
  340. color:#000000;
  341. display:block;
  342. padding:10px;
  343. }
  344.  
  345. .nlinks a:hover {
  346. color:#cfcfcf;
  347. }
  348.  
  349. #credit {
  350. background:#ffffff;
  351. border:1px solid #eeeeee;
  352. bottom:15px;
  353. color:#000000;
  354. float:right;
  355. font-family:'Open Sans', sans-serif;
  356. font-size:10px;
  357. font-style:normal;
  358. font-weight:normal;
  359. letter-spacing:0px;
  360. padding:5px;
  361. position:fixed;
  362. right:15px;
  363. text-align:justify;
  364. text-decoration:none;
  365. text-transform:uppercase;
  366. }
  367.  
  368. #credit a {
  369. border-bottom:none;
  370. color:#000000;
  371. }
  372.  
  373. #credit a:hover {
  374. color:#cfcfcf;
  375. }
  376.  
  377. {CustomCSS}</style></head><body>
  378.  
  379. <div id="header">
  380.  
  381. <div class="links">
  382. <div class="title">Perfume</div>
  383. <a href="/">home</a>
  384. <a href="/ask">ask</a>
  385. <a href="/">link one</a>
  386. <a href="/">link two</a>
  387. <a href="/">link three</a>
  388. <a href="/archive">archive</a>
  389. </div>
  390.  
  391. </div>
  392.  
  393. <div id="bcontainer">
  394.  
  395. <div id="box">
  396.  
  397. <div class="aimage"><img src="http://i.imgur.com/WEIyhfC.png"/></div>
  398.  
  399. <div class="abox">
  400.  
  401. <div class="adetails"><b style="margin-right:5px;">Name</b> Franchesca</div>
  402. <div class="adetails"><b style="margin-right:5px;">Age</b> Nineteen</div>
  403. <div class="adetails"><b style="margin-right:5px;">Location</b> Manila, Philippines</div>
  404.  
  405. <div class="acontent">
  406. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  407. </div>
  408.  
  409. </div>
  410.  
  411. </div>
  412.  
  413. <div id="box" style="border:1px solid #eeeeee;width:248px;">
  414.  
  415. <div class="fbox">
  416. <div class="fquestion">What is Lorem Ipsum?</div>
  417. <div class="fanswer">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  418. </div>
  419.  
  420. <div class="fbox">
  421. <div class="fquestion">Why do we use it?</div>
  422. <div class="fanswer">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </div>
  423. </div>
  424.  
  425. <div class="fbox">
  426. <div class="fquestion">
  427. Where does it come from?</div>
  428. <div class="fanswer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
  429. </div>
  430.  
  431. <div class="abbox">
  432. <p><iframe id="ask_form" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com "frameborder="0" scrolling="no" width="100%" height="200"></iframe></p>
  433. </div>
  434.  
  435. </div>
  436.  
  437. <div id="box">
  438.  
  439. <div class="ucontent">
  440.  
  441. <div class="updates"><b style="margin-right:5px;">MM/DD/YYYY</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</div>
  442.  
  443. <div class="updates"><b style="margin-right:5px;">MM/DD/YYYY</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</div>
  444.  
  445. <div class="updates"><b style="margin-right:5px;">MM/DD/YYYY</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris.</div>
  446.  
  447. </div>
  448.  
  449. </div>
  450.  
  451. <div id="box" style="background:transparent;">
  452.  
  453. <div class="ntitle">More Links</div>
  454.  
  455. <div class="nlinks">
  456. <a href="/">Link One</a>
  457. <a href="/">Link Two</a>
  458. <a href="/">Link Three</a>
  459. <a href="/">Link Four</a>
  460. <a href="/">Link Five</a>
  461. <a href="/">Link Six</a>
  462. <a href="/">Link Seven</a>
  463. </div>
  464.  
  465. </div>
  466.  
  467. </div>
  468.  
  469. <div id="credit">
  470. <a href="http://extasisthemes.tumblr.com/">ET</a>
  471. </div>
  472.  
  473. </body>
  474. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement