Insecurities
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
<script src="http://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:0,
tip_fade_speed:0,
attribute:"title"
});
});
})(jQuery);
</script>
</head>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
body {
text-align:justify;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
}
img, iframe {
max-width:100%;
}
/* the tooltips for links */
#s-m-t-tooltip {
padding:5px;
background:#fcd7e4;
color:#fff;
font:9px Consolas;
text-transform:uppercase;
text-align:center;
z-index:1000;
margin:15px;
border-radius:3px;
}
/* the menu and title base */
menu {
position:fixed;
background:#fff;
width:100%;
height:100px;
left:0;
top:-16px;
z-index:9;
}
/* the navigation links */
#main-links {
float:left;
margin:35px;
}
#main-links a {
width:20px;
height:20px;
border-radius:100%;
-moz-border-radius:100%;
-o-border-radius:100%;
-webkit-border-radius:100%;
background:#666;
display:inline-block;
margin-left:5px;
}
/* the page title style */
#title {
font-size:25px;
text-transform:uppercase;
float:right;
font-weight:bold;
font-family:Montserrat;
margin:30px 100px;
color:#e47a8e;
}
/* the content styles */
#content {
margin-top:100px;
display:block;
}
.box {
width:100%;
position:relative;
height:350px;
background-position:center;
background-repeat:no-repeat;
display:block;
}
/* the person explanations styles, delete opacity:0; if you want the descriptions to show up without having to hover over the boxes */
.exp {
position:absolute;
top:25%;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.left {
left:50px;
opacity:0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.right {
right:50px;
opacity:0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
/* the name/title of the person */
.name {
color:#fff;
font-family:Montserrat;
font-size:18px;
text-transform:uppercase;
margin-bottom:5px;
}
/* the description of the person */
.desc {
background:#ffffff;
padding:20px;
font-family:consolas;
font-size:10px;
color:#666;
width:130px;
}
.box:hover .left {
opacity:1;
left:150px;
}
.box:hover .right {
opacity:1;
right:150px;
}
</style>
<body>
<menu>
<!-- the navigation links, do not change the credit to my blog. Change the color of the dots on the background part -->
<div id="main-links">
<a href="/" style="background:#dddfff" title="back to blog"></a>
<a href="/ask" style="background:#fcd7e4" title="ask a question!"></a>
<a href="/archive" style="background:#e0d9ff" title="blog's archive"></a>
<a href="http://41days.org" style="background:#f9ffc8" title="code maker!"></a>
<a href="/" style="background:#ccffc8" title="random link!"></a>
</div>
<!-- the title of the page -->
<div id="title">Insecurities</div>
</menu>
<div id="content">
<!-- the boxes, change the url inside () to change the picture and the background color too. The background of the picture you made have to be the same with the background color -->
<div class="box" style="background-image:url(http://i.imgbox.com/QYlHvbxX.png);background-color:#dddfff">
<div class="exp left">
<div class="name">NAME</div>
<div class="desc">Description</div>
</div>
<!--delete this part if there is only one person or just change the content with additional infos-->
<div class="exp right">
<div class="name">NAME</div>
<div class="desc">DESCRIPTION</div>
</div>
<!--delete only to this part-->
</div>
<!-- copy the box code above under this to add more boxes -->
</div>
</body>
</html> Pasted: Jan 12, 2015, 5:49:14 pm
Views: 103