Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
​
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
​
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
​
<meta charset="utf-8">
​
<title>Untitled Document</title>
​
<link href="CSS/layout.css" rel="stylesheet" type="text/css" />
​
</head>
​
<body>
​
<div id="wrapper">
​
<div id="nav">
    
    <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="#">Portfolio</a>
            
            <ul>
                
                <li><a href="#">Animation</a></li>
                <li><a href="#">Illustration</a></li>
            
            </ul>
        
        </li>
        
        </ul>
        
                  <center>
  <a href="index.html" class="logo" title="Home"><span class="displace"></span></a>
  </center>
        
        </div>
  
  <center><div id="body">
    
   <div class="view view-first">  
     
     <img src="http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/image_test_zps7774cc5b.gif" />
     <div class="mask">  
     <h2>Title</h2>  
     <p>Your Text</p>  
     <a href="#" class="info">Play</a>  
    
        </div>
        
        </div>
        
     <div class="view view-first">  
     
     <img src="http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/image_test_zps7774cc5b.gif" />
     <div class="mask">  
     <h2>Title</h2>  
     <p>Your Text</p>  
     <a href="#" class="info">Play</a>  
    
        </div>
        
        </div>
        
       <div class="view view-first">  
     
     <img src="http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/image_test_zps7774cc5b.gif" />
     <div class="mask">  
     <h2>Title</h2>  
     <p>Your Text</p>  
     <a href="#" class="info">Play</a>  
    
        </div>
        
        </div>
        
    
  </div>
  
  </div>
  
  <div id="footer">
  
  <div class="footer_nav">
​
  
  <ul id="main_links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Shop</a></li>
  </ul>
  
  <ul id="social_links">
    <li><a href="#">Twitter</a></li>
    <li><a href="#">LinkedIn</a></li>
    <li><a href="#">Vimeo</a></li>
    <li><a href="#">YouTube</a></li>
  </ul>
  
  </div>
  
  </div>
​
</div>
​
</body>
​
</div>
​
</div>
​
</html>
​
 
/* Overall Body */
​
body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    height: 100%;
}
​
/* Wrapper */
​
#wrapper {
    min-height:100%;
}
​
/* Header */
​
a.logo {
    display: block;
    width: 200px;
    height: 50px;
    top:0;
    left: 50%;
    margin-left: -100px;
    float: left;
    text-decoration: none;
    position: fixed;
    text-align:center;
    background: url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/logo_zps5a460c14.gif);
    z-index: 15000;
}
​
a.logo:hover {
    background-position: -200px 0;
}
​
#displace {
    position: absolute;
    left: -5000px;
}
​
#nav ul {
    background-image: url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/header_zps8d9a3772.gif);
    background-repeat:repeat-x;
    background-position: center;
    padding: 0 20px;  
    list-style: none;
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    position: fixed;
    top: 0;
    margin-top: 0;
    display: inline-table;
    z-index: 10000;
}
​
#nav ul:after {
    content: ""; clear: both; display: block;
}   
​
#nav ul ul {
    display: none;
    width: auto;
}
​
#nav ul li {
    float: left;
}
​
#nav ul li:hover {
    background: #222;
}
​
#nav ul li:hover a {
    color: #fff;
}
​
#nav ul li a {
    display: block; padding: 18px 30px;
    color: #666; text-decoration: none;
}
​
#nav ul ul {
    background: #222; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
​
#nav ul ul li {
    float: none; 
    position: relative;
}
​
#nav ul ul li a {
    padding: 15px 40px;
    color: #333;
}   
​
#nav ul ul li a:hover {
    background-image: url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/footer_dark_zps9b8b1d92.gif);
            }
​
#nav ul li:hover > ul {
    display: block;
}
​
/* Content */
​
#body {
    width: 1200px;
    margin: 80px auto;
    overflow:auto;
    padding-bottom: 170px;
    
}
​
.view {
   width: 360px;
   height: 194px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/image_test_zps7774cc5b.gif) no-repeat center center;
}
.view .mask,.view .content {
   width: 360px;
   height: 194px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
​
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
​
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -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;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -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;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
​
.middle {
    float:left;
    height: 100%;
    width: 380px;
    padding: 10px 0 20px 0;
    margin: 0 10px 0 10px;
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}
​
.right {
    float: left;
    height: 100%;
    width: 380px;
    padding: 10px 0 20px 0;
    margin: 0 10px 0 10px;
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}
​
/* Footer */
​
#footer {
    background-color: #323232;
    background-image: url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/header_zps8d9a3772.gif);
    background-repeat:repeat-x;
    position: relative;
    margin-top: -170px;
    height: 170px;
    width: 100%;
    clear:both;
}
​
.footer_nav {
    padding-left: 20px;
    position: absolute;
}
​
#main_links,#social_links {
    float:left;
    
}
​
/*Main Links*/
​
#main_links {
      width: 200px;
}
 
ul {
  list-style-type: none;
  display:block;
  margin: 0;
  padding: 0;
}
 
#main_links li {
  font: 300 20px/1.5 'Lato', sans-serif;
  border-bottom: 1px solid #666;
}
 
#main_links li a {
  text-decoration: none;
  color: #666;
  display: block;
  width: 200px;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
#main_links li a:hover {
  font-size: 30px;
  color: #ddd;
  background-image:url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/footer_dark_zps9b8b1d92.gif);
}
​
/*Social Links*/
​
#social_links {
      width: 200px;
}
 
#social_links li {
  font: 300 20px/1.5 'Lato', sans-serif;
  border-bottom: 1px solid #666;
​
}
 
#social_links li a {
  text-decoration: none;
  color: #666;
  display: block;
  width: 200px;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
#social_links li a:hover {
  font-size: 30px;
  color: #ddd;
  background-image:url(http://i875.photobucket.com/albums/ab313/jamiepaulsmith/JSBin/footer_dark_zps9b8b1d92.gif);
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers