Advertisement
abv2

Navigation page/Theme page

Sep 19th, 2016
272
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.12 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <head>
  3.  
  4.  <!---
  5.  
  6.  
  7.  
  8.  
  9.                             THEME BY TWO-DAMES.TUMBLR.COM
  10.                         KINDLY DO NOT STEAL OR REMOVE CREDIT!!!
  11.                                   MUCH OBLIGED!!!
  12.                                  
  13.                                  
  14.                                  
  15. --->
  16.  
  17. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  18.  <title>{Title}</title>
  19.  
  20.  
  21. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  22. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  23.  
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Caveat+Brush|Rationale|Yantramanav" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:500,500i,700&subset=latin-ext" rel="stylesheet">
  27. <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:500,500i&subset=latin-ext" rel="stylesheet">
  28.  
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  30.  
  31. <!-- title effect from http://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/. box effect from http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/-->
  32.  
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:60,
  39. tip_fade_speed:300,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45. <!--basic tooltip from tutorial-baby! Enjoy-->
  46. <style>
  47. .tooltip{
  48.     display: inline;
  49.     position: relative;
  50. }
  51.  
  52. #s-m-t-tooltip {
  53. max-width:300px; /*how big the tooltip can be at most*/
  54. border-radius: 0px; /*change your border radius*/
  55. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  56. margin:20px 7px -2px 20px; /*distance from word*/
  57. background-color:#ffffff; /*background color*/
  58.   border:1px solid #E0E0E0; /*border info*/
  59.   font-family:alegreya sans sc; /*tooltip font*/
  60.   font-weight:bold;
  61. font-size:9px; /*tooltip font size*/
  62. letter-spacing:1px; /*tooltip letter spacing*/
  63. text-transform:uppercase; /*makes the tooltip title uppercase*/
  64. color:#000; /*tooltip font color*/
  65. z-index:999999999999999999999999999999999999;
  66.  
  67.  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1)    inset;
  68.  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  69.   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  70.   word-wrap: break-word;
  71. }
  72. </style>
  73.  
  74. <!---end tooltip--->
  75.  
  76.  
  77.  
  78. <link rel="shortcut icon" href="{Favicon}" />
  79. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  80.  
  81.     <style type="text/css">
  82.    
  83.    
  84.    /*selection*/
  85. ::selection {background-color:#44E3E3;color:black;text-shadow:none;}
  86. ::-moz-selection {background-color:#44E3E3;color:black;text-shadow:none;}
  87. ::-o-selection {background-color:#44E3E3;color:black;text-shadow:none;}
  88.  /*--scrollbar--*/
  89. ::-webkit-scrollbar {width: 9px; height: 9px; background: #fff;}
  90. ::-webkit-scrollbar-thumb {background-color:#44E3E3 ; border: 1px solid #ccc;}
  91.    /*--body--*/
  92.  
  93.    
  94. body {
  95.     background-color:#fff ;
  96.     background-image: url('http://24.media.tumblr.com/tumblr_lse24oPUko1r462w4o1_1280.png');
  97.     background-repeat:no-repeat;
  98.     background-attachment:fixed;
  99.     background-size:100% 100%;
  100.     font-family: 'Oxygen';
  101.     font-size: 13px;
  102.     color: {color:Text color};
  103. }
  104.  
  105. a {
  106.     text-decoration:none;
  107.     color:{color:link color};
  108.     -webkit-transition: all 0.5s ease;
  109.     -moz-transition: all 0.5s ease;
  110.     -o-transition: all 0.5s ease;
  111. }
  112.  
  113. a:hover {color:{color:text color};}
  114.  
  115. b, strong {text-transform:bold;}
  116. i, em { text-transform:italic;}
  117. h2, h3, h4 {font-family: 'Yantramanav';}  /*BOX TITLE'S FONT*/
  118. uppercase{text-decoration:underline;}
  119.    
  120.  
  121.    
  122.     /*CONTAINER*/
  123.    
  124. #everything {
  125. margin-left:50px;
  126. margin-top:100px;
  127. margin-bottom:20px;
  128. }
  129.    
  130.     /*--title--*/
  131.    
  132.     #title {
  133.         WIDTH:auto;
  134.     font-family:'Caveat brush';
  135.     font-size:80px;
  136.     margin-top:-67px;
  137.     margin-left:30%;
  138.     float:center;
  139.     color:#000;
  140.     letter-spacing:1px;
  141.     }
  142.    
  143.     /*--sidebar links--*/
  144.    
  145.     #links {
  146.     width:150px;
  147.     font-family:'alegreya sans sc';
  148.     text-transform:uppercase;
  149.     text-align:center;
  150.     margin-top:20px;
  151.     margin-left:39%;
  152.     margin-bottom:20px;
  153.     }
  154.    
  155.     #links a {
  156.     padding:3px;
  157.     font-size:12px;
  158.     color:#000;
  159.     -webkit-transition: all 0.4s ease-in-out;
  160.     -moz-transition: all 0.4s ease-in-out;
  161.     -o-transition: all 0.4s ease-in-out;
  162.     -ms-transition: all 0.4s ease-in-out;
  163.     transition: all 0.4s ease-in-out;
  164.     }
  165.    
  166.     #links a:hover {
  167.     color:#fff;
  168.     background-color:#000;
  169.     }
  170.  
  171. /* boxes */
  172.    
  173. .view {
  174.    width: 300px;
  175.    height: 200px;
  176.    margin: 20px;
  177.    float: left;
  178.    border: 10px solid #fff;
  179.    overflow: hidden;
  180.    position: relative;
  181.    text-align: center;
  182.    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  183.    -moz-box-shadow: 1px 1px 2px #e6e6e6;
  184.    box-shadow: 1px 1px 2px #e6e6e6;
  185.    background-color:#fff;
  186. }
  187. .view .mask,.view .content {
  188.    width: 300px;
  189.    height: 200px;
  190.    position: absolute;
  191.    overflow: hidden;
  192.    top: 0;
  193.    left: 0;
  194. }
  195. .view img {
  196.    display: block;
  197.    position: relative;
  198.    width:300px;
  199.    height:200px;
  200.    repeat:no-repeat;
  201. }
  202. .view h2 {
  203.    text-transform: uppercase;
  204.    color: #fff;
  205.    text-align: center;
  206.    position: relative;
  207.    font-size: 17px;
  208.    padding: 10px;
  209.    background: rgba(0, 0, 0, 0.8);
  210.    margin: 20px 0 0 0;
  211. }
  212. .view p {
  213.    font-family: Alegreya sans sc, sans-serif;
  214.    font-style: italic;
  215.    font-size: 14px;
  216.    position: relative;
  217.    min-height:auto;
  218.    max-height:50px;
  219.    overflow-y:auto;
  220.    overflow-x:hidden;
  221.    color: #fff;
  222.    padding: 5px 20px 20px;
  223.    text-align: center;
  224. }
  225.  
  226. .view p a{
  227.      font-family: Alegreya sans sc, sans-serif;
  228.    font-style: italic;
  229.    font-size: 14px;
  230.    position: relative;
  231.    color: #fff;
  232.    padding: 10px 20px 20px;
  233.    text-align: center;
  234. }
  235.  
  236. .view p a:hover{
  237.     letter-spacing:2px;
  238. }
  239.  
  240. .view a.info {
  241.     font-family:alegreya sans sc;
  242.    display: inline-block;
  243.    text-decoration: none;
  244.    padding: 7px 14px;
  245.    background: #000;
  246.    color: #fff;
  247.    text-transform: uppercase;
  248.    -webkit-box-shadow: 0 0 1px #000;
  249.    -moz-box-shadow: 0 0 1px #000;
  250.    box-shadow: 0 0 1px #000;
  251. }
  252. .view a.info: hover {
  253.    -webkit-box-shadow: 0 0 5px #000;
  254.    -moz-box-shadow: 0 0 5px #000;
  255.    box-shadow: 0 0 5px #000;
  256. }
  257.  
  258. .view-third img {
  259.    -webkit-transition: all 0.2s ease-in;
  260.    -moz-transition: all 0.2s ease-in;
  261.    -o-transition: all 0.2s ease-in;
  262.    -ms-transition: all 0.2s ease-in;
  263.    transition: all 0.2s ease-in;
  264. }
  265. .view-third .mask {
  266.    background-color: rgba(0,0,0,0.7);
  267.    
  268.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;-webkit-transform: translate(460px, -100px) rotate(180deg);-moz-transform: translate(460px, -100px) rotate(180deg);-o-transform: translate(460px, -100px) rotate(180deg);-ms-transform: translate(460px, -100px) rotate(180deg);transform: translate(460px, -100px) rotate(180deg);-webkit-transition: all 0.2s 0.4s ease-in-out;-moz-transition: all 0.2s 0.4s ease-in-out;-o-transition: all 0.2s 0.4s ease-in-out;-ms-transition: all 0.2s 0.4s ease-in-out;transition: all 0.2s 0.4s ease-in-out;}
  269.  
  270.     .view-third h2 {-webkit-transform: translateY(-100px);-moz-transform: translateY(-100px);-o-transform: translateY(-100px);-ms-transform: translateY(-100px);transform: translateY(-100px);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
  271.  
  272.     .view-third p {-webkit-transform: translateX(300px) rotate(90deg);-moz-transform: translateX(300px) rotate(90deg);-o-transform: translateX(300px) rotate(90deg);-ms-transform: translateX(300px) rotate(90deg);transform: translateX(300px) rotate(90deg);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
  273.  
  274.     .view-third a.info {-webkit-transform: translateY(-200px);-moz-transform: translateY(-200px);-o-transform: translateY(-200px);-ms-transform: translateY(-200px);transform: translateY(-200px);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
  275.  
  276.     .view-third:hover .mask {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition-delay: 0s;-moz-transition-delay: 0s;-o-transition-delay: 0s;-ms-transition-delay: 0s;transition-delay: 0s;-webkit-transform: translate(0px, 0px);-moz-transform: translate(0px, 0px);-o-transform: translate(0px, 0px);-ms-transform: translate(0px, 0px);transform: translate(0px, 0px);}
  277.  
  278.     .view-third:hover h2 {-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.5s;transition-delay: 0.5s;}
  279.  
  280.     .view-third:hover p {-webkit-transform: translateX(0px) rotate(0deg);-moz-transform: translateX(0px) rotate(0deg);-o-transform: translateX(0px) rotate(0deg);-ms-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay: 0.4s;}
  281.    
  282.     .view-third:hover a.info {-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-o-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition-delay: 0.3s;-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay: 0.3s;}
  283.    
  284. /* TITLE EFFECT */
  285.  
  286.     .link--surinami {font-weight: 400;text-transform: uppercase;font-size: 9em;color: #3A4945;padding: 0 0 0.125em;
  287. }
  288.     .link--surinami::before,.link--surinami::after {
  289.        
  290.         background: #fff; /*  <--BORDER COLOR   */
  291.        
  292. content: '';width: 100%;height: 3px;z-index: -1;position: absolute;-webkit-transform: scale3d(0,1,1);transform: scale3d(0,1,1);-webkit-transition: -webkit-transform 0.5s;transition: transform 0.5s;
  293. }
  294.     .link--surinami::before {right: 0;top: 0;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;}
  295.    
  296.     .link--surinami::after {left: 0;bottom: 0;-webkit-transform-origin: 0 50%;transform-origin: 0 50%;}
  297.  
  298.     .link--surinami:hover::before,.link--surinami:hover::after {-webkit-transform: scale3d(1,1,1);transform: scale3d(1,1,1);}
  299.  
  300.     .link--surinami span {position: relative;-webkit-transition: color 0.5s;transition: color 0.5s;}
  301.  
  302.     .link--surinami:hover span {color: transparent;}
  303.  
  304.     .link--surinami span::before,.link--surinami span::after {position: absolute;color: #fff;opacity: 0;-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;transition: transform 0.5s, opacity 0.5s;}
  305.  
  306.     .link--surinami span::before {content: attr(data-letters-l);left: 0;-webkit-transform: translate3d(-5px,0,0);transform: translate3d(-5px,0,0);}
  307.  
  308.     .link--surinami span::after {content: attr(data-letters-r);right: 0;-webkit-transform: translate3d(5px,0,0);transform: translate3d(5px,0,0);}
  309.  
  310.     .link--surinami:hover span::before,.link--surinami:hover span::after {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  311.     .link {outline: none;text-decoration: none;position: relative;font-size: 8em;line-height: 1;color: #fff;display: inline-block;}    
  312.  
  313. /*CREDIT, KINDLY DO NOT REMOVE!!!*/
  314.  
  315. .tooltip a{color:#ff4141; text-decoration:none;}
  316. .tooltip {text-align:center;font-size:12px;background:#fff; bottom:5px; right:4px; position: fixed;display: inline-block;z-index:99999999;text-decoration:none;padding-left:2px;padding-right:2px;padding-top:4px;padding-bottom:0px;width:17px;height:17px;float:right;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:1px solid #ccc;-moz-box-shadow: 0 5px #888;-webkit-box-shadow: 0 0 5px #888;box-shadow: 0 0 5px #888;}.tooltip a:hover{color:#000;}
  317. .tooltip .tooltiptext {font-family:Alegreya sans sc; font-weight:500;letter-spacing:1px; font-size:9px;visibility: hidden;width: 50px;background-color: rgba(0,0,0,0.8);color: #fff;text-align: center;border-radius: 2px;border:1px solid #ff4141;padding: 5px 5px;position: absolute;z-index: 1;top: -20px;right: 150%; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */opacity: 0;transition: opacity 1s;font-size:10px;line-height:10px;}
  318. .tooltip:hover .tooltiptext {visibility: visible;opacity: 1;}
  319. .tooltip .tooltiptext::after {content: " ";position: absolute;top: 50%;left: 100%; /* To the right of the tooltip */margin-top: -5px;border-width: 5px; border-style: solid;border-color: transparent transparent transparent #ff4141;}
  320.  
  321. /*CREDIT END, KINDLY DO NOT REMOVE!!!*/
  322.        
  323.     </style>
  324.     </head>
  325.    
  326. <body>
  327.  
  328. <div id="everything">
  329.  
  330. <div id="title" class="link link--surinami" data-letters="The place where magic happens">THEME PAGE</div>
  331.  
  332. <div id="links">
  333. <a href="/">HOME</a>
  334. <a href="/ask">ASK</a>
  335. <a href="/archive">Archive</a>
  336. </div>
  337.  
  338. <!-- IF YOU NEED MORE BOXES, COPY
  339.  
  340. <div class="view view-third">  
  341.      <img src=""/>  
  342.      <div class="mask">  
  343.      <h2>Title</h2>  
  344.      <p><a href="/">Preview</a><br>
  345.         <a href="/">Code</a></p>  
  346.          <a href="/tagged/" class="info">Read More</a>  
  347.      </div>  
  348. </div>
  349.  
  350. AND ADD THE IMAGE, LINKS ETC.-->
  351.  
  352.  
  353. <div class="view view-third">  
  354.      <img src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/04/10.png" style=""/>  
  355.      <div class="mask">  
  356.      <h2> A Theme Title, yo</h2>  
  357.      <p><a href="/">Preview</a><br>
  358. <a href="/ask">Code</a></p>  
  359.          <a href="/tagged/" class="info">Read More</a>  
  360.      </div>  
  361. </div>  
  362.  
  363. <div class="view view-third">  
  364.      <img src="http://designmodo.com/wp-content/uploads/2011/09/270.jpg" />  
  365.      <div class="mask">  
  366.      <h2>Title</h2>  
  367.      <p>All right," said Susan. "I'm not stupid. You're saying humans need... fantasies to make life bearable." REALLY? AS IF IT WAS SOME KIND OF PINK PILL? NO. HUMANS NEED FANTASY TO BE HUMAN. TO BE THE PLACE WHERE THE FALLING ANGEL MEETS THE RISING APE. "Tooth fairies? Hogfathers? Little—" YES. AS PRACTICE. YOU HAVE TO START OUT LEARNING TO BELIEVE THE LITTLE LIES. "So we can believe the big ones?" YES. JUSTICE. MERCY. DUTY. THAT SORT OF THING. "They're not the same at all!" YOU THINK SO? THEN TAKE THE UNIVERSE AND GRIND IT DOWN TO THE FINEST POWDER AND SIEVE IT THROUGH THE FINEST SIEVE AND THEN SHOW ME ONE ATOM OF JUSTICE, ONE MOLECULE OF MERCY. AND YET—Death waved a hand. AND YET YOU ACT AS IF THERE IS SOME IDEAL ORDER IN THE WORLD, AS IF THERE IS SOME...SOME RIGHTNESS IN THE UNIVERSE BY WHICH IT MAY BE JUDGED. "Yes, but people have got to believe that, or what's the point—" MY POINT EXACTLY.”</p>  
  368.         <a href="/tagged/" class="info">Read More</a>  
  369.     </div>  
  370. </div>  
  371.  
  372. <div class="view view-third">  
  373.     <img src="https://s-media-cache-ak0.pinimg.com/564x/19/4a/23/194a236512296f80380502f87d2554f9.jpg" />  
  374.     <div class="mask">  
  375.     <h2>Title</h2>  
  376.     <p>Your Text</p>  
  377.         <a href="/tagged/" class="info">Read More</a>  
  378.     </div>  
  379. </div>  
  380.  
  381. <div class="view view-third">  
  382.     <img src="http://hdqwalls.com/wallpapers/thumb/cat-minimalist-hd.jpg" />  
  383.     <div class="mask">  
  384.     <h2>Title</h2>  
  385.     <p>Your Text</p>  
  386.         <a href="/tagged/" class="info">Read More</a>  
  387.     </div>  
  388. </div>  
  389.  
  390. <div class="view view-third">  
  391.     <img src="http://graphicdesignjunction.com/wp-content/uploads/2013/03/minimal+wallpapers+72.jpg" />  
  392.     <div class="mask">  
  393.     <h2>Title</h2>  
  394.     <p>Your Text</p>  
  395.         <a href="/tagged/" class="info">Read More</a>  
  396.     </div>  
  397. </div>  
  398.  
  399. <div class="view view-third">  
  400.     <img src="http://cdn.tripwiremagazine.com/wp-content/uploads/2011/04/6.png" />  
  401.     <div class="mask">  
  402.     <h2>Title</h2>  
  403.     <p>Your Text</p>  
  404.         <a href="/tagged/" class="info">Read More</a>  
  405.     </div>  
  406. </div>  
  407.  
  408. <div class="view view-third">  
  409.     <img src="http://graphicdesignjunction.com/wp-content/uploads/2013/03/minimal+wallpapers+79.jpg" />  
  410.     <div class="mask">  
  411.     <h2>Title</h2>  
  412.     <p>Your Text</p>  
  413.         <a href="/tagged/" class="info">Read More</a>  
  414.     </div>  
  415. </div>  
  416.  
  417. <div class="view view-third">  
  418.     <img src="http://www.icanbecreative.com/res/freeweb/2011/04/batman-540x337.png" />  
  419.     <div class="mask">  
  420.     <h2>Title</h2>  
  421.     <p>Your Text</p>  
  422.         <a href="/tagged/" class="info">Read More</a>  
  423.     </div>  
  424. </div>  
  425.  
  426. <div class="view view-third">  
  427.     <img src="http://graphicdesignjunction.com/wp-content/uploads/2013/03/minimal+wallpapers+02.jpg" />  
  428.     <div class="mask">  
  429.     <h2>Title</h2>  
  430.     <p>Your Text</p>  
  431.         <a href="/tagged/" class="info">Read More</a>  
  432.     </div>  
  433. </div>  
  434.  
  435. <div class="view view-third">  
  436.     <img src="https://s-media-cache-ak0.pinimg.com/736x/07/93/74/07937476510264962d1e815d50fa6c34.jpg" />  
  437.     <div class="mask">  
  438.     <h2>Title</h2>  
  439.     <p>Your Text</p>  
  440.         <a href="/tagged/" class="info">Read More</a>  
  441.     </div>  
  442. </div>  
  443.  
  444. <div class="view view-third">  
  445.     <img src="http://artatm.com/wp-content/uploads/2013/03/airplane.jpg" />  
  446.     <div class="mask">  
  447.     <h2>Title</h2>  
  448.     <p>Your Text</p>  
  449.         <a href="/tagged/" class="info">Read More</a>  
  450.     </div>  
  451. </div>  
  452.  
  453.  
  454.  
  455. </div>
  456.  
  457. <div class="tooltip"><a href="http://two-dames.tumblr.com/"><i class="fa fa-coffee" aria-hidden="true"></i></a><span class="tooltiptext">Theme by Two-Dames</span></div>
  458. </body>
  459. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement