API tools faq
paste
Advertisement
zainmalik

PAGE II: "TRY AGAIN" BY GLTTER

zainmalik
Apr 17th, 2018
2,450
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. (c) gltter
  8.  
  9. base code by neonbikethemes
  10.  
  11. -->
  12.  
  13.  
  14. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  15. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  16. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  17. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  18. <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  19. <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" />
  20.  
  21.  
  22. <style type="text/css">
  23.  
  24. /* ---------------------------- GENERAL ----------------------------- */
  25.  
  26. /* -------- FONTS ------- */
  27.  
  28. @font-face {
  29. font-family: "helvetica medium";
  30. src: url(https://static.tumblr.com/iwykqv5/vNmp7b3ur/helvmn.ttf);
  31. }
  32.  
  33. @font-face {
  34. font-family: "helvetica neue";
  35. src: url(http://static.tumblr.com/rcakzbb/HARp0f7uq/helveticaneue_light.ttf);
  36. }
  37.  
  38. /* -------- SELECTION TOOL ------- */
  39.  
  40. ::-moz-selection {
  41. background: #dc8d64;
  42. color: #f1efef;
  43. }
  44.  
  45. ::selection {
  46. background: #dc8d64;
  47. color: #f1efef;
  48. }
  49.  
  50. /* -------- SCROLLBAR ------- */
  51.  
  52. ::-webkit-scrollbar {
  53. width: 0px;
  54. }
  55.  
  56. /* Track */
  57. ::-webkit-scrollbar-track {
  58. background:transparent;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb:window-inactive {
  62. background: transparent;
  63. }
  64.  
  65. /* -------- BASICS ------- */
  66.  
  67. body {
  68. background: #28211b url();/* -------- PASTE URL FOR A BACKGROUND ------- */
  69. color: #262626;
  70. font-family: "helvetica neue";
  71. font-size:10px;
  72. margin: 0;
  73. padding: 0;
  74. word-wrap: break-word;
  75. line-height:150%;
  76. }
  77.  
  78. a {
  79. color: #dc8d64;
  80. text-decoration: none;
  81. -webkit-transition: all .3s;
  82. -moz-transition: all .3s;
  83. -o-transition: all .3s;
  84. -ms-transition: all .3s;
  85. transition: all .3s;
  86. }
  87.  
  88. #bigcon{
  89. border-radius:3px;
  90. width:680px;
  91. height:550px;
  92. overflow:hidden;
  93. background:#f1efef url(https://78.media.tumblr.com/5d912a2fe54ef07aa888531446b983d7/tumblr_inline_p7bhu9e1xK1thfnft_540.png) left no-repeat;/*--PASTE URL FOR LEFTMOST SIDEBAR IMAGE HERE--*/
  94. position:absolute;
  95. left:0;
  96. right:0;
  97. top:0;
  98. bottom:0;
  99. margin:auto;
  100. }
  101.  
  102. .instaposts {
  103. height:550px;
  104. width:260px;
  105. position:fixed;
  106. overflow-y:scroll;
  107. overflow-x:hidden;
  108. margin-left:63px;
  109. }
  110.  
  111. .post {
  112. border-radius:4px;
  113. width:200px;
  114. height:auto;
  115. padding-bottom:7px;
  116. background:#f1efef;
  117. margin-bottom:40px;
  118. }
  119.  
  120. .heart {
  121. opacity:0;
  122. z-index:999999;
  123. position:absolute;
  124. margin-top:75px;
  125. margin-left:80px;
  126. -webkit-transition:all 0.6s ease-out;
  127. -moz-transition: all 0.6s ease-out;
  128. transition: all 0.6s ease-out
  129. }
  130.  
  131. .post:hover .heart {
  132. opacity:.7;
  133. -webkit-transition:all 0.6s ease-out;
  134. -moz-transition: all 0.6s ease-out;
  135. transition: all 0.6s ease-out
  136. }
  137.  
  138. .posticon img {
  139. margin-top:6px;
  140. margin-left:7px;
  141. height:20px;
  142. width:20px;
  143. border-radius:50%;
  144. position:relative;
  145. }
  146.  
  147. .postheader {
  148. font-size:8.5px;
  149. margin-top:-25px;
  150. margin-left:35px;
  151. position:relative;
  152. }
  153.  
  154. .postimage {
  155. margin-top:2px;
  156. }
  157.  
  158. .postcaption {
  159. margin-left:10px;
  160. margin-top:2px;
  161. font-size:9px;
  162. width:180px;
  163. line-height:110%;
  164. }
  165.  
  166. .smallcon {
  167. position:fixed;
  168. margin-left:350px;
  169. margin-top:25px;
  170. height:500px;
  171. width:305px;
  172. }
  173.  
  174. .commentwrap {
  175. margin-top:17px;
  176. padding-bottom:25px;
  177. height:296px;
  178. width:277px;
  179. overflow-y:scroll;
  180. overflow-x:hidden;
  181. }
  182.  
  183. .bigicon img {
  184. width:75px;
  185. height:75px;
  186. border-radius:50%;
  187. position:fixed;
  188. }
  189.  
  190. .username {
  191. font-size:15px;
  192. position:fixed;
  193. margin-left:90px;
  194. margin-top:3px;
  195. }
  196.  
  197. .following {
  198. display:inline-block;
  199. position:relative;
  200. margin-top:-5px;
  201. vertical-align: 2px;
  202. font-family:'helvetica medium';
  203. letter-spacing:.5px;
  204. color:#f1efef;
  205. font-size:10px;
  206. padding-right:4px;
  207. padding-left:4px;
  208. padding-top:2px;
  209. padding-bottom:0px;
  210. border-radius:2.5px;
  211. background:#dc8d64;
  212. }
  213.  
  214. .numbers {
  215. font-size:12px;
  216. margin-top:8px;
  217. }
  218.  
  219. .numbers h9 {
  220. font-family:'helvetica medium';
  221. font-size:12px;
  222. }
  223.  
  224. .bio {
  225. font-size:11px;
  226. margin-top:6px;
  227. width:215px;
  228. }
  229.  
  230. .bio h9 {
  231. font-family:'helvetica medium';
  232. font-size:11px;
  233. }
  234.  
  235. .commenticon img {
  236. height:35px;
  237. width:35px;
  238. border-radius:50%;
  239. }
  240.  
  241. .comment {
  242. font-size:10px;
  243. position:relative;
  244. margin-top:-39px;
  245. padding-left:43px;
  246. padding-bottom:10px;
  247. border-bottom:1px solid rgba(0,0,0,.1);
  248. }
  249.  
  250. .comment h9 {
  251. font-family:'helvetica medium';
  252. font-size:10px;
  253. }
  254.  
  255. /* ------------------------------ TABS ------------------------------ */
  256.  
  257. .wrapper {
  258. margin-top:110px;
  259. margin-left:15px;
  260. }
  261.  
  262. .tabs {
  263. display:inline-block;
  264. }
  265.  
  266. .tags {
  267. display:inline-block;
  268. position:absolute;-webkit-transition:all 0.3s ease-out;
  269. -moz-transition: all 0.3s ease-out;
  270. transition: all 0.3s ease-out
  271. }
  272.  
  273. .tags h8 {
  274. color:white;
  275. font-size:10px;
  276. background:black;
  277. padding-left:5px;
  278. padding-right:5px;
  279. padding-top:2px;
  280. padding-bottom:4px;
  281. opacity:.75;
  282. letter-spacing:.5;
  283. border-radius:3px;
  284. }
  285.  
  286. .tags:before {
  287. content:'';
  288. position:absolute;
  289. margin-top:-6px;
  290. margin-left:6px;
  291. opacity:.75;
  292. width: 0;
  293. height: 0;
  294. border-left: 5px solid transparent;
  295. border-right: 5px solid transparent;
  296. border-bottom: 5px solid black;
  297. }
  298.  
  299. .tabs a:hover .tags {
  300. opacity:0;
  301. -webkit-transition:all 0.3s ease-out;
  302. -moz-transition: all 0.3s ease-out;
  303. transition: all 0.3s ease-out
  304. }
  305.  
  306. .tabs a {
  307. margin-right:3px;
  308. }
  309.  
  310. .tabs a:hover{
  311. opacity:1;
  312. }
  313.  
  314. .tabs a.active{
  315. opacity:1;
  316. }
  317.  
  318. .tabgroup {
  319. width:277px;
  320. height:auto;
  321. margin-top:10px;
  322. overflow-y:scroll;
  323. overflow-x:hidden;
  324. }
  325.  
  326. .clearfix:after {
  327. content:"";
  328. display:table;
  329. clear:both;
  330. }
  331.  
  332. /* --------------------------- CREDIT -------------------------- */
  333.  
  334. .credit {
  335. bottom:10px;
  336. right:10px;
  337. position:fixed;
  338. }
  339.  
  340. .credit a {
  341. font-size:9px;
  342. z-index:99999;
  343. text-decoration:none;
  344. display:inline-block;
  345. width:auto;
  346. font-family:"droid sans mono";
  347. margin-right:5px;
  348. margin-bottom:5px;
  349. letter-spacing:.5px;
  350. padding-bottom:3px;
  351. padding-top:2px;
  352. padding-right:5px;
  353. padding-left:5px;
  354. font-weight:bold;
  355. border-radius:1.5px;
  356. background:#dc8d64;
  357. color:#f1efef;
  358. }
  359.  
  360. .credit a:hover {
  361. color:#dc8d64;
  362. background:#f1efef;
  363. }
  364.  
  365. </style>
  366. </head>
  367. <body>
  368.  
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375.  
  376.  
  377. <div id="bigcon">
  378. <div class="instaposts">
  379. <!-- ------ THIS IS WHERE THE SCROLLING LEFT SIDEBAR OF INSTAGRAM POSTS CAN BE EDITED ------ -->
  380.  
  381. <!-- ------ FIRST INSTAGRAM POST ------ -->
  382. <div class="post" style="margin-top:33px;">
  383.  
  384. <div class="posticon"><img src="https://78.media.tumblr.com/a2948503537dec6057d52938a0c7b473/tumblr_inline_p7bhw5fHTz1thfnft_540.png"></div><!-- ------ PASTE URL FOR INSTAGRAM ICON (20x20px) ------ -->
  385.  
  386. <div class="postheader" style="font-family:'helvetica medium';">
  387. d.earjaehyun
  388. </div><!-- ------ PASTE INSTAGRAM USERNAME HERE ------ -->
  389.  
  390. <div class="postheader" style="margin-top:-5px;">
  391. SM Station <!-- ------ PASTE FIRST INSTAGRAM LOCATION HERE ------ -->
  392. <i class="ion-chevron-right" style="opacity:.6;font-size:6px;"></i>
  393.  
  394. <i class="ion-more" style="position:relative;margin-top:-7px;float:right;font-size:15px;padding-right:13px;"></i></div>
  395.  
  396. <div class="postimage">
  397. <div class="heart"><i class="ion-heart" style="color:#f1efef;font-size:60px;"></i></div>
  398.  
  399. <img src="https://78.media.tumblr.com/0b6a48f3ad582e5920f1ee8c99753172/tumblr_inline_p7bhp9GsYZ1thfnft_540.png"></div><!-- ------ PASTE URL FOR FIRST INSTAGRAM PHOTO HERE (200x200px) ------ -->
  400.  
  401. <div class="postcaption">
  402.  
  403. <i class="ion-ios-heart-outline" style="font-size:14px;"></i> &nbsp;
  404. <i class="ion-ios-chatbubble-outline" style="font-size:15px;"></i> &nbsp;
  405. <i class="ion-ios-paperplane-outline" style="font-size:15px;"></i>
  406. <i class="ion-android-bookmark" style="float:right;font-size:15px;"></i><br><br>
  407.  
  408.  
  409. <span style="font-family:'helvetica medium'">
  410. d.earjaehyun<!-- ------ INSTAGRAM USERNAME GOES HERE, EDIT CAPTION BELOW ------ --></span>
  411.  
  412. i used to be the sweetest boy ever till i found out being the baddest boy was better.
  413. </div>
  414. </div>
  415. <!-- ------ END OF FIRST INSTAGRAM POST ------ -->
  416.  
  417.  
  418.  
  419.  
  420.  
  421.  
  422. <!-- ------ SECOND INSTAGRAM POST ------ -->
  423. <div class="post" style="margin-top:33px;">
  424.  
  425. <div class="posticon"><img src="https://78.media.tumblr.com/a2948503537dec6057d52938a0c7b473/tumblr_inline_p7bhw5fHTz1thfnft_540.png"></div><!-- ------ PASTE URL FOR INSTAGRAM ICON (20x20px) ------ -->
  426.  
  427. <div class="postheader" style="font-family:'helvetica medium';">
  428. d.earjaehyun
  429. </div><!-- ------ PASTE INSTAGRAM USERNAME HERE ------ -->
  430.  
  431. <div class="postheader" style="margin-top:-5px;">
  432. SM Station <!-- ------ PASTE FIRST INSTAGRAM LOCATION HERE ------ -->
  433. <i class="ion-chevron-right" style="opacity:.6;font-size:6px;"></i>
  434.  
  435. <i class="ion-more" style="position:relative;margin-top:-7px;float:right;font-size:15px;padding-right:13px;"></i></div>
  436.  
  437. <div class="postimage">
  438. <div class="heart"><i class="ion-heart" style="color:#f1efef;font-size:60px;"></i></div>
  439.  
  440. <img src="https://78.media.tumblr.com/0b6a48f3ad582e5920f1ee8c99753172/tumblr_inline_p7bhp9GsYZ1thfnft_540.png"></div><!-- ------ PASTE URL FOR FIRST INSTAGRAM PHOTO HERE (200x200px) ------ -->
  441.  
  442. <div class="postcaption">
  443.  
  444. <i class="ion-ios-heart-outline" style="font-size:14px;"></i> &nbsp;
  445. <i class="ion-ios-chatbubble-outline" style="font-size:15px;"></i> &nbsp;
  446. <i class="ion-ios-paperplane-outline" style="font-size:15px;"></i>
  447. <i class="ion-android-bookmark" style="float:right;font-size:15px;"></i><br><br>
  448.  
  449.  
  450. <span style="font-family:'helvetica medium'">
  451. d.earjaehyun<!-- ------ INSTAGRAM USERNAME GOES HERE, EDIT CAPTION BELOW ------ --></span>
  452.  
  453. i used to be the sweetest boy ever till i found out being the baddest boy was better.
  454. </div>
  455. </div>
  456. <!-- ------ END OF SECOND INSTAGRAM POST ------ -->
  457.  
  458.  
  459.  
  460.  
  461.  
  462. <!-- ------ THIRD INSTAGRAM POST ------ -->
  463. <div class="post" style="margin-top:33px;">
  464.  
  465. <div class="posticon"><img src="https://78.media.tumblr.com/a2948503537dec6057d52938a0c7b473/tumblr_inline_p7bhw5fHTz1thfnft_540.png"></div><!-- ------ PASTE URL FOR INSTAGRAM ICON (20x20px) ------ -->
  466.  
  467. <div class="postheader" style="font-family:'helvetica medium';">
  468. d.earjaehyun
  469. </div><!-- ------ PASTE INSTAGRAM USERNAME HERE ------ -->
  470.  
  471. <div class="postheader" style="margin-top:-5px;">
  472. SM Station <!-- ------ PASTE FIRST INSTAGRAM LOCATION HERE ------ -->
  473. <i class="ion-chevron-right" style="opacity:.6;font-size:6px;"></i>
  474.  
  475. <i class="ion-more" style="position:relative;margin-top:-7px;float:right;font-size:15px;padding-right:13px;"></i></div>
  476.  
  477. <div class="postimage">
  478. <div class="heart"><i class="ion-heart" style="color:#f1efef;font-size:60px;"></i></div>
  479.  
  480. <img src="https://78.media.tumblr.com/0b6a48f3ad582e5920f1ee8c99753172/tumblr_inline_p7bhp9GsYZ1thfnft_540.png"></div><!-- ------ PASTE URL FOR FIRST INSTAGRAM PHOTO HERE (200x200px) ------ -->
  481.  
  482. <div class="postcaption">
  483.  
  484. <i class="ion-ios-heart-outline" style="font-size:14px;"></i> &nbsp;
  485. <i class="ion-ios-chatbubble-outline" style="font-size:15px;"></i> &nbsp;
  486. <i class="ion-ios-paperplane-outline" style="font-size:15px;"></i>
  487. <i class="ion-android-bookmark" style="float:right;font-size:15px;"></i><br><br>
  488.  
  489.  
  490. <span style="font-family:'helvetica medium'">
  491. d.earjaehyun<!-- ------ INSTAGRAM USERNAME GOES HERE, EDIT CAPTION BELOW ------ --></span>
  492.  
  493. i used to be the sweetest boy ever till i found out being the baddest boy was better.
  494. </div>
  495. </div>
  496. <!-- ------ END OF THIRD INSTAGRAM POST ------ -->
  497.  
  498.  
  499.  
  500. <!-- ------ want to add another instagram post? copy from the beginning of a post to the end of it and paste it under this line. ------ -->
  501.  
  502.  
  503.  
  504.  
  505. </div>
  506.  
  507.  
  508.  
  509.  
  510.  
  511.  
  512.  
  513.  
  514. <div class="smallcon"><!-- ------ THIS IS WHERE THE RIGHT SIDE OF THE CONTAINER CAN BE EDITED! ------ -->
  515.  
  516. <div class="bigicon"><img src="https://78.media.tumblr.com/02b46bed07abc531917c216ed4a532f2/tumblr_inline_p7bhqftbKl1thfnft_540.png"></div><!-- ------ PASTE URL FOR BIG ICON HERE (75x75px) ------ -->
  517.  
  518. <div class="username">d.earjaehyun <!-- ------ INSTAGRAM USERNAME GOES HERE ------ -->
  519.  
  520.  
  521. <!-- - DON'T WANT A VERIFICATION CHECK? DELETE FROM HERE... --- -->
  522. &nbsp;<i class="ion-ios-checkmark" style="font-size:15px;color:#90c2ec"></i>
  523. <!-- ------ TO HERE ------ -->
  524.  
  525.  
  526. &nbsp;&nbsp;
  527. <span class="following">Following</span>
  528.  
  529. <div class="numbers"><h9>127</h9> posts &nbsp; <h9>214k</h9> followers &nbsp; <h9>18</h9> following</div> <!-- ------ EDIT POST, FOLLOWERS, FOLLOWING #'S HERE ------ -->
  530.  
  531. <div class="bio"><h9>JUNG JAEHYUN</h9> 먼 길을 다시 돌아간다 해도, 난 여전히 같 은 맘일 테니까, we’ll be alright, i want to try again.</div></div><!-- ------ INSTAGRAM BIO GOES HERE. DON'T MAKE IT TOO LONG!!! ------ -->
  532.  
  533.  
  534.  
  535.  
  536.  
  537. <!-- ------------- PHOTO TABS START HERE ---------------- -->
  538.  
  539. <div class="wrapper">
  540. <div class="tabs clearfix" data-tabgroup="first-tab-group">
  541.  
  542.  
  543.  
  544. <a href="#tab1"><div class="tags" style="margin-top:60px;margin-left:14px;"><h8>taeyong</h8><!-- ------ CHANGE FIRST INSTAGRAM TAG HERE ------ -->
  545.  
  546. </div>
  547.  
  548. <img src="https://78.media.tumblr.com/ebc8f578fe5d2761dbbe75ac367d3ffa/tumblr_inline_p7bhxbyk0W1thfnft_540.png"></a><!-- ------ PASTE URL FOR FIRST IMAGE HERE (90x90px) ------ -->
  549.  
  550.  
  551.  
  552.  
  553. <a href="#tab2"><div class="tags" style="margin-top:45px;margin-left:30px;"><h8>
  554. yeri<!-- ------ CHANGE SECOND INSTAGRAM TAG HERE ------ -->
  555. </h8></div>
  556.  
  557. <img src="https://78.media.tumblr.com/ebc8f578fe5d2761dbbe75ac367d3ffa/tumblr_inline_p7bhxbyk0W1thfnft_540.png"></a><!-- ------ PASTE URL FOR SECOND IMAGE HERE (90x90px) ------ -->
  558.  
  559.  
  560.  
  561.  
  562. <a href="#tab3"><div class="tags" style="margin-top:10px;margin-left:25px;"><h8>
  563. ten<!-- ------ CHANGE THIRD INSTAGRAM TAG HERE ------ -->
  564. </h8></div>
  565.  
  566. <img src="https://78.media.tumblr.com/ebc8f578fe5d2761dbbe75ac367d3ffa/tumblr_inline_p7bhxbyk0W1thfnft_540.png"></a><!-- ------ PASTE URL FOR THIRD IMAGE HERE (90x90px) ------ -->
  567.  
  568. </div>
  569. <div class="commentwrap">
  570.  
  571.  
  572.  
  573.  
  574.  
  575. <div class="commenticon"><img src="https://78.media.tumblr.com/1c0943c2517f797d980ece8271692603/tumblr_inline_p7bhryg25K1thfnft_540.png"><!-- ------ PASTE URL FOR COMMENT ICON HERE (35x35px) ------ -->
  576. </div>
  577.  
  578. <div class="comment" style="width:234px;"><h9>
  579. d.earjaehyun<!-- ------ INSTAGRAM USERNAME GOES HERE ------ -->
  580. </h9>
  581. click the photos above for more information.<!-- ------ EDIT FIRST COMMENT HERE ------ -->
  582. </div>
  583.  
  584.  
  585.  
  586.  
  587.  
  588. <div class="commenticon" style="margin-top:7px;">
  589. <img src="https://78.media.tumblr.com/1c0943c2517f797d980ece8271692603/tumblr_inline_p7bhryg25K1thfnft_540.png"><!-- ------ PASTE URL FOR COMMENT ICON HERE (35x35px) ------ -->
  590. </div>
  591.  
  592. <div class="comment" style="width:234px;"><h9>
  593. d.earjaehyun<!-- ------ INSTAGRAM USERNAME GOES HERE ------ -->
  594. </h9>
  595. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis.<br> lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa.<!-- ------ EDIT SECOND COMMENT HERE ------ -->
  596. </div>
  597.  
  598. <section id="first-tab-group" class="tabgroup">
  599.  
  600.  
  601. <!-- ------------------------ TAB 1 -------------------------- -->
  602.  
  603.  
  604. <div id="tab1">
  605.  
  606. <div class="commenticon">
  607. <img src="https://78.media.tumblr.com/1c0943c2517f797d980ece8271692603/tumblr_inline_p7bhryg25K1thfnft_540.png"><!-- ------ PASTE URL FOR 1ST TAB'S ICON HERE (35x35px). this should match the 1st 90x90 picture! ------ -->
  608. </div>
  609.  
  610. <div class="comment" style="border:none;"><h9>
  611. lee_taeyong<!-- ------ 1ST TAB'S USERNAME GOES HERE ------ -->
  612. </h9>
  613. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis.<br>aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis.<br> lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa.<!-- ------ 1ST TAB COMMENT GOES HERE ------ -->
  614. </div>
  615.  
  616. </div>
  617.  
  618.  
  619. <!-- ------------------------ TAB 2 -------------------------- -->
  620.  
  621.  
  622. <div id="tab2">
  623.  
  624. <div class="commenticon">
  625. <img src="https://78.media.tumblr.com/1c0943c2517f797d980ece8271692603/tumblr_inline_p7bhryg25K1thfnft_540.png"><!-- ------ PASTE URL FOR 2ND TAB'S ICON HERE (35x35px). this should match the 2nd 90x90 picture! ------ -->
  626. </div>
  627.  
  628. <div class="comment" style="border:none;"><h9>
  629. yeri99<!-- ------ 2ND TAB'S USERNAME GOES HERE ------ -->
  630. </h9>
  631. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean commodo ligula eget dolor. aenean massa. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. donec quam felis.<!-- ------ 2ND TAB COMMENT GOES HERE ------ -->
  632. </div>
  633.  
  634. </div>
  635.  
  636.  
  637. <!-- ------------------------ TAB 3 -------------------------- -->
  638.  
  639.  
  640. <div id="tab3">
  641.  
  642. <div class="commenticon">
  643. <img src="https://78.media.tumblr.com/1c0943c2517f797d980ece8271692603/tumblr_inline_p7bhryg25K1thfnft_540.png"><!-- ------ PASTE URL FOR 3RD TAB'S ICON HERE (35x35px). this should match the third 90x90 picture! ------ -->
  644. </div>
  645.  
  646. <div class="comment" style="border:none;"><h9>
  647. nctten<!-- ------ 3RD TAB'S USERNAME GOES HERE ------ -->
  648. </h9>
  649. lorem ipsum dolor sit amet, consectetuer adipiscing elit???<!-- ------ 3RD TAB COMMENT GOES HERE ------ -->
  650. </div>
  651.  
  652. </div>
  653.  
  654. <!-- ---------------- END OF THE TABS!-------------------- -->
  655.  
  656.  
  657.  
  658. </section>
  659. </div>
  660.  
  661. </div>
  662.  
  663. </div>
  664. </div>
  665.  
  666. <div class="credit"><a href="http://gltter.tumblr.com"><i class="ion-ios-heart-outline"></i> gltter</a></div>
  667.  
  668. <script language="javascript">
  669. $('.tabgroup > div').hide();
  670. $('.tabs a').click(function(e){
  671. e.preventDefault();
  672. var $this = $(this),
  673. tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
  674. others = $this.closest('li').siblings().children('a'),
  675. target = $this.attr('href');
  676. others.removeClass('active');
  677. $this.addClass('active');
  678. $(tabgroup).children('div').hide();
  679. $(target).show();
  680.  
  681. })
  682. </script>
  683.  
  684. </body>
  685. </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!