<!DOCTYPE html>
<html>
<body>
<section>
<h1>XYN</h1></section>
<header>
<nav>
<ul>
<li>
<h6>Gamefolio</h6>
<a href="#">
<div id="platform1"></div>
</a>Games</li>
<li>
<h6>3Dfolio</h6>
<a href="#">
<div id="platform2"></div>
</a>3D Modeling</li>
<li>
<h6>Graphicfolio</h6>
<a href="#">
<div id="platform3"></div>
</a>Motion Graphics</li>
<li>
<h6>Webfolio</h6>
<a href="#">
<div id="platform4"></div>
</a>Websites</li>
<li>
<h6>Conceptfolio</h6>
<a href="#">
<div id="platform5"></div>
</a>Sketches</li>
</ul>
</nav>
</header>
<section></section>
</body>
</html>
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
transition: all ease-in-out 0.2s;
padding: 0px;
margin: 0px;
background: #FBFBFB;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-variant: small-caps;
padding: 0px;
margin: 0px;
}
h6 {
font-size: 2em;
}
section {
height: auto;
width: 100%;
color: #393939;
text-align: center;
font-size: 450%;
font-family: Impact;
}
header {
background: rgb(51, 51, 51);
background: -moz-linear-gradient(top, rgba(51, 51, 51, 1) 1%, rgba(200, 200, 200, 0.25) 50%, rgba(51, 51, 51, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(51, 51, 51, 1)), color-stop(50%, rgba(200, 200, 200, 0.25)), color-stop(100%, rgba(51, 51, 51, 1)));
background: -webkit-linear-gradient(top, rgba(51, 51, 51, 1) 1%, rgba(200, 200, 200, 0.25) 50%, rgba(51, 51, 51, 1) 100%);
background: -o-linear-gradient(top, rgba(51, 51, 51, 1) 1%, rgba(200, 200, 200, 0.25) 50%, rgba(51, 51, 51, 1) 100%);
background: -ms-linear-gradient(top, rgba(51, 51, 51, 1) 1%, rgba(200, 200, 200, 0.25) 50%, rgba(51, 51, 51, 1) 100%);
background: linear-gradient(to bottom, rgba(51, 51, 51, 1) 1%, rgba(200, 200, 200, 0.25) 50%, rgba(51, 51, 51, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333', GradientType=0);
border-top: #ffffff solid 1px;
border-bottom: #ffffff solid 1px;
padding: 0px;
margin: 0px;
width: auto;
height: 300px;
}
nav {
width: 100%;
height: auto;
padding: 0px;
margin: 0px 0px 0px 10%;
}
ul {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
li {
font-family: Impact;
color: #efefef;
text-decoration: none;
font-size: 1em;
text-align: center;
margin: 25px -2% 50px -2%;
padding: 0px;
display: inline-block;
height: 200px;
width: 20%;
}
a {
padding: 0px;
margin: 0px;
height: auto;
width: auto;
}
nav ul li a div {
-webkit-box-shadow: 0px 0px 25px 0px rgba(1, 1, 1, 0.75);
box-shadow: 0px 0px 25px 0px rgba(1, 1, 1, 0.75);
border: #efefef solid 0px;
border-radius: 20px;
}
nav ul li a div:hover {
-webkit-box-shadow: 0px 0px 25px 0px rgba(4, 4, 4, 0.5);
box-shadow: 0px 0px 25px 0px rgba(4, 4, 4, 0.5);
border: #efefef solid 0px;
border-radius: 30px;
}
#platform1 {
transition: all ease-in-out 0.2s;
position: relative;
z-index: 1;
margin: 0px;
padding: 0px;
width: 100%;
height: 200px;
background: url(1.png) no-repeat center;
}
#platform1:hover {
transition: all ease-in-out 0.2s;
z-index: 4;
padding: 5px;
margin: -5px 75% -10px 0%;
width: 175%;
height: 200px;
background: url(11.png) no-repeat center rgba(4, 4, 4, 1);
}
#platform2 {
transition: all ease-in-out 0.2s;
position: relative;
z-index: 2;
margin: 5px 0px 0px 0px;
padding: 0px;
width: 100%;
height: 200px;
background: url(2.png) no-repeat center;
}
#platform2:hover {
padding: 5px;
transition: all ease-in-out 0.2s;
z-index: 4;
margin: 0px -0% -10px -37.5%;
width: 175%;
height: 200px;
background: url(21.png) no-repeat center rgba(4, 4, 4, 1);
}
#platform3 {
transition: all ease-in-out 0.2s;
position: relative;
z-index: 3;
margin: 10px 0px 0px 0px;
padding: 0px;
width: 100%;
height: 200px;
background: url(3.png) no-repeat center;
}
#platform3:hover {
padding: 5px;
transition: all ease-in-out 0.2s;
z-index: 4;
margin: 5px -0% -10px -37.5%;
width: 175%;
height: 200px;
background: url(31.png) no-repeat center rgba(4, 4, 4, 1);
}
#platform4 {
transition: all ease-in-out 0.2s;
position: relative;
z-index: 2;
margin: 5px 0px 0px 0px;
padding: 0px;
width: 100%;
height: 200px;
background: url(4.png) no-repeat center;
}
#platform4:hover {
padding: 5px;
transition: all ease-in-out 0.2s;
z-index: 4;
margin: 0px -0% -10px -37.5%;
width: 175%;
height: 200px;
background: url(41.png) no-repeat center rgba(4, 4, 4, 1);
}
#platform5 {
transition: all ease-in-out 0.2s;
position: relative;
z-index: 1;
margin: 0px;
padding: 0px;
width: 100%;
height: 200px;
background: url(5.png) no-repeat center;
}
#platform5:hover {
padding: 5px;
transition: all ease-in-out 0.2s;
z-index: 4;
margin: -5px -0% -10px -75%;
width: 175%;
height: 200px;
background: url(51.png) no-repeat center rgba(4, 4, 4, 1);
}