API tools faq
paste
Advertisement
mogimochi

Multi-Page [03] Kingpin

mogimochi
Oct 26th, 2014
9,058
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Multi-Page [03] Kingpin
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim page as your own.
  14. 5. Do not redistribute.
  15.  
  16. --------------------------------------------------------------------------
  17. Please look out for notes throughout the code
  18. to help you in customizing the page!!
  19. --------------------------------------------------------------------------
  20.  
  21. --------------------------------------------------- UPDATE VER 131217 -->
  22.  
  23. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  24. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  25. <link rel="shortcut icon" href="{Favicon}" />
  26.  
  27. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  28.  
  29. <!-- JQUERY -->
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  31. <script>
  32. $(document).ready(function(){
  33.  
  34. $("#navb-bio").click(function(){
  35. $(".panel-view").removeClass("panel-view-lnk");
  36. $(".panel-view").removeClass("panel-view-fam");
  37. $("#navb-bio").addClass("mnav-active");
  38. $("#navb-lnk").removeClass("mnav-active");
  39. $("#navb-fam").removeClass("mnav-active");
  40. });
  41.  
  42. $("#navb-lnk").click(function(){
  43. $(".panel-view").addClass("panel-view-lnk");
  44. $(".panel-view").removeClass("panel-view-fam");
  45. $("#navb-bio").removeClass("mnav-active");
  46. $("#navb-lnk").addClass("mnav-active");
  47. $("#navb-fam").removeClass("mnav-active");
  48. });
  49.  
  50. $("#navb-fam").click(function(){
  51. $(".panel-view").removeClass("panel-view-lnk");
  52. $(".panel-view").addClass("panel-view-fam");
  53. $("#navb-bio").removeClass("mnav-active");
  54. $("#navb-lnk").removeClass("mnav-active");
  55. $("#navb-fam").addClass("mnav-active");
  56. });
  57.  
  58. });
  59.  
  60. $(function(){
  61. $window=$(window);
  62. $link=$("#scrollToTop");
  63. $link.click(function(){
  64. $("html, body").animate({scrollTop:0},"slow")});
  65. });
  66.  
  67. </script>
  68.  
  69. <!-- MASONRY SCRIPT -->
  70.  
  71. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  72. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  73. <script type="text/javascript">
  74. $(window).load(function () {
  75. $('.fam-content').masonry({
  76. itemSelector : ".fammember",
  77. },
  78. function() { $('.fam-content').masonry({ appendedContent: $(this) }); }
  79. );
  80. });
  81. </script>
  82.  
  83. <style type="text/css">
  84.  
  85. @font-face { font-family: "bitxmap"; src: url('https://dl.dropboxusercontent.com/s/sq28ejp56rarabs/BitxMap%20Font%20tfb.ttf'); }
  86. @font-face { font-family: "pix"; src: url('https://dl.dropboxusercontent.com/s/68bdyrv4fsayhg8/04B_03__.TTF'); }
  87.  
  88. ::-webkit-scrollbar { width: 7px; }
  89. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  90. ::-webkit-scrollbar-thumb:vertical {
  91. width: 10px;
  92. margin-left: 10px;
  93. background-color: #bbbbbb; /* change the main line of the scrollbar */
  94. border: 3px solid #f1f1f1; /* change the background of the scrollbar */
  95. }
  96.  
  97.  
  98. body {
  99. background-color: #ffffff; /* change the background colour */
  100. background-image:url(http://38.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_400.jpg); /* change the background image */
  101. background-attachment: fixed;
  102. margin: 0;
  103. word-wrap: break-word;
  104. }
  105.  
  106. a { text-decoration:none; }
  107.  
  108. #main {
  109. width: 580px;
  110. margin-top: 120px;
  111. }
  112.  
  113. #main-left {
  114. float: left;
  115. width: 160px;
  116. }
  117.  
  118. .left-icon {
  119. width: 120px;
  120. height: 120px;
  121. padding: 20px;
  122. background-color: #ffffff; /** background colour of content elements */
  123. box-shadow: 1px 1px 0 #cdcdcd; /** elements' shadow **/
  124. }
  125.  
  126. .icon {
  127. width: 120px;
  128. height: 120px;
  129. }
  130.  
  131. .left-nav {
  132. width: 120px;
  133. background-color: #ffffff; /** background colour of content elements **/
  134. padding: 20px;
  135. margin-top: 30px;
  136. box-shadow: 1px 1px 0 #cdcdcd; /** elements' shadow **/
  137. }
  138.  
  139. .lnav {
  140. height: 40px;
  141. width: 120px;
  142. margin-bottom: 2px;
  143. background-color: #f1f1f1; /** background colour of the nav links **/
  144. overflow: hidden;
  145. }
  146.  
  147. .lnav-fx {
  148. background-color: #ffffff; /** background colour of content elements **/
  149. width: 10px;
  150. height: 80px;
  151. margin-top: -20px;
  152. margin-left: -300px;
  153. border-left: 140px solid #000000; /** hover nav links background **/
  154. border-right: 20px double #ffe251; /** hover nav links effect accent **/
  155. transform: rotate(10deg);
  156. transition: 0.6s;
  157. }
  158.  
  159. .lnav-txt {
  160. height: 40px;
  161. width: 120px;
  162. text-align: center;
  163. font-family: pix;
  164. font-size: 8px;
  165. letter-spacing: 2px;
  166. text-transform: uppercase;
  167. color: #aaaaaa; /** text colour of the nav links **/
  168. line-height: 40px;
  169. position: absolute;
  170. z-index: 1;
  171. transition: 0.6s;
  172. }
  173.  
  174. .lnav:hover .lnav-fx {
  175. margin-left: -10px;
  176. }
  177.  
  178. .lnav:hover .lnav-txt {
  179. color: #fff;
  180. transition: 0.4s;
  181. }
  182.  
  183. #main-right {
  184. height: 354px;
  185. width: 350px;
  186. background-color: #ffffff; /** background colour of content elements **/
  187. padding: 20px;
  188. float: left;
  189. margin-left: 30px;
  190. box-shadow: 1px 1px 0 #cdcdcd; /** content elements shadow **/
  191. }
  192.  
  193. .right-content {
  194. width: 350px;
  195. height: 354px;
  196. overflow: hidden;
  197. }
  198.  
  199. .panel-view {
  200. width: 350px;
  201. height: 1062px;
  202. margin-top: 0;
  203. transition: 0.8s;
  204. }
  205.  
  206. .panel-view-lnk {
  207. margin-top: -354px;
  208. }
  209.  
  210. .panel-view-fam {
  211. margin-top: -708px;
  212. }
  213.  
  214. .panel-biography, .panel-links, .panel-family {
  215. width: 350px;
  216. height: 354px;
  217. overflow: auto;
  218. }
  219.  
  220. .bio-img {
  221. float: right;
  222. width: 150px;
  223. margin: 0 10px 10px 20px;
  224.  
  225. }
  226.  
  227. .bio-basic {
  228. text-align: left;
  229. line-height: 24px;
  230. }
  231.  
  232. .bio-basicinfo {
  233. border: 1px solid #ffe251; /** biography -- the border around the few basic introductory lines, like ( name: yuko ) **/
  234. border-radius: 3px;
  235. font-family: bitxmap;
  236. font-size: 10px;
  237. text-align: left;
  238. padding: 2px 4px 1px 0;
  239. }
  240.  
  241. .bio-basicinfo-title {
  242. border-radius: 2px 0 0 2px;
  243. background-color: #ffee99; /** biography -- the background of "name", "age" etc in the basic introductory lines **/
  244. text-transform: uppercase;
  245. padding: 2px 4px 1px 6px;
  246. }
  247.  
  248. .bio-introduction {
  249. color: #999999; /* biography text colour */
  250. font-family: bitxmap; /* biography font */
  251. font-size: 10px; /* biography font size */
  252. text-align: justify;
  253. padding-right: 10px;
  254. line-height: 14px;
  255. }
  256.  
  257. .bio-introduction b,strong {
  258. color: #E39F5B; /* biography bold text colour */
  259. font-weight: 400;
  260. }
  261.  
  262. .bio-introduction i,em {
  263. color: #cccccc; /* biography italic text colour */
  264. font-style: none;
  265. }
  266.  
  267. .bio-introduction a {
  268. color: #E8DA7D; /* biography linked text colour */
  269. border-bottom: 1px solid #E8DA7D; /* biography linked text colour */
  270. transition: 0.4s;
  271. -moz-transition: 0.4s;
  272. -webkit-transition: 0.4s;
  273. -o-transition: 0.4s;
  274. }
  275.  
  276. .bio-introduction a:hover {
  277. color: #dddddd; /* HOVERED bio linked text colour */
  278. border-bottom: 1px solid #dddddd; /* HOVERED bio linked text colour */
  279. }
  280.  
  281. .lnk-limits {
  282. width: 350px;
  283. height: 354px;
  284. overflow: hidden;
  285. }
  286.  
  287. .lnk-btn {
  288. width: 155px;
  289. height: 50px;
  290. background-color: #f6f6f6; /** links panel -- background colour **/
  291. font-family: pix;
  292. font-size: 8px;
  293. text-transform: uppercase;
  294. line-height: 50px;
  295. letter-spacing: 2px;
  296. color: #aaaaaa; /** links panel -- text **/
  297. float: left;
  298. margin: 10px;
  299. transition: 0.6s;
  300. box-shadow: 0 0 0 #ffc65e, 0 0 0 #ffe251; /** hovered link shadows **/
  301. /** these colours should match with that seen in the block below this one **/
  302. }
  303.  
  304. .lnk-btn:hover {
  305. box-shadow: 5px 5px 0 #ffc65e, -5px -5px 0 #ffe251;
  306. /** hovered link shadows **/
  307. background-color: #000000; /** hovered link background **/
  308. color: #ffffff; /** hovered link text **/
  309. letter-spacing: 4px;
  310. }
  311.  
  312. .fam-content {
  313. margin: 0 10px 0 0;
  314. }
  315.  
  316. .fammember {
  317. width: 90px;
  318. float: left;
  319. margin-right: 20px;
  320. margin-bottom: 20px;
  321. }
  322.  
  323. .famimg {
  324. width: 90px;
  325. height: 90px;
  326. display: block;
  327. }
  328.  
  329. .famtitle {
  330. font-family: pix;
  331. font-size: 8px;
  332. text-transform: uppercase;
  333. letter-spacing: 1px;
  334. margin: -20px 0 8px 0;
  335. position: relative;
  336. z-index: 1;
  337. padding: 2px 0;
  338. float: left;
  339. }
  340.  
  341. .famtitle a {
  342. background-color: rgba(255,255,255,0.6);
  343. color: #555555; /* fam member title text */
  344. padding: 2px 6px;
  345. }
  346.  
  347. .faminfo {
  348. font-family: pix;
  349. font-size: 8px;
  350. text-transform: uppercase;
  351. background-color: #444444; /* fam member desc bg */
  352. color: #dddddd; /* fam member desc text */
  353. padding: 7px 10px;
  354. text-align: justify;
  355. }
  356.  
  357. .famurl {
  358. background-color: #eeeeee; /* fam member bottom url bg */
  359. color: #aaaaaa; /* fam member bottom url text */
  360. font-family: pix;
  361. font-size: 8px;
  362. text-transform: uppercase;
  363. float: right;
  364. padding: 3px 5px;
  365. border-radius: 0 0 1px 1px;
  366. transition: 0.2s;
  367. -moz-transition: 0.2s;
  368. -webkit-transition: 0.2s;
  369. -o-transition: 0.2s;
  370. }
  371.  
  372. .famurl:hover {
  373. background-color: #666; /* HOVERED fam member bottom url bg */
  374. color: #ccc; /* HOVERED fam member bottom url text */
  375. }
  376.  
  377. #main-navigation {
  378. position: absolute;
  379. margin-left: 580px;
  380. margin-top: 20px;
  381. width: 20px;
  382. }
  383.  
  384. .mnav {
  385. width: 30px;
  386. height: 30px;
  387. background-color: #f1f1f1; /** inactive panel button background **/
  388. color: #aaaaaa; /** inactive panel button icon colour **/
  389. text-align: center;
  390. line-height: 35px;
  391. margin-bottom: 5px;
  392. box-shadow: 1px 1px 0 #cdcdcd; /** content elements shadow **/
  393. border-left: 1px solid #cdcdcd; /** content elements shadow **/
  394. border-radius: 0 5px 5px 0;
  395. cursor: pointer;
  396. transition: 0.6s;
  397. }
  398.  
  399. .mnav-active {
  400. background-color: #ffffff; /** content elements background **/
  401. border-left: 1px solid #ffffff; /** content elements background **/
  402. color: #ffcf26; /** active panel button icon colour **/
  403. box-shadow: 1px 1px 0 #cdcdcd; /** content elements shadow **/
  404. cursor: default;
  405. }
  406.  
  407. {CustomCSS}
  408.  
  409. </style>
  410. </head>
  411. <body>
  412.  
  413. <center>
  414.  
  415. <div id="main">
  416.  
  417. <div id="main-left">
  418.  
  419. <div class="left-icon">
  420.  
  421. <!--replace the following icon link with the icon image url of your choice-->
  422.  
  423. <img class="icon" src="https://78.media.tumblr.com/004fac2f3b9691a47941d0710496bfff/tumblr_o51oavbMDx1ugpbmuo9_540.png">
  424.  
  425. </div>
  426. <div class="left-nav">
  427. <a href="/"><div class="lnav"><div class="lnav-txt">back to blog</div><div class="lnav-fx"></div></div></a>
  428. <a href="/ask"><div class="lnav"><div class="lnav-txt">message</div><div class="lnav-fx"></div></div></a>
  429. <a href="/archive"><div class="lnav"><div class="lnav-txt">archives</div><div class="lnav-fx"></div></div></a>
  430. <a href="http://yukoki.tumblr.com"><div class="lnav"><div class="lnav-txt">credit</div><div class="lnav-fx"></div></div></a>
  431. </div><!--left-nav-->
  432.  
  433. </div><!--main-left-->
  434.  
  435. <!--------------------------------------------------------------------------->
  436.  
  437. <div id="main-navigation">
  438.  
  439. <div id="navb-bio" class="mnav mnav-active" class="mnav-active"><span class="lnr lnr-pushpin"></span></div>
  440. <div id="navb-lnk" class="mnav"><span class="lnr lnr-list"></span></div>
  441. <div id="navb-fam" class="mnav"><span class="lnr lnr-users"></span></div>
  442.  
  443. </div><!--main-navigation-->
  444.  
  445. <div id="main-right">
  446.  
  447. <div class="right-content">
  448.  
  449. <div class="panel-view">
  450.  
  451. <!--------------------------------------------------------------------------->
  452.  
  453. <div class="panel-biography">
  454.  
  455. <!--replace the following image link with the image link of your choice-->
  456.  
  457. <img class="bio-img" src="http://static.tumblr.com/2icx37z/jJ6p0wi3m/default.jpg">
  458.  
  459. <div class="bio-basic">
  460.  
  461. <span class="bio-basicinfo">
  462. <span class="bio-basicinfo-title">name</span>
  463. YOUR NAME HERE
  464. </span><br>
  465.  
  466. <span class="bio-basicinfo">
  467. <span class="bio-basicinfo-title">bday</span>
  468. YOUR BIRTHDATE HERE
  469. </span><br>
  470.  
  471. <span class="bio-basicinfo">
  472. <span class="bio-basicinfo-title">ctry</span>
  473. YOUR COUNTRY HERE
  474. </span><br>
  475.  
  476. <span class="bio-basicinfo">
  477. <span class="bio-basicinfo-title">mbti</span>
  478. YOUR PERSONALITY
  479. </span><p>
  480.  
  481. </div><!--bio-basic-->
  482.  
  483. <div class="bio-introduction">
  484.  
  485. <!-- REPLACE THE FOLLOWING TEXT WITH YOUR BIOGRAPHY TEXT !!!! --------------->
  486.  
  487. YOUR BIOGRAPHY HERE!!!!
  488.  
  489. </div><!--bio-introduction-->
  490.  
  491. </div><!--panel-biography-->
  492.  
  493. <!--------------------------------------------------------------------------->
  494.  
  495. <div class="panel-links">
  496.  
  497. <div class="lnk-limits">
  498.  
  499. <!-- YOUR CUSTOM LINKS GO HERE. FOR EXAMPLE,----------------------------------
  500.  
  501. <a href="/tagged/cats"><div class="lnk-btn">my cats</div></a>
  502.  
  503. <a href="http://google.com"><div class="lnk-btn">google</div></a>
  504.  
  505. You can have up to 10 links.
  506.  
  507. ----------------------------------------------------------------------------->
  508.  
  509. <a href=""><div class="lnk-btn">ichi</div></a>
  510.  
  511. <a href=""><div class="lnk-btn">ni</div></a>
  512.  
  513. <a href=""><div class="lnk-btn">san</div></a>
  514.  
  515. <a href=""><div class="lnk-btn">yon</div></a>
  516.  
  517. <a href=""><div class="lnk-btn">go</div></a>
  518.  
  519. <a href=""><div class="lnk-btn">roku</div></a>
  520.  
  521. <a href=""><div class="lnk-btn">nana</div></a>
  522.  
  523. <a href=""><div class="lnk-btn">hachi</div></a>
  524.  
  525. <a href=""><div class="lnk-btn">kyuu</div></a>
  526.  
  527. <a href=""><div class="lnk-btn">jyuu</div></a>
  528.  
  529. </div><!--lnk-limits-->
  530.  
  531. </div><!--panel-links-->
  532.  
  533. <!--------------------------------------------------------------------------->
  534.  
  535. <div class="panel-family">
  536.  
  537. <div class="fam-content">
  538.  
  539. <!----------------------------------------------------------------------------
  540.  
  541.  
  542. // ONE FAMILY MEMBER BLOCK LOOKS LIKE: ---------------------------------------
  543.  
  544. <div class="fammember">
  545. <img class="famimg" src="family member icon image url">
  546.  
  547. <div class="famtitle" style="border-left: 12px solid #ffffff;">
  548. <a href="/" title="url here">
  549. family member title
  550. </a></div></a>
  551.  
  552. <div class="faminfo">
  553. a short family member description
  554. </div>
  555. <a href="/"><span class="famurl">@family member url</span></a>
  556. </div>
  557.  
  558.  
  559. // EXAMPLE OF ONE THAT IS FILLED IN: -----------------------------------------
  560.  
  561. <div class="fammember">
  562. <img class="famimg" src="http://media.tumblr.com/9736d3d8cebb1bdaed3101570c867b44/tumblr_inline_n304t2ppu71qhaskl.png">
  563.  
  564. <div class="famtitle" style="border-left: 12px solid #91b2b2;">
  565. <a href="/" title="url here">
  566. fool
  567. </a></div></a>
  568.  
  569. <div class="faminfo">
  570. the kingpin of steel; narukami yuu, he is cool as beans and the protagonist of persona 4 he has crossdressed for a beauty pageant what a loser
  571. </div>
  572. <a href="/"><span class="famurl">@forthetruth</span></a>
  573. </div><!--fammember-->
  574.  
  575.  
  576. <!--------------------------------------------------------------------------->
  577.  
  578. <div class="fammember">
  579. <img class="famimg" src="https://78.media.tumblr.com/7d376efd024eadd902a8bb60c8155c94/tumblr_o51oavbMDx1ugpbmuo4_540.png">
  580.  
  581. <div class="famtitle" style="border-left: 12px solid #91b2b2;">
  582. <a href="/" title="url here">
  583. TITLE
  584. </a></div></a>
  585.  
  586. <div class="faminfo">
  587. MEMBER DESCRIPTION
  588. </div>
  589. <a href="/"><span class="famurl">@ URL</span></a>
  590. </div><!--fammember-->
  591.  
  592.  
  593.  
  594. <div class="fammember">
  595. <img class="famimg" src="https://78.media.tumblr.com/2060fe62b7ed3b46e5789356942a305e/tumblr_o51oavbMDx1ugpbmuo2_540.png">
  596.  
  597. <div class="famtitle" style="border-left: 12px solid #d79c4f;">
  598. <a href="/" title="url here">
  599. TITLE
  600. </a></div></a>
  601.  
  602. <div class="faminfo">
  603. MEMBER DESCRIPTION
  604. </div>
  605. <a href="/"><span class="famurl">@ URL</span></a>
  606. </div><!--fammember-->
  607.  
  608.  
  609.  
  610. <div class="fammember">
  611. <img class="famimg" src="https://78.media.tumblr.com/9f9b498bf798ef43dddeaa78cec7b027/tumblr_o51oavbMDx1ugpbmuo7_500.png">
  612.  
  613. <div class="famtitle" style="border-left: 12px solid #5f7aab;">
  614. <a href="/" title="url here">
  615. TITLE
  616. </a></div></a>
  617.  
  618. <div class="faminfo">
  619. MEMBER DESCRIPTION
  620. </div>
  621. <a href="/"><span class="famurl">@ URL</span></a>
  622. </div><!--fammember-->
  623.  
  624.  
  625.  
  626. <div class="fammember">
  627. <img class="famimg" src="https://78.media.tumblr.com/2060fe62b7ed3b46e5789356942a305e/tumblr_o51oavbMDx1ugpbmuo2_540.png">
  628.  
  629. <div class="famtitle" style="border-left: 12px solid #d69688;">
  630. <a href="/" title="url here">
  631. TITLE
  632. </a></div></a>
  633.  
  634. <div class="faminfo">
  635. MEMBER DESCRIPTION
  636. </div>
  637. <a href="/"><span class="famurl">@ URL</span></a>
  638. </div><!--fammember-->
  639.  
  640.  
  641.  
  642. <div class="fammember">
  643. <img class="famimg" src="https://78.media.tumblr.com/9f9b498bf798ef43dddeaa78cec7b027/tumblr_o51oavbMDx1ugpbmuo7_500.png">
  644.  
  645. <div class="famtitle" style="border-left: 12px solid #f6f2b9;">
  646. <a href="/" title="url here">
  647. TITLE
  648. </a></div></a>
  649.  
  650. <div class="faminfo">
  651. MEMBER DESCRIPTION
  652. </div>
  653. <a href="/"><span class="famurl">@ URL</span></a>
  654. </div><!--fammember-->
  655.  
  656.  
  657.  
  658. <div class="fammember">
  659. <img class="famimg" src="https://78.media.tumblr.com/7d376efd024eadd902a8bb60c8155c94/tumblr_o51oavbMDx1ugpbmuo4_540.png">
  660.  
  661. <div class="famtitle" style="border-left: 12px solid #9b4343;">
  662. <a href="/" title="url here">
  663. TITLE
  664. </a></div></a>
  665.  
  666. <div class="faminfo">
  667. MEMBER DESCRIPTION
  668. </div>
  669. <a href="/"><span class="famurl">@ URL</span></a>
  670. </div><!--fammember-->
  671.  
  672.  
  673.  
  674. <div class="fammember">
  675. <img class="famimg" src="https://78.media.tumblr.com/9f9b498bf798ef43dddeaa78cec7b027/tumblr_o51oavbMDx1ugpbmuo7_500.png">
  676.  
  677. <div class="famtitle" style="border-left: 12px solid #fcff59;">
  678. <a href="/" title="url here">
  679. TITLE
  680. </a></div></a>
  681.  
  682. <div class="faminfo">
  683. MEMBER DESCRIPTION
  684. </div>
  685. <a href="/"><span class="famurl">@ URL</span></a>
  686. </div><!--fammember-->
  687.  
  688.  
  689. <div class="fammember">
  690. <img class="famimg" src="https://78.media.tumblr.com/7d376efd024eadd902a8bb60c8155c94/tumblr_o51oavbMDx1ugpbmuo4_540.png">
  691.  
  692. <div class="famtitle" style="border-left: 12px solid #9b4343;">
  693. <a href="/" title="url here">
  694. TITLE
  695. </a></div></a>
  696.  
  697. <div class="faminfo">
  698. MEMBER DESCRIPTION
  699. </div>
  700. <a href="/"><span class="famurl">@ URL</span></a>
  701. </div><!--fammember-->
  702.  
  703.  
  704. <div class="fammember">
  705. <img class="famimg" src="https://78.media.tumblr.com/2060fe62b7ed3b46e5789356942a305e/tumblr_o51oavbMDx1ugpbmuo2_540.png">
  706.  
  707. <div class="famtitle" style="border-left: 12px solid #d69688;">
  708. <a href="/" title="url here">
  709. TITLE
  710. </a></div></a>
  711.  
  712. <div class="faminfo">
  713. MEMBER DESCRIPTION
  714. </div>
  715. <a href="/"><span class="famurl">@ URL</span></a>
  716. </div><!--fammember-->
  717.  
  718.  
  719. </div><!--panel-family-->
  720.  
  721. <!--------------------------------------------------------------------------->
  722.  
  723. </div><!--panel-view-->
  724.  
  725. </div><!--right-content-->
  726.  
  727. </div><!--main-right-->
  728.  
  729. </div><!--main-->
  730.  
  731. </center>
  732.  
  733. </body>
  734. </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!