API tools faq
paste
Advertisement
elshel

1D ABOUT PAGE - 2 IMAGE VERSION

elshel
Jul 30th, 2014
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--------1D ABOUT PAGE - 2 IMAGE VERSION (ZAYN)---------
  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. <script>
  61. $(function()
  62. {
  63. $("a#click4").click(function()
  64. {
  65. $("#info4").slideToggle();
  66. return false;
  67. });
  68. });
  69. </script>
  70.  
  71.  
  72.  
  73.  
  74.  
  75. </head>
  76.  
  77. <style type="text/css">
  78.  
  79. body {
  80. font-family: calibri;
  81. font-size: 11px;
  82. background-color: #fafafa;
  83. }
  84. a {
  85. color: #d20d29;
  86. text-decoration: none;
  87. transition-duration: 0.6s;
  88. -moz-transition-duration: 0.6s;
  89. -webkit-transition-duration: 0.6s;
  90. -o-transition-duration: 0.6s;
  91. }
  92. a:hover {
  93. color: #000;
  94. transition-duration: 0.6s;
  95. -moz-transition-duration: 0.6s;
  96. -webkit-transition-duration: 0.6s;
  97. -o-transition-duration: 0.6s;
  98. }
  99.  
  100. .subtitle {
  101. text-transform: uppercase;
  102. letter-spacing: +1px;
  103. text-decoration: underline;
  104. text-align: center;
  105. margin-bottom: 5px;
  106. }
  107. .header {
  108. width: 504px; /*TOTAL WIDTH HERE*/
  109. padding: 1px 0;
  110. color: #fff;
  111. background-color: #000;
  112. text-align: center;
  113. margin: 15px auto;
  114. font-size: 14px;
  115. text-transform: uppercase;
  116. letter-spacing: +1px;
  117. }
  118.  
  119. .images {
  120. width: 800px;
  121. margin: 10px auto 10px auto;
  122. text-align: center;
  123. transition-duration: 0.6s;
  124. -moz-transition-duration: 0.6s;
  125. -webkit-transition-duration: 0.6s;
  126. -o-transition-duration: 0.6s;
  127. }
  128. .images img {
  129. opacity: 0.8;
  130. display: inline-block;
  131. transition-duration: 0.6s;
  132. -moz-transition-duration: 0.6s;
  133. -webkit-transition-duration: 0.6s;
  134. -o-transition-duration: 0.6s;
  135. }
  136. .images img:hover, image:hover {
  137. opacity: 1;
  138. transition-duration: 0.6s;
  139. -moz-transition-duration: 0.6s;
  140. -webkit-transition-duration: 0.6s;
  141. -o-transition-duration: 0.6s;
  142. }
  143.  
  144. .img1 {
  145. display: inline-block;
  146. position: relative;
  147. top: 0;
  148. }
  149. .img2 {
  150. display: inline-block;
  151. position: relative;
  152. top:0;
  153. }
  154. .img3 {
  155. display: inline-block;
  156. position: relative;
  157. top:0;
  158. }
  159.  
  160. .text {
  161. width: 800px;
  162. margin: 0 auto;
  163. }
  164.  
  165. .down1, .down2, .down3 {
  166. background-color: #000;
  167. text-align: center;
  168. color: #fff;
  169. width: 504px; /*TOTAL WIDTH ALSO HERE*/
  170. margin: 0 auto;
  171. display: block;
  172. }
  173. #info1, #info2, #info3 {
  174. display: none;
  175. text-align: justify;
  176. padding: 8px 4px;
  177. height: auto;
  178. width: 494px; /*TOTAL WIDTH MINUS 10*/
  179. margin: 0 auto;
  180. }
  181.  
  182. .links {
  183. width: 80px;
  184. margin: 45px auto;
  185. text-transform: uppercase;
  186. text-align: center;
  187. }
  188. .links a {
  189. color: #000;
  190. transition-duration: 0.6s;
  191. -moz-transition-duration: 0.6s;
  192. -webkit-transition-duration: 0.6s;
  193. -o-transition-duration: 0.6s;
  194. }
  195. .links a:hover {
  196. color: #d20d29;
  197. transition-duration: 0.6s;
  198. -moz-transition-duration: 0.6s;
  199. -webkit-transition-duration: 0.6s;
  200. -o-transition-duration: 0.6s;
  201. }
  202. #credit {
  203. padding: 0px 5px 0px 6px;
  204. border: 1px solid #000;
  205. color: #fff;
  206. background-color: #000;
  207. transition-duration: 0.8s;
  208. -moz-transition-duration: 0.8s;
  209. -webkit-transition-duration: 0.8s;
  210. -o-transition-duration: 0.8s;
  211. }
  212. #credit:hover {
  213. color: #d20d29;
  214. border: 1px solid #d20d29;
  215. background-color: #fff;
  216. transition-duration: 0.6s;
  217. -moz-transition-duration: 0.6s;
  218. -webkit-transition-duration: 0.6s;
  219. -o-transition-duration: 0.6s;
  220. }
  221.  
  222. </style>
  223.  
  224.  
  225. <body>
  226. <div class="con">
  227. <div class="header"><!--YOUR TITLE-->an about page (ft. Zayn Malik)</div>
  228. <div class="images"><!--CUSTOM IMAGES IN HERE-->
  229.  
  230. <div class="img1"><a href="#" id="click1"><img src="http://40.media.tumblr.com/a5ec2af542a60568d68bf1868ab1225e/tumblr_nkjqyb3WSY1rhqshho1_250.png"></a></div>
  231.  
  232. <div class="img2"><a href="3" id="click2"><img src="http://41.media.tumblr.com/472a6f1b407b3de81bc7c383156c6d7f/tumblr_nkjqyb3WSY1rhqshho2_250.png"></a></div>
  233.  
  234. </div>
  235.  
  236.  
  237.  
  238. <div class="text">
  239. <div id="info1">
  240. <div class="subtitle">
  241. <!--CUSTOM SECTION TITLE-->
  242. (optional section title - you can delete or replace this text)
  243. </div>
  244.  
  245. <!--1ST SECTION TEXT BEGINS HERE-->
  246. Lorem ipsum dolor sit amet, ignota mentitum te nam, viris tation ad sea. Ea per habeo audiam dignissim, dicant graece accommodare id mel. Lorem ipsum dolor sit amet, ignota mentitum te nam, viris tation ad sea.
  247. <a href="/">Links!</a> <em>Italics!</em> <strong>Bold font!</strong>
  248. <br /><br />
  249. images found <a href="https://withphoto.jp/album/kilakilauran/247962">here</a><br />
  250. java from: <a href="http://stackoverflow.com/questions/8101284/how-to-create-sliding-div-on-click">tim cooper</a> on stackoverflow <br />
  251. how to do <a href="http://irrelevantdivision.tumblr.com/themebe">basic edits</a><br />
  252. <a href="http://irrelevantdivision.tumblr.com/ask">send me an ask here</a>
  253. <!--1ST SECTION TEXT END-->
  254.  
  255. </div>
  256. <div class="down1">&#x25BC;</div>
  257.  
  258.  
  259.  
  260.  
  261.  
  262. <div id="info2">
  263. <div class="subtitle">
  264. <!--CUSTOM SECTION TITLE-->
  265. (optional section title)
  266. </div>
  267.  
  268. <!--2ND SECTION TEXT BEGINS HERE-->
  269. Important things:<br />
  270. <ul>
  271. <li>max-width: 800px</li>
  272. <li>number of images corresponds to the number of sections</li>
  273. <li>this version works best with two images, unless you want to do some extra editing. <a href="/odap3">Here's the 3 image version.</a></li></ul><br/><br/>
  274.  
  275. <em>If you change the pics - <strong>replace the urls, then follow these steps:</strong></em>
  276. <ul>
  277. <li>some of the css depends on your image width, so you'll have to do some math. Hopefully this isn't confusing!
  278. <ul>
  279. <li>images of the same width are best!</li>
  280. <li>multiply the width of a single image by 2, then add 4 to that. This gives you the total width. <em>(ex: for zayn, that would be (250 x 2) + 4= 504)</em></li>
  281. <li>put that number in the <strong>width</strong> property under the classes <strong>".down1"</strong> and <strong>".header"</strong>.</li>
  282. <li>subtract 10 from that number <em>(ex: 504 - 10 = 494)</em>, put the new number in the <strong>width</strong> property under <strong>"#info1"</strong>.</li>
  283. </ul>
  284. </li>
  285. <br/><li>Don't hesitate to send an ask!</li>
  286. </ul>
  287. <!--2ND SECTION TEXT END-->
  288.  
  289. </div>
  290. <div class="down2">&#x25BC;</div>
  291.  
  292.  
  293. </div>
  294.  
  295. <div class="links"><a href="/">back to blog</a>
  296. <br /><br />
  297. <a href="http://irrelevantdivision.tumblr.com" id="credit">IDTHEMES</a></div>
  298.  
  299. </div>
  300. </body>
  301.  
  302.  
  303. </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!