API tools faq
paste
Advertisement
octomoosey

fugly

octomoosey
Nov 7th, 2014 (edited)
4,415
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.03 KB | None | 0 0
raw download clone embed print report
  1. <!-- octomoosey @ tumblr -->
  2.  
  3. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head><title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  8.  
  9. <script src="//static.tumblr.com/86jccts/R83nczgdd/modernizr.js"></script>
  10.  
  11. <style type="text/css">
  12.  
  13. body {
  14. background-color: #ffffff; /* background color */
  15. font-family: calibri;
  16. font-size: 11px;
  17. letter-spacing: 1px;
  18.  
  19. /* background image url */
  20. background-image: url('//static.tumblr.com/085a1db03148fd31b43d9108a87bc5ef/86jccts/cWCnehncb/tumblr_static_7jqi16p30u4g840wcksokgk44.gif');
  21. background-position: bottom right;
  22. background-repeat: no-repeat;
  23. background-attachment: fixed;}
  24.  
  25. a {
  26. color:#d77109; /* links color */
  27. text-decoration:none;
  28. -webkit-transition-duration:.6s;
  29. -moz-transition-duration:.6s;
  30. -o-transition-duration:.6s;
  31. -ms-transition-duration:.6s;}
  32.  
  33. a:hover {
  34. color:#aaaaaa; /* links hover color */
  35. -webkit-transition-duration:.6s;
  36. -moz-transition-duration:.6s;
  37. -o-transition-duration:.6s;
  38. -ms-transition-duration:.6s;}
  39.  
  40. .container{
  41. margin-top:20px;
  42. margin-left:50px;}
  43.  
  44. .col {
  45. float: left;}
  46.  
  47. .col-row {
  48. margin-bottom: 20px;}
  49.  
  50. figure {
  51. margin:0;
  52. position: relative;}
  53.  
  54. figure img {
  55. display: block;
  56. position: relative;
  57. z-index: 10;
  58. max-width: 500px;
  59. height: auto;}
  60.  
  61. figure figcaption {
  62. display: block;
  63. position: absolute;
  64. z-index: 5;
  65. overflow-y:auto;}
  66.  
  67. figure h2 {
  68. font-size: 14px;
  69. margin-bottom: 10px;}
  70.  
  71. figure h3 {
  72. color: #fff;
  73. font-size: 22px;
  74. margin-bottom: 10px;}
  75.  
  76. figure span {
  77. color: #fff;
  78. display: block;
  79. width:210px;
  80. padding-bottom:30px;}
  81.  
  82. #effect figure {
  83. overflow: hidden;}
  84.  
  85. #effect figure figcaption {
  86. background-color: #000;
  87. top: -20px;
  88. left: 0;
  89. width: 50%;
  90. height: 100%;
  91. padding: 20px;
  92. -webkit-transform: translateX(-100%);
  93. -moz-transform: translateX(-100%);
  94. -ms-transform: translateX(-100%);
  95. -o-transform: translateX(-100%);
  96. transform: translateX(-100%);
  97. -webkit-transition: all 0.7s;
  98. -moz-transition: all 0.7s;
  99. -ms-transition: all 0.7s;
  100. -o-transition: all 0.7s;
  101. transition: all 0.7s;}
  102.  
  103. #effect figure img {
  104. -webkit-transition: all 0.5s;
  105. -moz-transition: all 0.5s;
  106. -ms-transition: all 0.5s;
  107. -o-transition: all 0.5s;
  108. transition: all 0.5s;}
  109.  
  110. .no-touch #effect figure:hover img,
  111. #effect figure.hover img {
  112. -webkit-transform: translateX(50%);
  113. -moz-transform: translateX(50%);
  114. -ms-transform: translateX(50%);
  115. -o-transform: translateX(50%);
  116. transform: translateX(50%);}
  117.  
  118. .no-touch #effect figure:hover figcaption,
  119. #effect figure.hover figcaption {
  120. -webkit-transform: translateX(0);
  121. -moz-transform: translateX(0);
  122. -ms-transform: translateX(0);
  123. -o-transform: translateX(0);
  124. transform: translateX(0);}
  125.  
  126. #side {
  127. margin-left:600px;
  128. position:fixed;
  129. width:300px;
  130. background:transparent;
  131. color:#000; /* sidebar text color */}
  132.  
  133. #description {
  134. margin-left:10px;
  135. top:50%;
  136. margin-top: -50px;
  137. position:fixed;
  138. width:280px;
  139. font-family:times;
  140. font-size: 11px;}
  141.  
  142. .title {
  143. font-size:25px;
  144. text-align:left;
  145. font-style:italic;
  146. font-family:times;
  147. padding-bottom:5px;}
  148.  
  149. </style>
  150. <body>
  151. <div id="side"><div id="description">
  152. <div class="title">Dude, you fugly...</div> <!-- change the title here -->
  153.  
  154. <a href="/">home</a> &nbsp
  155. <a href="/ask">ask</a> &nbsp
  156. <a href="/submit">submit</a> &nbsp
  157. <a href="/archive">archive</a> &nbsp
  158. <a href="//www.tumblr.com/dashboard">dash</a> &nbsp
  159. <a href="//octomoosey.tumblr.com/">©</a><br><br>
  160.  
  161. <!-- change the description here -->
  162. "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  163. </div>
  164. </div></div>
  165.  
  166.  
  167. </div>
  168.  
  169. <div class="container">
  170.  
  171. <div id="effect">
  172. <div class="col">
  173.  
  174. <!-- CHARACTER BLOCK STARTS HERE -->
  175.  
  176. <!-- CHARACTER ONE STARTS HERE -->
  177.  
  178. <div class="col-row">
  179. <figure>
  180. <img src="//31.media.tumblr.com/a934af659ae90b48c73a6be29789043b/tumblr_inline_nehikibipA1rp2lgk.gif" alt="">
  181. <figcaption>
  182. <h3>Dean Winchester</h3>
  183. <h2><a href="/">link goes here</a></h2>
  184. <span>
  185.  
  186. "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  187.  
  188. </span>
  189. </figcaption>
  190. </figure>
  191. </div>
  192.  
  193. <!-- CHARACTER ONE ENDS HERE -->
  194.  
  195. <!-- CHARACTER BLOCK ENDS HERE -->
  196.  
  197. <!-- CHARACTER TWO STARTS HERE -->
  198.  
  199. <div class="col-row">
  200. <figure>
  201. <img src="//31.media.tumblr.com/0be8536a6399e52a24229ddb87db30eb/tumblr_inline_nehil0OKHp1rp2lgk.gif" alt="">
  202. <figcaption>
  203. <h3>Sam Winchester</h3>
  204. <h2><a href="/">link goes here</a></h2>
  205. <span>
  206.  
  207. "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  208.  
  209. </span>
  210. </figcaption>
  211. </figure>
  212. </div>
  213.  
  214. <!-- CHARACTER TWO ENDS HERE -->
  215.  
  216. <!-- CHARACTER THREE STARTS HERE -->
  217.  
  218. <div class="col-row">
  219. <figure>
  220. <img src="//31.media.tumblr.com/ea12638efaf1c4337de8c6029536f830/tumblr_inline_nehkt6Xhoy1rp2lgk.gif" alt="">
  221. <figcaption>
  222. <h3>John Winchester</h3>
  223. <h2><a href="/">link goes here</a></h2>
  224. <span>
  225.  
  226. "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  227.  
  228. </span>
  229. </figcaption>
  230. </figure>
  231. </div>
  232.  
  233. <!-- CHARACTER THREE ENDS HERE -->
  234.  
  235. <!-- CHARACTER FOUR STARTS HERE -->
  236.  
  237. <div class="col-row">
  238. <figure>
  239. <img src="//31.media.tumblr.com/89eedafabdc63c0f3a32042eedbd2164/tumblr_inline_nehilrbKnr1rp2lgk.gif" alt="">
  240. <figcaption>
  241. <h3>Meg Masters</h3>
  242. <h2><a href="/">link goes here</a></h2>
  243. <span>
  244.  
  245. "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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  246.  
  247. </span>
  248. </figcaption>
  249. </figure>
  250. </div>
  251.  
  252. <!-- CHARACTER FOUR ENDS HERE -->
  253.  
  254. <!-- TO ADD MORE, COPY AND PASTE MORE CHARACTER BLOCKS HERE (FROM 'CHARACTER BLOCK STARTS HERE' TO 'CHARACTER BLOCK ENDS HERE') -->
  255.  
  256.  
  257. </div>
  258. </div>
  259. </div>
  260.  
  261. </body>
  262. </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!