<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<!-- Header -->
<div class="header" id="agilehome">
<img src="http://ajania.16mb.com/images/bg_dev.jpg" alt="Opulent">
<h1>Andul</h1>
<h2> - <span>WEB DEVELOPER</span> - </h2>
<!-- Navigation -->
<div class="navigation">
<div class="nav-grids">
<div class="ch-grid">
<div class="col-md-2 nav-grid nav-grid1">
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"><i class="fa fa-male" aria-hidden="true"></i></div>
<div class="ch-info-back">
<h3><a class="scroll" href="http://adf.ly/1f5Jxo">ABOUT</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 nav-grid nav-grid2">
<div class="ch-item ch-img-2">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"><i class="fa fa-bar-chart" aria-hidden="true"></i></div>
<div class="ch-info-back">
<h3><a class="scroll" href="http://adf.ly/1f5Jxo">SKILLS</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 nav-grid nav-grid3">
<div class="ch-item ch-img-3">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"><i class="fa fa-file-text-o" aria-hidden="true"></i></div>
<div class="ch-info-back">
<h3><a class="scroll" href="http://adf.ly/1f5Jxo">RESUME</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 nav-grid nav-grid4">
<div class="ch-item ch-img-4">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
<div class="ch-info-back">
<h3><a class="scroll" href="http://adf.ly/1f5Jxo">WORK</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 nav-grid nav-grid5">
<div class="ch-item ch-img-5">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"><i class="fa fa-users" aria-hidden="true"></i></div>
<div class="ch-info-back">
<h3><a class="scroll" href="http://adf.ly/1f5Jxo">CLIENTS</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 nav-grid nav-grid6">
<div class="ch-item ch-img-6">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="ch-info-back">
<h3><a class="scroll cont" href="http://adf.ly/1f5Jxo">CONTACT</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //Navigation -->
</div>
<!-- //Header -->
h1, h2 {
margin: 0;
padding: 0;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.header {
position: relative;
}
.header h1 {
position: absolute;
top: 15%;
right: 0;
left: 0;
width: 60%;
margin: 0 auto;
padding: 75px 0;
font-size: 75px;
letter-spacing: 3px;
font-weight: 700;
color: #FFF;
background-color: rgba(0, 0, 0, 0.22);
border: 5px solid #FFF;
}
.header h2 {
position: absolute;
top: 45%;
left: 0;
right: 0;
width: 35%;
margin: 0 auto;
padding: 20px 0;
font-size: 25px;
letter-spacing: 2px;
font-weight: 700;
color: #000;
background-color: #FFF;
}
/*-- Navigation --*/
.navigation {
position: absolute;
top: 60%;
left: 0;
right: 0;
padding: 0 350px;
}
.ch-grid {
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after, .ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid {
display: inline-block;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
.ch-info-wrap, .ch-info{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
}
.ch-info-wrap {
top: 20px;
left: 20px;
box-shadow: 0 0 0 10px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden;
}
.ch-info .ch-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.ch-info .ch-info-back {
opacity: 0;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.ch-item:hover .ch-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.ch-item:hover .ch-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
.ch-info-front i.fa {
font-size: 60px;
padding-top: 20px;
color: #FFF;
}
.ch-info-back h3 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
margin-top: 40px;
}
.ch-info-back h3 a {
color: #FFF;
}
.ch-info-back h3 a:hover {
color: #22ffb9;
}
