API tools faq
paste
Advertisement
neothm

[PAGE] Gasoline

neothm
Dec 16th, 2015
2,201
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Page "Gasoline" by Neo
  5. Find me on tumblr: @NEOTHM | @NEOVAK
  6. If you spotted a glitch, feel free to message me!
  7. Thank you for taking an interest in this page, enjoy! ♡
  8. -->
  9. <head>
  10. <meta charset="utf-8"><title>{Title}</title><meta name="description" content="{MetaDescription}"><link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/jSmnqcghc/normalizer.css">
  11. <!--Change "Roboto" to the font of your choice--><link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'><link rel="shortcut icon" href="{Favicon}">
  12. <style>
  13. *{
  14. margin:0;
  15. padding:0;
  16. }
  17. html, body{
  18. height:100%;
  19. }
  20. body{
  21. text-align:justify;
  22. word-break:break-word;
  23. color:#898989; /*Text colour*/
  24. background:#fff; /*Background colour*/
  25. -webkit-font-smoothing: antialiased;
  26. -moz-osx-font-smoothing: grayscale;
  27. padding-top:1px;
  28. margin-top:-1px;
  29. /*IF YOU WANT A BACKGROUND IMAGE: */
  30. background-image:url('http://backgroundimage.png');
  31. background-attachment:fixed;
  32. /*for a full size background (delete this line if you want your bg to tile): */ background-size:cover;
  33. }
  34. #noscroll{
  35. overflow-x:hidden;
  36. }
  37. main a{
  38. color:#ccc; /*Links colour*/
  39. border-bottom:1px solid #ccc; /*Border bottom*/
  40. text-decoration:none;
  41. }
  42. main a:hover{
  43. color:#000; /*Links colour on hover*/
  44. border-bottom-color:#000;
  45. cursor:pointer!important;
  46. }
  47. a, a:hover,
  48. a img, a:hover img{
  49. transition-duration:.3s;
  50. -webkit-transition-duration:.3s;
  51. -moz-transition-duration:.3s;
  52. -ms-transition-duration:.3s;
  53. -o-transition-duration:.3s;
  54. }
  55. /*Text selection*/
  56. ::selection{
  57. background-color:#000;
  58. color:#fff;
  59. }
  60. ::-moz-selection{
  61. background-color:#000;
  62. color:#fff;
  63. }
  64. /*Custom scrollbar*/
  65. ::-webkit-scrollbar{
  66. width:11px;
  67. height:11px;
  68. background-color:#fff; /*Background colour*/
  69. }
  70. ::-webkit-scrollbar-track{
  71. border:5px solid #fff; /*Background colour*/
  72. background-color:#fff; /*Background colour*/
  73. }
  74. ::-webkit-scrollbar-thumb{
  75. border:5px solid #fff; /*Background colour*/
  76. background-color: #000; /*Scrollbar thumb colour*/
  77. }
  78. /*Tumblr controls*/
  79. .tmblr-iframe.iframe-controls--desktop{
  80. filter:invert(100%);
  81. -webkit-filter:invert(100%);
  82. -moz-filter:invert(100%);
  83. -ms-filter:invert(100%);
  84. -o-filter:invert(100%);
  85. transform:scale(.8, .8);
  86. -webkit-transform:scale(.8, .8);
  87. -moz-transform:scale(.8, .8);
  88. z-index:999999999999999999!important;
  89. }
  90. /*Tooltip (links hover title)*/
  91. #s-m-t-tooltip{
  92. line-height:100%;
  93. font-size:8px;
  94. text-transform:uppercase;
  95. text-align:center;
  96. letter-spacing:1px;
  97. max-width:100px;
  98. z-index:9999!important;
  99. padding:5px;
  100. margin:15px;
  101. background:rgba(0,0,0,.8); /*Background colour*/
  102. color:#eee; /*Text colour*/
  103. }
  104. /*content*/
  105. main{
  106. width:600px;
  107. background-color:#fff;
  108. padding:20px 40px;
  109. margin:100px auto;
  110. }
  111. /*Font options*/
  112. .p1-3, .p2-3:not(.head), #quote p, article{
  113. font:400 11px/170% 'Roboto', sans-serif; /*Change "Roboto" to the font of your choice and change "11px" to the font size of your choice*/
  114. }
  115.  
  116. header p:not(:last-child){
  117. margin-bottom:10px;
  118. }
  119.  
  120. header,
  121. section,
  122. .head,
  123. .images{
  124. font-size:0;
  125. }
  126. section,
  127. .links,
  128. article{
  129. overflow:hidden;
  130. }
  131. .p1-1{
  132. clear:both;
  133. }
  134. .p1-3,
  135. .p2-3{
  136. display:inline-block;
  137. vertical-align:top;
  138. }
  139. .p1-3{
  140. width:calc(33.3333% - 20px);
  141. }
  142. .p2-3{
  143. width:calc(66.66% - 10px);
  144. }
  145. .p1-3{
  146. margin-right:30px;
  147. }
  148. h1, .head img{
  149. display:inline-block;
  150. }
  151. h1{
  152. width:calc(100% - 90px);
  153. margin-right:30px;
  154. color:#000; /*Title colour*/
  155. }
  156. h1, h2, h3, article b{
  157. font:bold italic 18px/100% 'Arial', sans-serif; /*Titles font*/
  158. text-transform:uppercase;
  159. }
  160. .head img{
  161. width:60px;
  162. height:60px;
  163. border-radius:5px;
  164. }
  165.  
  166. section:not(:last-of-type),header,.head{
  167. padding-bottom:20px;
  168. margin-bottom:20px;
  169. border-bottom:1px solid #eee;/*Border colour*/
  170. }
  171. h2{
  172. display:block;
  173. background-color:#f6f6f6;/*Titles background*/
  174. border:1px solid #eee;/*Titles borders colour*/
  175. text-align:center;
  176. font-size:13px;
  177. line-height:24px;
  178. margin-bottom:15px;
  179. }
  180. li{
  181. list-style-type:none;
  182. }
  183. header ul{
  184. text-align:center;
  185. font-size:9px;
  186. }
  187. header li{
  188. display:inline-block;
  189. margin:2px 6px;
  190. }
  191. #links .p1-3:nth-child(3n+3),
  192. article:nth-child(3n+3){
  193. margin-right:0;
  194. }
  195. #links ul{
  196. margin-bottom:30px;
  197. }
  198. #links ul:nth-last-child(-n+3){
  199. margin-bottom:0;
  200. }
  201. /*tags:*/
  202. .tags li:before{
  203. content:"#";
  204. font-size:7px;
  205. display:inline-block;
  206. font-weight:bold;
  207. color:#000;
  208. vertical-align:middle;
  209. margin-right:10px;
  210. }
  211. /*Images:*/
  212. .images li{
  213. display:inline-block;
  214. width:calc(20% - 4px);
  215. margin-right:5px;
  216. margin-bottom:5px;
  217. }
  218. .images li:nth-child(5n+6){
  219. margin-right:0;
  220. }
  221. .images a{
  222. border-bottom:none!important;
  223. }
  224. .images a:hover img{
  225. opacity:.7;
  226. }
  227. .images img{
  228. display:block;
  229. width:100%;
  230. border-radius:10%;
  231. }
  232. /*links:*/
  233. .links{
  234. text-align:center;
  235. }
  236. .links li{
  237. width:50%;
  238. float:left;
  239. }
  240. .links a{
  241. display:block;
  242. padding:5px 10px;
  243. }
  244. .links a:hover{
  245. border-color:#aaa;
  246. font-style:italic;
  247. background-color:#f6f6f6;
  248. }
  249. /*Quote:*/
  250. h3{
  251. font-size:32px;
  252. color:#000;
  253. padding-top:20px;
  254. }
  255. h3:before{
  256. content:"“";
  257. font-size:54px;
  258. display:block;
  259. font-style:normal;
  260. opacity:.3;
  261. }
  262. #quote{
  263. text-align:center;
  264. }
  265. #quote p{
  266. margin:20px auto 0;
  267. position:relative;
  268. display:table;
  269. padding-left:25px;
  270. }
  271. #quote p:before{
  272. width:15px;
  273. left:0;
  274. top:0;
  275. bottom:0;
  276. margin:auto;
  277. content:"";
  278. height:1px;
  279. background:#000;
  280. position:absolute;
  281. }
  282. /*social widgets:*/
  283. #sns iframe{
  284. height:150px!important;
  285. overflow:hidden;
  286. }
  287.  
  288.  
  289. /*
  290. FOR THE BLOGROLL, TO HAVE A SCROLLBAR:
  291. (remove /° & °/ around the following css)
  292. */
  293.  
  294. /*
  295. #blogroll{
  296. max-height:300px;
  297. overflow-y:auto;
  298. }
  299. */
  300.  
  301.  
  302.  
  303. /*
  304. OR, ONLY DISPLAY A CERTAIN NUMBER OF BLOGS:
  305. n+X, where X is the amount of blog you want to display + 1
  306. X should be divisible by 3 (3, 6, 9, 12, 15...)
  307.  
  308. (remove the following 3 lines of code to display all blogs)
  309. */
  310. article:nth-child(n+13){ /* displays 12 first blogs, a.k.a four rows, and hides the rest */
  311. display:none;
  312. }
  313.  
  314.  
  315.  
  316. article{
  317. float:left;
  318. width:calc(33.3333% - 19px);
  319. padding:10px 5px;
  320. margin:10px 5px;
  321. text-align:left;
  322. border-bottom:1px solid #f6f6f6;
  323. max-height: 40px;
  324. }
  325.  
  326. article img,
  327. article p{
  328. display:block;
  329. float:left;
  330. }
  331.  
  332. article img{
  333. width:40px;
  334. border-radius:3px;
  335. }
  336.  
  337. article p{
  338. line-height:100%;
  339. margin-left:15px;
  340. width:calc(100% - 55px);
  341. white-space:normal;
  342. }
  343. article b{
  344. font-size:10px;
  345. margin-bottom:5px;
  346. display:block;
  347. }
  348. article i{
  349. display: block;
  350. max-height: 23px;
  351. overflow: hidden;
  352. }
  353. nav{
  354. padding-top:40px;
  355. }
  356. nav a{
  357. width:10px;
  358. display:inline-block;
  359. margin-right:15px;
  360. border:none;
  361. }
  362. nav a:hover img{
  363. filter:invert(100%);
  364. -webkit-filter:invert(100%);
  365. -moz-filter:invert(100%);
  366. -ms-filter:invert(100%);
  367. -o-filter:invert(100%);
  368. }
  369. nav img{
  370. display:block;
  371. width:100%;
  372. }
  373. </style>
  374. </head>
  375. <body id="noscroll">
  376. <main><!-- !BEGINS conteneur -->
  377. <header><!-- !BEGINS intro/header
  378. This is the only part you have to keep for the page to work correctly. All the rest can be deleted / moved. -->
  379. <div class="p1-1">
  380. <nav class="p1-3">
  381. <a href="/" title="go back"><img src="http://static.tumblr.com/wgg6svp/p47nzgez0/home.png"></a>
  382. <a href="/ask" title="{AskLabel}"><img src="http://static.tumblr.com/wgg6svp/iylnzgezg/msg.png"></a>
  383. <a href="http://tumblr.com/dashboard" title="dashboard"><img src="http://static.tumblr.com/wgg6svp/AiFnzgez6/menu.png"></a>
  384. </nav>
  385. <div class="head p2-3">
  386. <h1><!-- This is your title --></h1>
  387. <img src="http://YOUR-ICON-LINK.png">
  388. </div>
  389. </div>
  390. <ul class="p1-3">
  391. <h2>I am:</h2>
  392. <li><!-- Fact 1 --></li>
  393. <li><!-- Fact 2 --></li>
  394. <li><!-- Fact 3 --></li>
  395. <li><!-- Fact 4 --></li>
  396. <!-- To add more, add "<li> write something </li>" after the arrow -->
  397. </ul>
  398. <div class="p2-3">
  399. <!-- Write about yourself? -->
  400. </div>
  401. </header><!-- !ENDS intro/header -->
  402.  
  403. <section id="links"><!-- !BEGINS Links etc -->
  404. <!-- Typical tag section, links begins with #
  405. Contains a class "tag"
  406. -->
  407. <ul class="p1-3 tags">
  408. <h2><!--title--></h2>
  409. <li><a href="/tagged/">Tag #1</a></li>
  410. <li><a href="/tagged/">Tag #2</a></li>
  411. <li><a href="/tagged/">Tag #3</a></li>
  412. <!-- To add more, add "<li><a href="/tagged/your-tag/">your tag</a></li>" after the arrow -->
  413. </ul>
  414. <!-- Typical icons section, links are images
  415. Contains a class "images"
  416. -->
  417. <ul class="p1-3 images">
  418. <h2><!--title--></h2>
  419. <li><a href="/tagged/" title="your tag name 1">
  420. <img src="http://YOUR-ICON.png">
  421. </a></li>
  422. <li><a href="/tagged/" title="your tag name 2">
  423. <img src="http://YOUR-ICON2.png">
  424. </a></li>
  425. <!-- To add more, add "<li><a href="/tagged/your-tag/" title="your tag name"><img src="http://your-icon.png"></a></li>" after the arrow -->
  426. </ul>
  427. <!-- Typical links section, with regular links
  428. Contains a class "links"
  429. -->
  430. <ul class="p1-3 links">
  431. <h2><!--title--></h2>
  432. <li><a href="http://">Link 1</a></li>
  433. <li><a href="http://">Link 2</a></li>
  434. <li><a href="http://">Link 3</a></li>
  435. <!-- To add more, add "<li><a href="http://google.com">Link name</a></li>" after the arrow -->
  436. </ul>
  437.  
  438. <!--
  439. Select a category from "<ul..." to "</ul>", copy it and paste it anywhere before </section>
  440. Change its class depending on its type,
  441. but do not remove "p1-3"
  442. -->
  443. </section><!-- !ENDS Links etc -->
  444.  
  445. <section id="quote"><!-- !BEGINS quote -->
  446. <h3>
  447. <!-- your quote -->
  448. </h3>
  449. <p><!-- source of the quote (always appreciated) --></p>
  450. </section><!-- !ENDS quote -->
  451.  
  452. <section id="sns"><!-- !BEGINS widgets -->
  453. <div class="p1-3"><!-- !BEGINS twitter -->
  454. <h2>Latest tweet</h2>
  455. <!--
  456. 1) GO TO https://twitter.com/settings/widgets AND CLICK ON "Create
  457. New"
  458. 2) GIVE YOUR TWITTER USERNAME
  459. 3) CHANGE THE "HEIGHT" TO 250px
  460. 4) GET THE CODE UNDER THE TIMELINE AND PASTE IT BELOW, AFTER "—>" AND BEFORE </div>
  461.  
  462. IMPORTANT: ADD THIS
  463. data-chrome="nofooter noborders noheader noscrollbar transparent"
  464. TO THE TWITTER-TIMELINE LINK, RIHT AFTER "<a "
  465. -->
  466.  
  467.  
  468.  
  469.  
  470.  
  471. </div><!-- !ENDS twitter -->
  472.  
  473. <div class="p2-3"><!-- !BEGINS instagram -->
  474. <h2>Instagram</h2>
  475. <!--
  476. 1) GO TO http://snapwidget.com/ AND CLICK ON "Get Your Widget"
  477. 2) GIVE YOUR INSTAGRAM USERNAME
  478. 3) CHANGE THE "Thumbnail Size" TO A DIVIDIBLE NUMBER OF YOUR
  479. CONTENT (eg. if main's width is 600px, then .p2-3's width is
  480. 390px ((600*66.66/100)-10). 390/3(number of images showing) =
  481. 130, so my thumbnails will be 130px wide.)
  482. 4) CHANGE THE "Layout" TO THE CONFIG. OF YOUR IMAGES (eg. Here I
  483. divided my width by 3, so the layout will be 3x1 (one row))
  484. 5) CHANGE THE "Photo Padding" TO 0px
  485. 6) CLICK ON "Get Widget", COPY THE CODE FROM "<iframe..." TO
  486. "</iframe>". PASTE IT BELOW, AFTER "—>" AND BEFORE </div>.
  487. -->
  488.  
  489.  
  490.  
  491.  
  492.  
  493.  
  494. </div><!-- !ENDS instagram -->
  495. </section><!-- !ENDS widgets -->
  496.  
  497. {block:Following}<!-- !BEGINS blogroll
  498. Will only work if the page in on a primary blog!
  499. -->
  500. <section id="blogroll">
  501. {block:Followed}
  502. <article>
  503. <img src="{FollowedPortraitURL-48}">
  504. <p>
  505. <b><a href="{FollowedURL}">{FollowedName}</a></b>
  506. <i>{FollowedTitle}</i>
  507. </p>
  508. </article>
  509. {/block:Followed}
  510. </section>
  511. {/block:Following}<!-- !ENDS blogroll -->
  512.  
  513. <!-- TO CHANGE THE ORDER OF THE PARTS, SELECT THE CODE FROM "<section id="...">" TO ITS ENDING "</section>" AND MOVE IT ANYWHERE ELSE (after a "</section>" or before "<section id="...">", NOT in another <section>) -->
  514.  
  515. </main><!-- !ENDS conteneur -->
  516. <!-- You shouldn't touch this --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script><script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script><script src="http://static.tumblr.com/wgg6svp/bPknyzw4d/customize-twitter-1.1.min.js"></script><script>$(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:200,tip_fade_speed:500});$(window).load(function(){CustomizeTwitterWidget({"url": "http://static.tumblr.com/wgg6svp/sQ5nzgjny/twitterstyle.css"});});});</script>
  517. </body>
  518. </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!