"Top Menu , Navbar"
Bootstrap 3.3.0 Snippet by Andul

<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; }

Related: See More


Questions / Comments: