API tools faq
paste
Advertisement
elshel

1D ABOUT PAGE - 3 IMAGE VERSION

elshel
Jul 27th, 2014
65
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--------1D ABOUT PAGE - 3 IMAGE---------
  3. MADE BY irrelevantdivision.tumblr.com
  4. --------------------------------
  5. last update (m/d/y): 07/08/15
  6.  
  7. rules of usage:
  8. -DO NOT REMOVE CREDIT
  9. -DO NOT USE AS A BASE, THEN CLAIM AS YOUR OWN
  10. -DO NOT REDISTRIBUTE
  11.  
  12. JUST DON'T BECAUSE I WILL FIND YOU BUT THE COPS WON'T FIND YOUR BODY
  13. THANKS
  14.  
  15.  
  16. ------------------------------->
  17. <html>
  18. <head>
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  22. <meta name="description" content="" />
  23. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  24.  
  25.  
  26. <!--------------
  27. SCRIPTS
  28. --------------->
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  30. <script>
  31. $(function()
  32. {
  33. $("a#click1").click(function()
  34. {
  35. $("#info1").slideToggle();
  36. return false;
  37. });
  38. });
  39. </script>
  40. <script>
  41. $(function()
  42. {
  43. $("a#click2").click(function()
  44. {
  45. $("#info2").slideToggle();
  46. return false;
  47. });
  48. });
  49. </script>
  50. <script>
  51. $(function()
  52. {
  53. $("a#click3").click(function()
  54. {
  55. $("#info3").slideToggle();
  56. return false;
  57. });
  58. });
  59. </script>
  60.  
  61.  
  62. </head>
  63.  
  64. <style type="text/css">
  65.  
  66. body {
  67. font-family: calibri;
  68. font-size: 11px;
  69. }
  70. blockquote {
  71. border-left: 2px solid #000;
  72. padding-left: 5px;
  73. }
  74. a {
  75. color: #e5b330;
  76. text-decoration: none;
  77. transition-duration: 0.6s;
  78. -moz-transition-duration: 0.6s;
  79. -webkit-transition-duration: 0.6s;
  80. -o-transition-duration: 0.6s;
  81. }
  82. a:hover {
  83. color: #000;
  84. transition-duration: 0.6s;
  85. -moz-transition-duration: 0.6s;
  86. -webkit-transition-duration: 0.6s;
  87. -o-transition-duration: 0.6s;
  88. }
  89.  
  90. .subtitle {
  91. text-transform: uppercase;
  92. letter-spacing: +1px;
  93. text-decoration: underline;
  94. text-align: center;
  95. margin-bottom: 5px;
  96. }
  97. .header {
  98. width: 756px; /*TOTAL WIDTH HERE*/
  99. padding: 1px 0;
  100. color: #fff;
  101. background-color: #000;
  102. text-align: center;
  103. margin: 15px auto;
  104. font-size: 14px;
  105. text-transform: uppercase;
  106. letter-spacing: +1px;
  107. }
  108.  
  109. .images {
  110. width: 800px;
  111. margin: 10px auto 10px auto;
  112. text-align: center;
  113. transition-duration: 0.6s;
  114. -moz-transition-duration: 0.6s;
  115. -webkit-transition-duration: 0.6s;
  116. -o-transition-duration: 0.6s;
  117. }
  118. .images img {
  119. opacity: 0.7;
  120. display: inline-block;
  121. transition-duration: 0.6s;
  122. -moz-transition-duration: 0.6s;
  123. -webkit-transition-duration: 0.6s;
  124. -o-transition-duration: 0.6s;
  125. }
  126. .images img:hover, image:hover {
  127. opacity: 1;
  128. transition-duration: 0.6s;
  129. -moz-transition-duration: 0.6s;
  130. -webkit-transition-duration: 0.6s;
  131. -o-transition-duration: 0.6s;
  132. }
  133.  
  134. .img1 {
  135. display: inline-block;
  136. position: relative;
  137. top: 0;
  138. }
  139. .img2 {
  140. display: inline-block;
  141. position: relative;
  142. top:0;
  143. }
  144. .img3 {
  145. display: inline-block;
  146. position: relative;
  147. top:0;
  148. }
  149.  
  150. .text {
  151. width: 800px;
  152. margin: 0 auto;
  153. }
  154.  
  155. .down1, .down2, .down3 {
  156. background-color: #000;
  157. text-align: center;
  158. color: #fff;
  159. width: 756px; /*TOTAL WIDTH ALSO HERE*/
  160. margin: 0 auto;
  161. display: block;
  162. }
  163. #info1, #info2, #info3 {
  164. display: none;
  165. text-align: justify;
  166. padding: 8px 4px;
  167. height: auto;
  168. width: 746px; /*TOTAL WIDTH MINUS 10 HERE*/
  169. margin: 0 auto;
  170. }
  171.  
  172. .links {
  173. width: 800px;
  174. margin: 45px auto;
  175. text-transform: uppercase;
  176. text-align: center;
  177. }
  178. .links a {
  179. color: #000;
  180. transition-duration: 0.6s;
  181. -moz-transition-duration: 0.6s;
  182. -webkit-transition-duration: 0.6s;
  183. -o-transition-duration: 0.6s;
  184. }
  185. .links a:hover {
  186. color: #e5b330;
  187. transition-duration: 0.6s;
  188. -moz-transition-duration: 0.6s;
  189. -webkit-transition-duration: 0.6s;
  190. -o-transition-duration: 0.6s;
  191. }
  192. #credit {
  193. padding: 0px 5px 0px 6px;
  194. border: 1px solid #000;
  195. color: #fff;
  196. background-color: #000;
  197. transition-duration: 0.8s;
  198. -moz-transition-duration: 0.8s;
  199. -webkit-transition-duration: 0.8s;
  200. -o-transition-duration: 0.8s;
  201. }
  202. #credit:hover {
  203. color: #e5b330;
  204. border: 1px solid #e5b330;
  205. background-color: #fff;
  206. transition-duration: 0.6s;
  207. -moz-transition-duration: 0.6s;
  208. -webkit-transition-duration: 0.6s;
  209. -o-transition-duration: 0.6s;
  210. }
  211.  
  212. </style>
  213.  
  214.  
  215. <body>
  216. <div class="con">
  217. <div class="header">an about page (ft. harry styles)</div>
  218.  
  219.  
  220.  
  221. <div class="images"><!--CUSTOM IMAGES IN HERE-->
  222.  
  223. <div class="img1"><a href="#" id="click1"><img src="http://40.media.tumblr.com/d17d06d39ecb1b4b01ec12fcfa56959f/tumblr_nfn0newwx51rvp1uvo1_250.png"></a></div>
  224.  
  225. <div class="img2"><a href="3" id="click2"><img src="http://41.media.tumblr.com/d6e0e10ff7cdd9ff449ea4da35bb4b05/tumblr_nfn0newwx51rvp1uvo2_250.png"></a></div>
  226.  
  227. <div class="img3"><a href="#" id="click3"><img src="https://36.media.tumblr.com/41580b8f5e31db315fa486095798858a/tumblr_nr5rnvxcY01rm1fjeo1_250.png"></a></div>
  228.  
  229. </div>
  230.  
  231.  
  232.  
  233.  
  234. <div class="text">
  235. <div id="info1">
  236. <div class="subtitle">
  237. <!--CUSTOM SECTION TITLE-->(optional section title - you can delete or replace this text)
  238. </div>
  239.  
  240. <!--1ST SECTION TEXT BEGINS HERE-->
  241. Lorem ipsum dolor sit amet, ignota mentitum te nam, viris tation ad sea. Ea per habeo audiam dignissim, dicant graece accommodare id mel.
  242. <a href="/">Links!</a> <em>Italics!</em> <strong>Bold font!</strong>
  243. <!--1ST SECTION TEXT END-->
  244.  
  245. </div>
  246. <div class="down1">&#x25BC;</div>
  247.  
  248.  
  249.  
  250.  
  251.  
  252. <div id="info2">
  253. <div class="subtitle">
  254. <!--CUSTOM SECTION TITLE-->
  255. (optional section title - you can delete or replace this text)
  256. </div>
  257.  
  258. <!--2ND SECTION TEXT BEGINS HERE-->
  259. Important things:<br />
  260. <ul>
  261. <li>max-width: 800px</li>
  262. <li>number of images corresponds to the number of sections</li>
  263. <li>this version works best with three images unless you want to do some extra editing. <a href="/odap2">Here's the 2 image version :)</a></li><br/><br/>
  264. </ul>
  265.  
  266. <em>If you are changing the pics - <strong>replace the urls, then follow these steps:</strong></em>
  267. <ul>
  268. <li>some of the css depends on your image width, so you'll need to do some (really easy) math. <em>Note: TALL and THIN images fit best.</em>
  269. <ul>
  270. <li>images of the same width and height look best!</li>
  271. <li>multiply the width of a single image by 3, then add 6 to that. This gives you the total width. <em>(ex: for harry, that would be (250 x 3) + 6= 756px)</em></li>
  272. <li>put that number in the <strong>width</strong> property under the classes <strong>".down1"</strong> and <strong>".header"</strong>.</li>
  273. <li>subtract 10 from the number, put your new number in the <strong>width</strong> property under <strong>"#info1"</strong>.</li>
  274. </ul>
  275. </li>
  276.  
  277. <br/><li>Don't hesitate to message me if you have questions!</li>
  278. </ul>
  279. <!--2ND SECTION TEXT END-->
  280.  
  281. </div>
  282. <div class="down2">&#x25BC;</div>
  283.  
  284.  
  285.  
  286.  
  287.  
  288. <div id="info3">
  289. <div class="subtitle">
  290. <!--CUSTOM SECTION TITLE-->
  291. (optional section title - you can delete or replace this text)
  292. </div>
  293.  
  294. <!--3RD SECTION TEXT BEGINS HERE-->
  295. images from: <a href="http://sinkhol.tumblr.com/post/103624972263/harry-styles-at-the-28th-annual-aria-awards">sinkhol</a><br />
  296. java from: <a href="http://stackoverflow.com/questions/8101284/how-to-create-sliding-div-on-click">tim cooper</a> on stackoverflow <br />
  297. how to do <a href="http://irrelevantdivision.tumblr.com/themebe">basic edits</a><br />
  298. <a href="http://irrelevantdivision.tumblr.com/ask">send me an ask here</a>
  299. <!--3RD SECTION TEXT END-->
  300.  
  301. </div>
  302.  
  303. <div class="down3">&#x25BC;</div>
  304. </div>
  305.  
  306. <div class="links"><a href="/">back to blog</a>
  307. <br /><br />
  308. <a href="http://irrelevantdivision.tumblr.com/tagged/theme-theme" id="credit">IDTHEMES</a></div>
  309.  
  310. </div>
  311. </body>
  312.  
  313.  
  314. </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!