API tools faq
paste
Advertisement
andieanjos

page: zocial.

andieanjos
Oct 24th, 2014
1,345
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 34.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>{Title}: About Me</title>
  5.         <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
  6.         <link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
  7.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  8.         <style type="text/css">
  9.             @import url(http://weloveiconfonts.com/api/?family=zocial);
  10.  
  11.             /* zocial */
  12.             [class*="zocial-"]:before {
  13.               font-family: 'zocial', sans-serif;
  14.             }
  15.            
  16.             ::-webkit-scrollbar {
  17.                 width: 7px;
  18.                 height: 10px;
  19.                 background-color: #e3e5e8;
  20.             }
  21.             ::-webkit-scrollbar-button:start:decrement,
  22.             ::-webkit-scrollbar-button:end:increment  {
  23.                 display: none;
  24.             }
  25.              
  26.             ::-webkit-scrollbar-track-piece  {
  27.                 background-color: #333333;
  28.                 border:3px solid #e3e5e8;
  29.             }
  30.              
  31.             ::-webkit-scrollbar-thumb:vertical {
  32.                 background-color: #333333;
  33.             }
  34.            
  35.            
  36.             body {
  37.                 background-color: #e3e5e8;
  38.                 color:#333333;
  39.                 font-family: 'PT Sans Caption', sans-serif;
  40.                 font-size: 10pt;
  41.             }
  42.             a {
  43.                 color:#e75280;
  44.                 text-decoration: none;
  45.             }
  46.             #header {
  47.                 position:absolute;
  48.                 top:0; left:0; right:0;
  49.                 height:200px;
  50.                 background-color:#e75280;
  51.                 color:#FFFFFF;
  52.                 background-image:url(http://i.imgur.com/r0CddIG.png);
  53.                 background-position: center;
  54.                 background-size:cover;
  55.                 -webkit-filter: blur(5px);
  56.                 -moz-filter: blur(5px);
  57.                 -o-filter: blur(5px);
  58.                 -ms-filter: blur(5px);
  59.                 filter: blur(5px);
  60.             }
  61.             #headerTexto {
  62.                 position:absolute;
  63.                 top:0; left:0; right:0;
  64.                 height:200px;
  65.                 background-color:rgba(51,51,51,.6);
  66.             }
  67.             h1 {
  68.                 color:#c42d5b;
  69.                 margin-top:50px;
  70.                 font-family: 'Yesteryear', cursive;
  71.                 font-size: 24pt;
  72.             }
  73.             h1, h2 {
  74.                 font-weight: 400;
  75.                 text-align: center;
  76.             }
  77.             h2 {
  78.                 font-size: 9pt;
  79.                 margin-top:-15px;
  80.                 font-style: italic;
  81.                 opacity: .7;
  82.             }
  83.             #tata {
  84.                 position:fixed;
  85.                 bottom:0px; right:0px;
  86.                 padding:10px;
  87.                 font-size:10pt;
  88.                 font-family: monospace;
  89.                 font-weight: bold;
  90.                 background-color: #e3e5e8;
  91.             }
  92.             #container {
  93.                 background-color: #e3e5e8;
  94.                 position: absolute;
  95.                 top:200px; left:0; right:0;
  96.                 padding-bottom: 100px;
  97.             }
  98.             .awesome {
  99.                 width: 80vw;
  100.                 margin:0px auto;
  101.                 text-align:center;
  102.             }
  103.             #whoAmI {
  104.                 width: 750px;
  105.                 padding-top:50px;
  106.             }
  107.            
  108.             .person {
  109.                 width: 245px;
  110.                 height: 335px;
  111.                 background-color: #FFFFFF;
  112.                 border-radius: 3px;
  113.                 margin:25px;
  114.                 padding:0;
  115.                 display:inline-block;
  116.             }
  117.             .person .bg {
  118.                 display:block;
  119.                 height: 125px;
  120.                 margin:0;
  121.                 background-position: center;
  122.                 background-size: cover;
  123.             }
  124.             .person .info {
  125.                 display: block;
  126.                 margin:0;
  127.                 text-align: center;
  128.             }
  129.             .info .avatar {
  130.                 border-radius: 100px;
  131.                 width:100px;
  132.                 height:100px;
  133.                 margin:0 auto;
  134.                 margin-top:-50px;
  135.                 background-position: center;
  136.                 background-size: cover;
  137.             }
  138.             #following .person {
  139.                 height: 60px;
  140.             }
  141.             #following .person .avatar {
  142.                 margin:10px auto;
  143.                 width: 40px;
  144.                 height: 40px;
  145.                 float:left;
  146.                 margin-left:10px;
  147.             }
  148.             #following .info {
  149.                 float: right;
  150.                 display: block;
  151.                 width:100%;
  152.             }
  153.             .info h3, .info h6 {
  154.                 font-weight: 600;
  155.                 text-transform: uppercase;
  156.                 margin:0; padding:0;
  157.                 display:block;
  158.                 text-align: center;
  159.                 margin:10px auto;
  160.                 letter-spacing: 2px;
  161.             }
  162.             .info h6 {
  163.                 font-weight: 300;
  164.                 color:#999999;
  165.                 letter-spacing: 1px;
  166.                 text-transform: none;
  167.                 margin-top:-10px;
  168.             }
  169.             .info .follow {
  170.                 background-color:#e75280;
  171.                 text-transform: uppercase;
  172.                 border-radius: 2px;
  173.                 font-weight: 700;
  174.                 display: inline-block;
  175.                 margin: 5px auto;
  176.                 color:#FFFFFF;
  177.                 padding:10px;
  178.                 min-width:50%;
  179.                 box-shadow: 0 3px #c42d5b;
  180.             }
  181.             .info .follow:hover {
  182.                 box-shadow: 0 2px #c42d5b;
  183.                 margin-top:6px;
  184.                 margin-bottom:4px;
  185.             }
  186.             .info .l, .info .r {
  187.                 font-size:8pt;
  188.                 float:left;
  189.                 padding:20px;
  190.                 color:#999999;
  191.             }
  192.             .info .r {
  193.                 float:right;
  194.             }
  195.            
  196.             #awesomeDramas .follow {
  197.                 background-color: #f6712a;
  198.                 box-shadow: 0 3px #cb5d22;
  199.             }
  200.             #awesomeDramas .follow:hover {
  201.                 box-shadow: 0 2px #cb5d22;
  202.             }
  203.             #awesomeDramas h1 {
  204.                 color: #cb5d22;
  205.             }
  206.            
  207.             #title {
  208.                 line-height: 150px;
  209.                 text-align: center;
  210.                 display: block;
  211.                 font-family: 'Yesteryear', cursive;
  212.                 font-size: 4em;
  213.                 color:#FFFFFF;
  214.             }
  215.             #menu {
  216.                 list-style-type: none;
  217.                 padding:0;
  218.                 margin:0;
  219.                 width:100%;
  220.                 text-align: center;
  221.             }
  222.             #menu li {
  223.                 display: inline-block;
  224.                 padding:5px 20px;
  225.                 text-transform: uppercase;
  226.                 font-size: .7em;
  227.             }
  228.             #menu li a {
  229.                 color:#FFFFFF;
  230.                 text-decoration: none;
  231.                 letter-spacing: 1px;
  232.             }
  233.             #menu li a:hover {
  234.                 font-weight: bold;
  235.             }
  236.            
  237.             #aboutMe, #taglist {
  238.                 width:300px;
  239.                 height:200px;
  240.                 margin:5px;
  241.                 background-color: #FFFFFF;
  242.                 border-radius: 3px;
  243.                 padding:15px;
  244.                 display:inline-block;
  245.                 position: relative;
  246.                 float:left;
  247.             }
  248.             #taglist {
  249.                 float:right;
  250.             }
  251.             #myFace {
  252.                 width:100px;
  253.                 height:100px;
  254.                 border-radius:100px;
  255.                 float:left;
  256.                 background-size: cover;
  257.                 background-position: center;
  258.             }
  259.             #myName {
  260.                 float: left;
  261.                 line-height: 25px;
  262.                 font-weight: bold;
  263.                 padding-left: 15px;
  264.                 display: inline-block;
  265.                 text-transform: uppercase;
  266.                 letter-spacing: 1px;
  267.                 font-size: 1em;
  268.             }
  269.             #subtext {
  270.                 float: left;
  271.                 font-weight: 300;
  272.                 color:#999999;
  273.                 letter-spacing: 1px;
  274.                 text-transform: none;
  275.                 font-size: .7em;
  276.                 padding-left: 15px;
  277.                 display: inline-block;
  278.             }
  279.             #description {
  280.                 font-weight: 300;
  281.                 color:#999999;
  282.                 letter-spacing: 1px;
  283.                 font-size: .7em;
  284.                 margin: 10px;
  285.                 padding-right: 10px;
  286.                 margin-right: 0px;
  287.                 text-align: justify;
  288.                 height:80px;
  289.                 overflow: auto;
  290.             }
  291.             #social {
  292.                 list-style-type: none;
  293.                 padding:0;
  294.                 margin:0;
  295.                 margin-top:-40px;
  296.                 display:block;
  297.                 text-align: right;
  298.             }
  299.             #social li {
  300.                 display:inline-block;
  301.                 width:40px;
  302.                 height:40px;
  303.                 font-size: 1.5em;
  304.                 text-align: center;
  305.                 line-height: 40px;
  306.                 margin: 0;
  307.             }
  308.             #social li a {
  309.                 color:#FFFFFF;
  310.             }
  311.             #social li:nth-child(1), #taglist li:nth-child(1) {
  312.                 background-color: #eb4a3f;
  313.             }
  314.             #social li:nth-child(2), #taglist li:nth-child(2) {
  315.                 background-color: #23cdb7;
  316.             }
  317.             #social li:nth-child(3), #taglist li:nth-child(3) {
  318.                 background-color: #e75280;
  319.             }
  320.             #social li:nth-child(4), #taglist li:nth-child(4) {
  321.                 background-color: #f6712a;
  322.             }
  323.            
  324.             #taglist ul {
  325.                 list-style-type: none;
  326.                 padding:0;
  327.                 margin:0;
  328.                 display:block;
  329.                 margin-top:-5px;
  330.             }
  331.             #taglist li {
  332.                 display:inline-block;
  333.                 width:72px;
  334.                 height:40px;
  335.                 text-align: center;
  336.                 line-height: 40px;
  337.                 margin: -2px;
  338.                 color:#FFFFFF;
  339.                 cursor:pointer;
  340.                 text-transform: uppercase;
  341.                 font-weight: 700;
  342.             }
  343.             #taglist li.active {
  344.                 background-color:#FFFFFF;
  345.             }
  346.             #taglist li:nth-child(1).active {
  347.                 color: #eb4a3f;
  348.             }
  349.             #taglist li:nth-child(2).active {
  350.                 color: #23cdb7;
  351.             }
  352.             #taglist li:nth-child(3).active {
  353.                 color: #e75280;
  354.             }
  355.             #taglist li:nth-child(4).active {
  356.                 color: #f6712a;
  357.             }
  358.             #taglist .content {
  359.                 position: absolute;
  360.                 top:60px; left:10px; right:10px; bottom:10px;
  361.                 display:none;
  362.                 text-align: justify;
  363.                 font-size: .8em;
  364.                 overflow: auto;
  365.                 padding-right: 10px;
  366.             }
  367.             #taglist .content.active {
  368.                 display:block;
  369.             }
  370.             #taglist .content a {
  371.                 display:inline-block;
  372.                 padding:3px 5px;
  373.                 text-transform: lowercase;
  374.                 font-weight: 700;
  375.                 color:#FFFFFF;
  376.                 letter-spacing: 1px;
  377.                 border-radius:2px;
  378.                 margin:3px;
  379.             }
  380.             #taglist .content:nth-child(2) a {
  381.                 background-color: #eb4a3f;
  382.             }
  383.             #taglist .content:nth-child(3) a {
  384.                 background-color: #23cdb7;
  385.             }
  386.             #taglist .content:nth-child(4) a {
  387.                 background-color: #e75280;
  388.             }
  389.             #taglist .content:nth-child(5) a {
  390.                 background-color: #f6712a;
  391.             }
  392.            
  393.             #followed {
  394.                 max-height: 500px;
  395.                 overflow: auto;
  396.             }
  397.         </style>
  398.         <script type="text/javascript">
  399.             $(document).ready(function(){
  400.                 $("#taglist li").click(function(){
  401.                     var numIdx = $(this).index();
  402.                    
  403.                     $("#taglist li").removeClass("active");
  404.                     $(this).addClass("active");
  405.                    
  406.                     $("#taglist .content").removeClass("active");
  407.                     $("#taglist .content").eq(numIdx).addClass("active");
  408.                 });
  409.             });
  410.         </script>
  411.     </head>
  412.     <body>
  413.         <div id="header"></div>
  414.         <div id="headerTexto">
  415.             <span id="title">Things I Love</span>
  416.             <ul id="menu">
  417.                 <li><a href="/">home</a></li>
  418.                 <li><a href="/ask">message</a></li>
  419.                 <li><a href="http://tanharu.tumblr.com/">codes</a></li>
  420.             </ul>
  421.         </div>
  422.         <div id="container">
  423.             <div id="whoAmI" class="awesome">
  424.                 <div id="aboutMe">
  425.                     <div id="myFace" style="background-image:url({PortraitURL-128});"></div>
  426.                     <span id="myName">Andressa Anjos</span>
  427.                     <span id="subtext">Front-end Developer</span>
  428.                    
  429.                     <br style="clear: both;" />
  430.                     <ul id="social">
  431.                         <li><a href="https://twitter.com/andieanjos" class="zocial-twitter"></a></li>
  432.                         <li><a href="http://instagram.com/_a.anjos" class="zocial-instagram"></a></li>
  433.                         <li><a href="https://www.facebook.com/andieAnjos" class="zocial-facebook"></a></li>
  434.                         <li><a href="http://www.pinterest.com/andieanjos/" class="zocial-pinterest"></a></li>
  435.                     </ul>
  436.                    
  437.                     <div id="description">
  438.                         That, body in aromatic, filter café au lait robust, lungo cappuccino et strong saucer shop. Frappuccino mocha espresso seasonal, spoon, qui, sweet, flavour cup dark wings, bar blue mountain kopi-luwak saucer half and half con panna chicory doppio foam trifecta. So caffeine extra dripper, sweet, half and half froth flavour galão dripper café au lait, organic frappuccino cup doppio mazagran mocha. Wings, trifecta robust flavour saucer, crema so coffee aftertaste, single origin so, id mug grinder ut acerbic a carajillo chicory. That, blue mountain, mocha carajillo, seasonal plunger pot, aged steamed cream siphon medium as caffeine half and half aroma.
  439.                     </div>
  440.                 </div>
  441.                
  442.                 <div id="taglist">
  443.                     <ul>
  444.                         <li class="active">Tags 1</li>
  445.                         <li>Tags 2</li>
  446.                         <li>Tags 3</li>
  447.                         <li>Tags 4</li>
  448.                     </ul>
  449.                     <div class="content active">
  450.                         <a href="#">About</a> That, body in aromatic, filter café au lait robust, lungo cappuccino et strong saucer shop. Wings, trifecta robust flavour saucer, crema so coffee aftertaste, single origin so, id mug grinder ut acerbic.<br>
  451.                         <a href="#">Places</a> Frappuccino mocha espresso seasonal, spoon, qui, sweet, flavour cup dark wings, bar blue mountain kopi-luwak saucer half and half con panna chicory doppio foam trifecta.<br>
  452.                         <a href="#">Follow List</a> That, blue mountain, mocha carajillo, seasonal plunger pot, aged steamed cream siphon medium as caffeine half and half aroma.
  453.                     </div>
  454.                     <div class="content">
  455.                         <a href="#">About</a> That, body in aromatic, filter café au lait robust, lungo cappuccino et strong saucer shop. Wings, trifecta robust flavour saucer, crema so coffee aftertaste, single origin so, id mug grinder ut acerbic.<br>
  456.                         <a href="#">Places</a> Frappuccino mocha espresso seasonal, spoon, qui, sweet, flavour cup dark wings, bar blue mountain kopi-luwak saucer half and half con panna chicory doppio foam trifecta.<br>
  457.                         <a href="#">Follow List</a> That, blue mountain, mocha carajillo, seasonal plunger pot, aged steamed cream siphon medium as caffeine half and half aroma.
  458.                     </div>
  459.                     <div class="content">
  460.                         <a href="#">About</a> That, body in aromatic, filter café au lait robust, lungo cappuccino et strong saucer shop. Wings, trifecta robust flavour saucer, crema so coffee aftertaste, single origin so, id mug grinder ut acerbic.<br>
  461.                         <a href="#">Places</a> Frappuccino mocha espresso seasonal, spoon, qui, sweet, flavour cup dark wings, bar blue mountain kopi-luwak saucer half and half con panna chicory doppio foam trifecta.<br>
  462.                         <a href="#">Follow List</a> That, blue mountain, mocha carajillo, seasonal plunger pot, aged steamed cream siphon medium as caffeine half and half aroma.
  463.                     </div>
  464.                     <div class="content">
  465.                         <a href="#">About</a> That, body in aromatic, filter café au lait robust, lungo cappuccino et strong saucer shop. Wings, trifecta robust flavour saucer, crema so coffee aftertaste, single origin so, id mug grinder ut acerbic.<br>
  466.                         <a href="#">Places</a> Frappuccino mocha espresso seasonal, spoon, qui, sweet, flavour cup dark wings, bar blue mountain kopi-luwak saucer half and half con panna chicory doppio foam trifecta.<br>
  467.                         <a href="#">Follow List</a> That, blue mountain, mocha carajillo, seasonal plunger pot, aged steamed cream siphon medium as caffeine half and half aroma.
  468.                     </div>
  469.                 </div>
  470.                 <br style="clear:both; "/>
  471.             </div>
  472.             <div id="awesomePeople" class="awesome">
  473.                 <h1>Awesome People</h1>
  474.                 <div class="person">
  475.                     <div class="bg" style="background-image:url(http://i.imgur.com/EeFK6Pn.png);"></div>
  476.                     <div class="info">
  477.                         <div class="avatar" style="background-image:url(http://i.imgur.com/I7MTJEm.png);"></div>
  478.                         <h3>Kang Dae Sung</h3>
  479.                         <h6>Big Bang</h6>
  480.                         <a href="/tagged/daesung"><div class="follow">#daesung</div></a>
  481.                         <br style="clear:both; "/>
  482.                         <div class="l"><strong>70%</strong> sexy</div>
  483.                         <div class="r"><strong>30%</strong> funny</div>
  484.                         <br style="clear:both; "/>
  485.                     </div>
  486.                 </div>
  487.  
  488.                 <div class="person">
  489.                     <div class="bg" style="background-image:url(http://i.imgur.com/qtiXGZZ.png);"></div>
  490.                     <div class="info">
  491.                         <div class="avatar" style="background-image:url(http://i.imgur.com/EOmqDbc.png);"></div>
  492.                         <h3>Song Min Ho</h3>
  493.                         <h6>WINNER</h6>
  494.                         <a href="/tagged/mino"><div class="follow">#mino</div></a>
  495.                         <br style="clear:both; "/>
  496.                         <div class="l"><strong>80%</strong> naughty</div>
  497.                         <div class="r"><strong>20%</strong> clown</div>
  498.                         <br style="clear:both; "/>
  499.                     </div>
  500.                 </div>
  501.  
  502.                 <div class="person">
  503.                     <div class="bg" style="background-image:url(http://i.imgur.com/Gejw2MC.png);"></div>
  504.                     <div class="info">
  505.                         <div class="avatar" style="background-image:url(http://i.imgur.com/8WZZ9pb.png);"></div>
  506.                         <h3>Park Jae Bom</h3>
  507.                         <h6>Rapper</h6>
  508.                         <a href="/tagged/jay-park"><div class="follow">#jay park</div></a>
  509.                         <br style="clear:both; "/>
  510.                         <div class="l"><strong>100%</strong> bad boy</div>
  511.                         <div class="r"><strong>100%</strong> hot</div>
  512.                         <br style="clear:both; "/>
  513.                     </div>
  514.                 </div>
  515.  
  516.                 <div class="person">
  517.                     <div class="bg" style="background-image:url(http://i.imgur.com/vXUeyKa.png);"></div>
  518.                     <div class="info">
  519.                         <div class="avatar" style="background-image:url(http://i.imgur.com/nIa2MjU.png);"></div>
  520.                         <h3>Lee Hong Ki</h3>
  521.                         <h6>FT Island</h6>
  522.                         <a href="/tagged/hongki"><div class="follow">#hongki</div></a>
  523.                         <br style="clear:both; "/>
  524.                         <div class="l"><strong>90%</strong> rock 'n roll</div>
  525.                         <div class="r"><strong>10%</strong> crazy</div>
  526.                         <br style="clear:both; "/>
  527.                     </div>
  528.                 </div>
  529.  
  530.                 <div class="person">
  531.                     <div class="bg" style="background-image:url(http://i.imgur.com/nbP1zXE.png);"></div>
  532.                     <div class="info">
  533.                         <div class="avatar" style="background-image:url(http://i.imgur.com/V4h3aOF.png);"></div>
  534.                         <h3>Lee Ye Jin</h3>
  535.                         <h6>Singer</h6>
  536.                         <a href="/tagged/ailee"><div class="follow">#ailee</div></a>
  537.                         <br style="clear:both; "/>
  538.                         <div class="l"><strong>100%</strong> diva</div>
  539.                         <div class="r"><strong>100%</strong> cute</div>
  540.                         <br style="clear:both; "/>
  541.                     </div>
  542.                 </div>
  543.  
  544.                 <div class="person">
  545.                     <div class="bg" style="background-image:url(http://i.imgur.com/QZxfB9f.png);"></div>
  546.                     <div class="info">
  547.                         <div class="avatar" style="background-image:url(http://i.imgur.com/1HlTszr.png);"></div>
  548.                         <h3>Lee Chae Rin</h3>
  549.                         <h6>2NE1</h6>
  550.                         <a href="/tagged/cl"><div class="follow">#cl</div></a>
  551.                         <br style="clear:both; "/>
  552.                         <div class="l"><strong>90%</strong> bad girl</div>
  553.                         <div class="r"><strong>10%</strong> sweet</div>
  554.                         <br style="clear:both; "/>
  555.                     </div>
  556.                 </div>
  557.  
  558.             </div>
  559.  
  560.             <div id="gtkm" class="awesome">
  561.                 <h1>Get to know me</h1>
  562.                 <div class="person">
  563.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  564.                     <div class="info">
  565.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  566.                         <h3>Movies</h3>
  567.                         <h6>&nbsp;</h6>
  568.                         <a href="/tagged/gtkm:movies"><div class="follow">#gtkm:movies</div></a>
  569.                         <br style="clear:both; "/>
  570.                         <div class="l"><strong>0%</strong> done</div>
  571.                         <div class="r"><strong>0</strong> of 5</div>
  572.                         <br style="clear:both; "/>
  573.                     </div>
  574.                 </div>
  575.  
  576.                 <div class="person">
  577.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  578.                     <div class="info">
  579.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  580.                         <h3>TV Shows</h3>
  581.                         <h6>&nbsp;</h6>
  582.                         <a href="#"><div class="follow">#gtkm:tv</div></a>
  583.                         <br style="clear:both; "/>
  584.                         <div class="l"><strong>0%</strong> done</div>
  585.                         <div class="r"><strong>0</strong> of 5</div>
  586.                         <br style="clear:both; "/>
  587.                     </div>
  588.                 </div>
  589.  
  590.                 <div class="person">
  591.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  592.                     <div class="info">
  593.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  594.                         <h3>Female Characters</h3>
  595.                         <h6>&nbsp;</h6>
  596.                         <a href="#"><div class="follow">#gtkm:female char</div></a>
  597.                         <br style="clear:both; "/>
  598.                         <div class="l"><strong>0%</strong> done</div>
  599.                         <div class="r"><strong>0</strong> of 5</div>
  600.                         <br style="clear:both; "/>
  601.                     </div>
  602.                 </div>
  603.  
  604.                 <div class="person">
  605.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  606.                     <div class="info">
  607.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  608.                         <h3>Male Characters</h3>
  609.                         <h6>&nbsp;</h6>
  610.                         <a href="#"><div class="follow">#gtkm:male char</div></a>
  611.                         <br style="clear:both; "/>
  612.                         <div class="l"><strong>0%</strong> done</div>
  613.                         <div class="r"><strong>0</strong> of 5</div>
  614.                         <br style="clear:both; "/>
  615.                     </div>
  616.                 </div>
  617.  
  618.                 <div class="person">
  619.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  620.                     <div class="info">
  621.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  622.                         <h3>OTPs</h3>
  623.                         <h6>&nbsp;</h6>
  624.                         <a href="#"><div class="follow">#gtkm:otp</div></a>
  625.                         <br style="clear:both; "/>
  626.                         <div class="l"><strong>0%</strong> done</div>
  627.                         <div class="r"><strong>0</strong> of 5</div>
  628.                         <br style="clear:both; "/>
  629.                     </div>
  630.                 </div>
  631.  
  632.                 <div class="person">
  633.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  634.                     <div class="info">
  635.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  636.                         <h3>Actors</h3>
  637.                         <h6>&nbsp;</h6>
  638.                         <a href="#"><div class="follow">#gtkm:actor</div></a>
  639.                         <br style="clear:both; "/>
  640.                         <div class="l"><strong>0%</strong> done</div>
  641.                         <div class="r"><strong>0</strong> of 5</div>
  642.                         <br style="clear:both; "/>
  643.                     </div>
  644.                 </div>
  645.  
  646.                 <div class="person">
  647.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  648.                     <div class="info">
  649.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  650.                         <h3>Actresses</h3>
  651.                         <h6>&nbsp;</h6>
  652.                         <a href="#"><div class="follow">#gtkm:actress</div></a>
  653.                         <br style="clear:both; "/>
  654.                         <div class="l"><strong>0%</strong> done</div>
  655.                         <div class="r"><strong>0</strong> of 5</div>
  656.                         <br style="clear:both; "/>
  657.                     </div>
  658.                 </div>
  659.  
  660.                 <div class="person">
  661.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  662.                     <div class="info">
  663.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  664.                         <h3>Female Groups</h3>
  665.                         <h6>&nbsp;</h6>
  666.                         <a href="#"><div class="follow">#gtkm:female group</div></a>
  667.                         <br style="clear:both; "/>
  668.                         <div class="l"><strong>0%</strong> done</div>
  669.                         <div class="r"><strong>0</strong> of 5</div>
  670.                         <br style="clear:both; "/>
  671.                     </div>
  672.                 </div>
  673.  
  674.                 <div class="person">
  675.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  676.                     <div class="info">
  677.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  678.                         <h3>Male Groups</h3>
  679.                         <h6>&nbsp;</h6>
  680.                         <a href="#"><div class="follow">#gtkm:male group</div></a>
  681.                         <br style="clear:both; "/>
  682.                         <div class="l"><strong>0%</strong> done</div>
  683.                         <div class="r"><strong>0</strong> of 5</div>
  684.                         <br style="clear:both; "/>
  685.                     </div>
  686.                 </div>
  687.  
  688.                 <div class="person">
  689.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  690.                     <div class="info">
  691.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  692.                         <h3>Female Singer</h3>
  693.                         <h6>&nbsp;</h6>
  694.                         <a href="#"><div class="follow">#gtkm:female singer</div></a>
  695.                         <br style="clear:both; "/>
  696.                         <div class="l"><strong>0%</strong> done</div>
  697.                         <div class="r"><strong>0</strong> of 5</div>
  698.                         <br style="clear:both; "/>
  699.                     </div>
  700.                 </div>
  701.  
  702.                 <div class="person">
  703.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  704.                     <div class="info">
  705.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  706.                         <h3>Male Singer</h3>
  707.                         <h6>&nbsp;</h6>
  708.                         <a href="#"><div class="follow">#gtkm:male singer</div></a>
  709.                         <br style="clear:both; "/>
  710.                         <div class="l"><strong>0%</strong> done</div>
  711.                         <div class="r"><strong>0</strong> of 5</div>
  712.                         <br style="clear:both; "/>
  713.                     </div>
  714.                 </div>
  715.  
  716.                 <div class="person">
  717.                     <div class="bg" style="background-image:url(http://33.media.tumblr.com/ed18d413c9f49633f70d30db39c40c3f/tumblr_ndpu10FPc61sjzz2co1_500.png);"></div>
  718.                     <div class="info">
  719.                         <div class="avatar" style="background-image:url(http://38.media.tumblr.com/e8dad277bd646268406ef7cdd64d7e79/tumblr_ndegdc2TBh1sjzz2co4_250.png);"></div>
  720.                         <h3>MVs</h3>
  721.                         <h6>&nbsp;</h6>
  722.                         <a href="#"><div class="follow">#gtkm:mv</div></a>
  723.                         <br style="clear:both; "/>
  724.                         <div class="l"><strong>0%</strong> done</div>
  725.                         <div class="r"><strong>0</strong> of 5</div>
  726.                         <br style="clear:both; "/>
  727.                     </div>
  728.                 </div>
  729.  
  730.             </div>
  731.            
  732.             {block:Following}
  733.             <div id="following" class="awesome">
  734.                 <h1>Blogroll</h1>
  735.                
  736.                 <div id="followed">
  737.                 {block:Followed}
  738.                 <a href="{FollowedURL}" target="_blank">
  739.                 <div class="person">
  740.                     <div class="info">
  741.                         <div class="avatar" style="background-image:url({FollowedPortraitURL-40});"></div>
  742.                         <h3>{FollowedName}</h3>
  743.                         <h6>{FollowedURL}</h6>
  744.                     </div>
  745.                 </div>
  746.                 </a>
  747.                 {/block:Followed}
  748.                 </div>
  749.                
  750.             </div>
  751.             {/block:Following}
  752.            
  753.         </div>
  754.         <div id="tata"><a href="http://tanharu.tumblr.com/">&#7789;</a></div>
  755.     </body>
  756. </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!