socials #01 - lune

<!DOCTYPE html>
<head>

<!--
                     LUNE
                                socials page by @almacodes


                        please leave the credit intact,
                         & enjoy this page!!

                any customization/troubleshooting asks
                    can be answered @almacodes


 -->


<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<title> links </title>

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Source+Sans+Pro" rel="stylesheet">

<script src="https://use.fontawesome.com/5bbeb6aba5.js"></script>
<link rel="stylesheet" href="http://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">

<style type="text/css">

.tmblr-iframe { display:none; } /*hides tumblr controls*/


body {
font-family:'Source Sans Pro', sans-serif;
background:#fff; /* page bg color */
color:#555; /* text color */
cursor:default;
font-size:11px;
line-height:15px;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased; }

a {
color:#000; /* header icon color */
cursor:copy;
text-decoration:none;
transition:all .4s ease;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;}

a:hover { text-decoration:none; transition:all .4s ease; -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;
color:#f7b9ce;  /* header icon hover */
}

/* scrollbar */
::-webkit-scrollbar{height:3px;width:2px;background:inherit;}
::-webkit-scrollbar-thumb {background-color:#f7b9ce;}
::-webkit-scrollbar-track {background:inherit;}
  #s-m-t-tooltip{ position:absolute;font-family:calibri;margin:10px;font-size:9px;color:#444;max-width:250px;text-transform:uppercase;letter-spacing:1px;z-index:999999999999;background:#fff;border:1px solid #eee;padding:2px 5px 2px 5px;  }


/* header */
.head { width:300px; /* header width */
margin:70px auto; padding:15px; background-color:#fafafa;border-radius:7px;

border-bottom:2px solid #f7b9ce; /* header border color */}

.head b { font-weight:bold;  font-size:14px;border-bottom:2px solid #f7b9ce;width:500px; margin:10px;font-family:inconsolata;}

.head p { margin:10px 10px 10px; }
.head a { font-size:14px;margin:0px 30px 0px 10px;}

 /* link boxes */

 .box { width:330px; /* [header width] + 30 = box width */
 margin:80px auto 70px;height:150px;}
.box img {width:100%;border-radius:7px;height:150px;background-color:#fafafa;

border-bottom:3px solid #f7b9ce; /* image border color */

object-fit:cover; object-position: 0 50%;}
.box img { opacity:1; display:block; width:100%; transition:.5s ease; backface-visibility:hidden;}
.title { transition: .5s ease;  opacity: 0.7;position: relative;margin-top:-75px;left: 50%;max-width:35%;transform: translate(-50%, -50%);text-align:center;line-height:16px;}
.box:hover img { opacity: 0.3;}
.box:hover .title { opacity: 0; transition: .3s ease;}
.box:hover .back {opacity:0.7; transition: .3s ease;}
.text { background-color:white;color:black;font-size:16px;padding:16px;font-family:inconsolata;}
 .back { transition: .5s ease;opacity: 0;position: relative; margin-top:-50px;  left: 50%;width:35%;transform: translate(-50%, -50%);text-align: center;  }
 .w { background-color: white;color: black;font-size: 11px;padding: 16px }

</style>
</head>
<body>

<!-- header -->

<div class="head">

  <b> socials </b><br>
 <p>
 few things to note: 1. try to pick images where the focal point is in the vertical center, 2. keep titles to one word, 3. enjoy! :-)
</p>
<!-- header icon links -->
<a href="/" title="blog"><i class="pe-7s-home"></i></a>
<a href="/ask" title="ask"><i class="pe-7s-mail"></i> </a>
<a href="http://tumblr.com" title="dash"><i class="pe-7s-keypad"></i></a>
<!-- do not remove this link! -->
<a href="http://almacodes.tumblr.com" title="theme"><i class="pe-7s-light"></i></a>
</div>


<!-- begin boxes -->

<div class="box">
    <a href="your url here">
        <img src="image url here">

    <div class="title">
        <div class="text">title</div>
    </div>
    <div class="back">
        <div class="w">here's a quick description of this link, visible when you hover over the box.</div>
    </div> </a>
</div>


<!-- to add more boxes, copy this section and paste beneath the last </div> from the previous box -->

        <div class="box">
          <a href="your url here">
             <img src="image url here">

         <div class="title">
              <div class="text">title</div>
          </div>
         <div class="back">
             <div class="w">here's a quick description of this link, visible when you hover over the box.</div>
            </div> </a>
        </div>


<!-- end boxes -->

<!-- scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>
<nym class="nm"><a href="http://almacodes.tumblr.com" class="span" title="theme &copy">A</a></nym>
<link rel="stylesheet" href="https://static.tumblr.com/xqlpltm/stvpohgnd/cielo.css">
</body>
</html>