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>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div class="project">
    <a href="img/projects/a/a6.png" data-lightbox="a" data-title="A* algorithm realization">
        <img class="projim" src="img/projects/a/acover.png" onmouseover="this.src='img/projects/a/a6.png'"  onmouseout="this.src='img/projects/a/acover.png'"/>
    </a>
    <a class="hidden" href="img/projects/a/a1.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a2.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>            
    <a class="hidden" href="img/projects/a/a3.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a4.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a5.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <p class="describing">
        My realization of A* pathfinding algorithm.
    </p>
</div>
​
<div class="project">
    <a href="img/projects/fl/fl1.png" data-lightbox="fl" data-title="Follow the light">
        <img class="projimfl" src="img/projects/fl/flcover.jpg" onmouseover="this.src='img/projects/fl/fl1.png'" onmouseout="this.src='img/projects/fl/flcover.jpg'"/>
    </a>
    <a class="hidden" href="img/projects/fl/fl2.png" data-lightbox="fl" data-title="Follow the light">
    </a>
    <a class="hidden" href="img/projects/fl/fl3.png" data-lightbox="fl" data-title="Follow the light">
    </a>
    <p class="describingfl">
        Very hard game with cute graphics.
        Called "Follow the light".
    </p>
</div>
</body>
</html>
 
*{margin:0; padding:0;}
​
body{
    background-size: overlay;
    background: rgb(72, 158, 136);
}
​
​
.project{
    margin:2% 1% 1% 3%; 
    padding-top: 1em;
    background: #FFF;
    width: 12em;
    height: 19em;
    display: inline-block;
    vertical-align:middle;     /* now change p margin */
    box-shadow: 0 0 1em #272727;
}
​
.projim{
    display: table;
    width: 8em;
    height: 13em;
    margin: auto;
}
​
.describing{
    color:#6a6a6a; 
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
​
    border-top: 1px dashed #a39e9e;
    margin-top:  1em;
    padding-top: 1em;
}
​
.projimfl{
    display: table;
    width: 8em;
    height: 7em;
    margin: auto;
​
}
​
.describingfl{
    color:#6a6a6a; 
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
​
    border-top: 1px dashed #a39e9e; 
    margin-top:  6em;
    padding-top: 1em;
}
​
.hidden{
    visibility: hidden;
}
Output 300px

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

Dismiss x
public
Bin info
roXonpro
0viewers