API tools faq
paste
Advertisement
octomoosey

tempus fugit

octomoosey
Mar 20th, 2015 (edited)
2,623
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- octomoosey @ tumblr -->
  4.  
  5. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head><title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <style type="text/css">
  12.  
  13. ::-webkit-scrollbar {
  14. width: 5px; /** width of scrollbar **/
  15. background: transparent; /** background of scrollbar you might even want to make this transparent **/}
  16.  
  17. ::-webkit-scrollbar-thumb {
  18. background: #ccc; /** the part that moves**/}
  19.  
  20. .page .content-wrapper {
  21. position: absolute;
  22. width: 100%;
  23. height: 100%;
  24. top: 0;
  25. left: 0;}
  26.  
  27. .content-wrapper {
  28. overflow: visible !important;
  29. margin: 0 auto;}
  30.  
  31. .header {
  32. position: fixed;
  33. width: 100%;
  34. text-align: center;
  35. left: 0;
  36. font-size: 12px;
  37. line-height: 15px;
  38. height: 23px;
  39. background-color: #333; /** change header background color here **/
  40. z-index: 2;
  41. top: 20px;
  42. margin: 0 0 -250px 0;
  43. padding-top: 10px;
  44. text-transform: uppercase;
  45. letter-spacing: 4px;
  46. opacity:0.7;
  47. z-index:999;}
  48.  
  49. .header a {
  50. text-decoration:none;
  51. color:#fff; /** change main link color here **/
  52. -webkit-transition: all 0.7s ease;
  53. -moz-transition: all 0.7s ease;
  54. -o-transition: all 0.7s ease;}
  55.  
  56. .header a:hover {
  57. text-decoration:none;
  58. color:#da981d; /** change main link hover color here **/
  59. -webkit-transition: all 0.7s ease;
  60. -moz-transition: all 0.7s ease;
  61. -o-transition: all 0.7s ease;}
  62.  
  63. .content,
  64. .pg,
  65. .pgs-wrapper,
  66. .pg-inner {
  67. position: relative;
  68. width: 100%;
  69. height: 100%;}
  70.  
  71. .page .pg blockquote {
  72. width: 50%;
  73. left: 25%;}
  74.  
  75. .page .deco {
  76. width: 260px;
  77. height: 260px;
  78. border: 2px dashed #333; /** change dashed image border color here **/
  79. border-radius: 50%;
  80. position: absolute;
  81. bottom: 50%;
  82. left: 50%;
  83. margin: 0 0 0 -130px;}
  84.  
  85. .icon img {
  86. position: absolute;
  87. width: 200px;
  88. height: 200px;
  89. text-align: center;
  90. font-size: 100px;
  91. top: 50%;
  92. left: 50%;
  93. margin: -100px 0 0 -100px;
  94. box-shadow: 0 0 0 10px #a1a1a1; /** change image border color here **/
  95. border-radius: 50%;}
  96.  
  97. .page .pg h2 {
  98. color: #333; /** change large title color here **/
  99. padding: 20px;
  100. position: absolute;
  101. font-size: 34px;
  102. font-weight: 700;
  103. letter-spacing: 10px;
  104. text-transform: uppercase;
  105. width: 80%;
  106. left: 10%;
  107. text-align: center;
  108. bottom: 50%;
  109. margin: 0 0 -120px 0;}
  110.  
  111. .page .pg blockquote {
  112. position: absolute;
  113. width: 100%;
  114. text-align: center;
  115. left: 0;
  116. font-size: 12px;
  117. line-height: 15px;
  118. height: 100px;
  119. z-index: 2;
  120. bottom: 50%;
  121. margin: 0 0 -250px 0;
  122. padding-top: 10px;}
  123.  
  124. .page .pg blockquote p {
  125. margin: 0 auto;
  126. width: 60%;
  127. max-width: 400px;
  128. position: relative;}
  129.  
  130. .page .pg blockquote p:before {
  131. color: #333; /** change left quotation color here **/
  132. font-family: "Bookman Old Style", Bookman, Garamond, serif;
  133. position: absolute;
  134. line-height: 60px;
  135. width: 75px;
  136. height: 75px;
  137. font-size: 200px;
  138. z-index: -1;
  139. left: -80px;
  140. top: 35px;
  141. content: '\201C';}
  142.  
  143. .page .pg blockquote p:after {
  144. color: #333; /** change right quotation color here **/
  145. font-family: "Bookman Old Style", Bookman, Garamond, serif;
  146. position: absolute;
  147. line-height: 60px;
  148. width: 75px;
  149. height: 75px;
  150. font-size: 200px;
  151. z-index: -1;
  152. right: -80px;
  153. top: 35px;
  154. content: '\201D';}
  155.  
  156. .page .pg blockquote char {
  157. font-size: 10px;
  158. padding-top: 10px;
  159. font-style: normal;
  160. text-transform: uppercase;
  161. letter-spacing: 4px;}
  162.  
  163. .page .pg blockquote char a {
  164. text-decoration:none;
  165. color:#da981d; /** change character name link color here **/
  166. -webkit-transition: all 0.7s ease;
  167. -moz-transition: all 0.7s ease;
  168. -o-transition: all 0.7s ease;}
  169.  
  170. .page .pg blockquote char a:hover {
  171. text-decoration:none;
  172. color:#333; /** change character name link hover color here **/
  173. -webkit-transition: all 0.7s ease;
  174. -moz-transition: all 0.7s ease;
  175. -o-transition: all 0.7s ease;}
  176.  
  177. .page .bg-1 .pg-inner,
  178. .page .bg-1 {
  179. background: #000; /** change first section background color here **/
  180. color:#fff;}
  181.  
  182. .page .bg-1 blockquote{
  183. background:#fff; /** change first section text background color here **/
  184. color: #000; /** change first section text color here **/
  185. text-shadow: 0px 1px 1px rgba(128,128,128,0.4);}
  186.  
  187. .page .bg-2 .pg-inner,
  188. .page .bg-2 {
  189. background: #fff; /** change second section background color here **/
  190. color:#000;}
  191.  
  192. .page .bg-2 blockquote{
  193. background:#000; /** change second section text background color here **/
  194. color: #fff; /** change second section text color here **/
  195. text-shadow: 0px 1px 1px rgba(128,128,128,0.4);}
  196.  
  197. </style></head><body>
  198.  
  199. <div class="container page">
  200. <div class="content-wrapper">
  201.  
  202. <div class="content">
  203. <div class="header">
  204. <a href="/">home</a>
  205. <a href="/ask">ask</a>
  206. <a href="/submit">submit</a>
  207. <a href="//www.tumblr.com/dashboard">dash</a>
  208. <a href="//octomoosey.tumblr.com">©</a><!-- DO NOT REMOVE CREDIT -->
  209. </div>
  210.  
  211. <!-- section 1 begins here -->
  212.  
  213. <div class="pg bg-1"><div class="pg-inner"><div class="deco"><div class="icon">
  214.  
  215. <img src="//41.media.tumblr.com/ddde42529707cab2b5c1d3c13847c5df/tumblr_inline_nlij4en7S41ro20i7_500.jpg"></div></div> <!-- change icon url here -->
  216.  
  217. <h2>vincit qui se vincit</h2> <!-- change the main title here -->
  218.  
  219. <!-- add your description between the blockquote and 'p' tags -->
  220. <blockquote><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.</p>
  221.  
  222. <!-- add a link and the character name here -->
  223. <char><a href="/">character name</a></char></blockquote>
  224. </div>
  225. </div>
  226.  
  227. <!-- section 1 ends here -->
  228.  
  229. <!-- section 2 begins here -->
  230.  
  231. <div class="pg bg-2"><div class="pg-inner"><div class="deco"><div class="icon"><img src="//40.media.tumblr.com/6dbab18ccff1be6e2fc555d34690e0d5/tumblr_inline_nlij1htFI81ro20i7_500.jpg"></div></div>
  232.  
  233. <h2>veritas vos liberabit </h2>
  234. <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  235. <char><a href="/">character name</a></char></blockquote>
  236. </div>
  237. </div>
  238.  
  239. <!-- section 2 ends here -->
  240.  
  241. <div class="pg bg-1"><div class="pg-inner"><div class="deco"><div class="icon"><img src="//41.media.tumblr.com/4dc799f958041904ef9c8222538aaed8/tumblr_inline_nlij7jAL3l1ro20i7_500.jpg"></div></div>
  242.  
  243. <h2>tempus fugit</h2>
  244. <blockquote><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.</p>
  245. <char><a href="/">character name</a></char></blockquote>
  246. </div>
  247. </div>
  248.  
  249. <div class="pg bg-2"><div class="pg-inner"><div class="deco"><div class="icon"><img src="//41.media.tumblr.com/f95ceded45c3a8523bd6caca776f743c/tumblr_inline_nlij41BVjv1ro20i7_500.jpg"></div></div>
  250.  
  251. <h2>multum in parvo</h2>
  252. <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  253. <char><a href="/">character name</a></char></blockquote>
  254. </div>
  255. </div>
  256.  
  257. <div class="pg bg-1">
  258. <div class="pg-inner">
  259. <div class="deco"><div class="icon"><img src="//41.media.tumblr.com/4219646435ca5fb6c86a0c0bf4d6cd40/tumblr_inline_nlijbzoyH61ro20i7_500.jpg"></div></div>
  260.  
  261. <h2>nosce te ipsum </h2>
  262. <blockquote><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.</p>
  263. <char><a href="/">character name</a></char></blockquote>
  264. </div>
  265. </div>
  266.  
  267. <!-- to add more sections copy either the section 1 or section 2 html from 'starts here' to 'ends here' and paste, remember to alternate between section 1 and section 2 to get the different color effect -->
  268.  
  269. </div>
  270.  
  271. </body>
  272. </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!