"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!-- nav --> <nav> <ul> <li><a href="#">+Me</a></li> <li class="hover"><a href="#">Search</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Maps</a></li> <li><a href="#">Play</a></li> <li><a href="#">Youtube</a></li> <li><a href="#">News</a></li> <li><a href="#">Gmail</a></li> <li><a href="#">Drive</a></li> <li><a href="#">Calender</a></li> <li><a href="#">More</a></li> </ul> </nav> <!-- /nav --> <!-- profile --> <section class="profile-cover"> <div class="profile"> <div class="prf-image"><img src="https://dl.dropboxusercontent.com/s/yroktkzam52wctn/avatar.png" alt="avatar"/></div> <h3>Mohamad Reza Deylami</h3> <h4>UI Designer</h4> <ul> <li id="count"><a href="#">8</a></li> <li id="share"><a href="#">Share</a></li> </ul> <div class="detail-cover"> <div class="arrow-up"></div> <div class="arrow-up2"></div> <div class="detail"> <div class="detail-image"><img src="https://dl.dropboxusercontent.com/s/9jx4i7c3h4cirnf/big-avatar.png" alt="big-avatar"/></div> <h3>Mohamad Reza Deylami</h3> <h4>mohamad.partizan@gmail.com</h4> <a href="#"><i class="fa fa-power-off log-out"></i></a> <ul class="profile-button"> <li id="view-profile"><a href="#">View Profile</a></li> <li id="setting"><a href="#"><i class="fa fa-cog"></i></a></li> </ul> <p><a href="#">Add Account</a> - <a href="#">Privacy</a></p> </div> </div> </div> </section> <!-- /profile --> <!-- main --> <section class="main"> <div id="logo"><img src="https://dl.dropboxusercontent.com/s/7p5v6r0wll5n2yg/logo.png" alt="logo"/></div> <ul> <li><a href="#"><i class="fa fa-globe fa-lg web"></i>Web</a></li> <li class="hover-nav"><a href="#"><i class="fa fa-picture-o fa-lg images"></i>Images</a></li> <li><a href="#"><i class="fa fa-video-camera fa-lg videos"></i>Videos</a></li> <li><a href="#"><i class="fa fa-credit-card fa-lg news"></i>News</a></li> </ul> <!-- search field --> <form action="process.php" method="post"> <input type="text" name="search" id="search"> <a href="#"><i class="fa fa-microphone fa-2x voice"></i></a> <input type="submit" name="btn-search" id="btn-search" value="Google Search"> </form> <!-- /search field --> <div class="copyright"> <p><a href="https://google.com" title="Google">Google</a> Redesign</p> <p>Design By <a href="https://goo.gl/q5GeAN" title="Reza Mahmoudi">Reza Mahmoudi</a></p> <p>Created by <a href="http://imohamad.me" title="MohamadReza Deylami" target="_blank">Mohamad Reza Deylami.</a></p> </div> </section> <!-- /main -->
/*-- reset --*/ /* `XHTML, HTML4, HTML5 Reset ----------------------------------------------------------------------------------------------------*/ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0; font-size: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { /* Override the default (display: inline) for browsers that do not recognize HTML5 tags. IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv */ display: block; } b, strong { /* Makes browsers agree. IE + Opera = font-weight: bold. Gecko + WebKit = font-weight: bolder. */ font-weight: bold; } img { color: transparent; font-size: 0; vertical-align: middle; /* For IE. https://css-tricks.com/ie-fix-bicubic-scaling-for-images */ -ms-interpolation-mode: bicubic; } ol, ul { list-style: none; } li { /* For IE6 + IE7: "display: list-item" keeps bullets from disappearing if hasLayout is triggered. */ display: list-item; } table { border-collapse: collapse; border-spacing: 0; } th, td, caption { font-weight: normal; vertical-align: top; text-align: left; } q { quotes: none; } q:before, q:after { content: ""; content: none; } sub, sup, small { font-size: 75%; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } svg { /* For IE9. Without, occasionally draws shapes outside the boundaries of <svg> rectangle. */ overflow: hidden; } a{ color:#92918f; text-decoration:none; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /*-- end reset --*/ /*-- main style --*/ body{ font-size:13px; background-color:#f9f9f9; font-family: 'Open Sans', sans-serif; background-image:url(../images/bg.png); background-repeat:repeat; } h1,h2,h3,h4,h5{ font-weight:normal; font-style:normal; } nav{ min-width: 920px; } nav ul{ margin-left: 20px; margin-top: 20px; } nav ul li{ display: inline; margin-right: 40px; } nav ul li a:hover{ color: #1c1c1c; } .hover a{ color: #1c1c1c; } .profile-cover{ border: solid 1px transparent; height: 240px; margin-top: 10px; } .profile{ width: 400px; height: 220px; margin-left: 20px; margin-top: 30px; } .prf-image{ width: 58px; height: 58px; cursor: pointer; } .profile > h3{ color: #da4a38; margin-top: -60px; margin-left: 63px; } .profile > h4{ color: #898989; font-size: 12px; margin-left: 63px; } .profile ul{ margin-left: 63px; margin-top: 9px; } .profile ul li{ display: inline; margin-right: 5px; } #count a{ color: #FFF; background-color: #da4a38; padding: 3px 15px 3px 15px; -moz-border-radius: 2px;/*Firefox*/ -webkit-border-radius: 2px;/*Safari, Chrome*/ border-radius: 2px; border: solid 1px #c13828; } #count a:hover, #share a:hover, #view-profile a:hover, #setting a:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); } #share a{ color: #494949; background-color: #e5e5e5; padding: 3px 15px 3px 15px; -moz-border-radius: 2px;/*Firefox*/ -webkit-border-radius: 2px;/*Safari, Chrome*/ border-radius: 2px; border: solid 1px #cecece; } .detail{ border: solid 1px #cdcdcd; width: 377px; height: 127px; background-color: #FFF; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color=#e2e1e1)";/*IE 8*/ -moz-box-shadow: 0px -1px 3px #e2e1e1;/*FF 3.5+*/ -webkit-box-shadow: 0px -1px 3px #e2e1e1;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ box-shadow: 0px -1px 3px #e2e1e1;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color=#e2e1e1); /*IE 5.5-7*/ } .arrow-up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; position: absolute; margin-top: 1px; margin-left: 20px; } .arrow-up2 { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #cdcdcd; margin-left: 20px; margin-top: 13px; } .detail-image{ margin: 10px; width: 107px; height: 107px; } .detail > h3{ color: #373737; margin-top: -120px; margin-left: 130px; } .detail > h4{ color: #898989; font-size: 11.4px; margin-top: 3px; margin-left: 130px; } .log-out{ float: right; margin-top: -34px; margin-right: 10px; background-color: #2b2b2b; border: solid 1px #3d3d3d -moz-border-radius: 2px;/*Firefox*/ -webkit-border-radius: 2px;/*Safari, Chrome*/ border-radius: 2px; color: #FFF; padding: 5px 7px 5px 7px; } .detail > ul{ margin-left: 130px; margin-top: 25px; } #view-profile a{ color: #fff; background-color: #4b8efb; padding: 3px 15px 3px 15px; -moz-border-radius: 2px;/*Firefox*/ -webkit-border-radius: 2px;/*Safari, Chrome*/ border-radius: 2px; border: solid 1px #3079ed; } #view-profile a:active { background: -moz-linear-gradient(center top , #3C7AE4, #3F76D3) repeat scroll 0 0 rgba(0, 0, 0, 0); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15) inset; } #setting a{ color: #494949; background-color: #e5e5e5; padding: 3px 6px 3px 6px; -moz-border-radius: 2px;/*Firefox*/ -webkit-border-radius: 2px;/*Safari, Chrome*/ border-radius: 2px; border: solid 1px #cecece; } .detail > p{ margin-left: 130px; margin-top: 14px; } .detail > p a { color: #515050; } .detail > p a:hover { color: #1c1c1c;; } .main{ width: 580px; height: auto; margin: -45px auto; } #logo{ margin: auto; width: 213px; height: 69px; } .main ul{ text-align: center; width: 526px; margin: 50px auto; } .main ul li{ display: inline; margin-left: 25px; margin-right: 25px; } .main ul li a{ color: #959595; } .main ul li a:hover{ color: #1f1f1f; } .hover-nav a{ color: #1f1f1f; } .web, .images, .videos, .news{ margin-top: -20px; padding-bottom: 20px; position: absolute; } .web{ margin-left: 6px; } .images, .videos{ margin-left: 12px; } .news{ margin-left: 8px; } .main form{ border: solid 1px #cdcdcd; width: 526px; height: 40px; margin: -30px auto; padding-bottom: 1px; -moz-border-radius: 1px;/*Firefox*/ -webkit-border-radius: 1px;/*Safari, Chrome*/ border-radius: 1px; } #search{ height: 37px; width: 372px; border: none; color: #444444; font-size: 17px; padding-left: 5px; padding-right: 5px; font-weight: normal; } .voice{ color: #959595; position: absolute; margin-top: 8px; margin-left: 1px; } .voice:hover{ color: #646464; } #btn-search{ background-color: #da4a38; border: solid 1px #c13828; -moz-border-radius: 2px;/*Firefox*/ -webkit-border-radius: 2px;/*Safari, Chrome*/ border-radius: 2px; color: #FFF; height: 37px; width: 108px; cursor: pointer; margin-left: 30px; } #btn-search:focus{ padding: 0; } /*-- copyright --*/ .copyright{ width: 526px; margin: 120px auto; text-align: center; color: #92918f; } .copyright a:hover{ color: #1c1c1c; } .copyright p{ margin-bottom: 8px; }
/** * Created by MohamadReza Deylami <hello@imohamad.me> * @mr_deylami * **/ $(document).ready(function(){$(".prf-image").click(function() {$(".detail-cover").toggle();});});

Related: See More


Questions / Comments: