"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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/noyb_/pen/gxxGKR?depth=everything&order=popularity&page=86&q=shop&show_forks=false" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,900'> <style class="cp-pen-styles">/* General */ body, html { font-family: 'Roboto', sans-serif; background-color: #222; height:100%; } h1 { line-height: 80%; font-weight: 100; margin-bottom: 0; } h2 { font-weight: 100; margin-bottom: 0; } h4 { font-weight: 300; } header, main, footer { overflow: hidden; min-height: 100vh; } header .row, footer .row { height: 100%; align-items: center; display: flex; } .valign-wrapper { height:100%; } main { padding:30px; } .justify-content-center { display: flex; flex-wrap: wrap; justify-content: center; } /* Navbar */ .navbar-fixed { height: 0; z-index: 999; } nav { background-color: #333; background-color: rgba(0, 0, 0, 0); box-shadow: none; } nav .brand-logo img { width: 25px; margin: 15px; opacity: .7; } nav li a { font-weight: 300; } nav li .active { background-color: #222; background-color: rgba(0, 0, 0, 0.1); } /* Sidenav */ nav .logo { padding: 30px 0 0 0; } nav .logo img { height: 100px; width: 100px; filter: invert(80%); } nav .logo a { font-weight: 300; color: grey; margin-top: -20px; transition: color .5s ease; } nav .links a { font-weight: 100; font-size: 1.5em; } nav .social { position: absolute; padding: 10px; bottom: 60px; width: 100%; background-color: #e2e2e2; background-color: rgba(0, 0, 0, 0.05); border-top: 1px solid #f1f1f1; justify-content: center; } nav .social a { background-color: transparent !important; } nav .social a:before { transition: color .5s ease; } nav .social a:hover:before { color: #333; } /* Header */ header { background-color: #222; } header .header-title .stuff-container { font-size: 2em; font-weight: 100; margin: 5px 0 0 0; } header .header-title .stuff { display: inline-block; color: #4fb4f1; } /* Main */ main { background-color: #333; } main .works-heading { margin-bottom: 10px; } main .works-heading:after { content: " "; display: block; width: 50%; height: 1px; margin: 10px auto; background-color: #545454; } main .work { position: relative; margin-bottom: 20px; overflow: hidden; cursor: pointer; } main .work img { width: 500px; } main .work .toolbar { position: absolute; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #000000; background-color: rgba(0, 0, 0, .8); top: -200px; width: 500px; height: calc(100% - 5px); overflow: hidden; opacity: 0; transition: all .5s ease; } main .work:hover .toolbar { opacity: 1; top: 0; } main .work .toolbar a { padding: 5px; opacity: .5; } main .work .toolbar a:hover { opacity: 1; } /* Footer */ footer { position: relative; } footer .footer-copyright { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 0; background-color: #333; } footer .footer-copyright a:first-child { margin-right: 10px; } footer .footer-copyright a:before { color: #eee; transition: color .2s ease; } footer .footer-copyright a:hover:before { color: #222; } /* Modals */ .modal .modal-content a { position: absolute; } .modal .modal-close { padding: 10px; } .modal .modal-content .material-placeholder { display: inline-block; margin-bottom: 10px; } .modal .modal-content img { width: 200px; } /* Media Queries */ @media only screen and (min-width: 601px) { nav .brand-logo img { margin: 20px; } } @media (max-width: 768px) { .modal .modal-content img { width: 150px; } } @media (max-width: 1120px) { main .work img, main .work .toolbar { width: 400px; } } @media (max-width: 920px) { main .work img, main .work .toolbar { width: 300px; } } </style></head><body> <div class="navbar-fixed"> <nav> <div class="nav-wrapper"> <a href="#home" class="brand-logo right"> <img src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/logo.png" alt="Noyb Design Logo"> </a> <ul class="left hide-on-med-and-down"> <li><a href="#home">Home</a></li> <li><a href="#works">Works</a></li> <li><a href="#contacts">Contacts</a></li> </ul> <a href="#" data-activates="mobile-nav" class="button-collapse mdi mdi-menu"></a> <ul class="side-nav grey lighten-3 right-align" id="mobile-nav"> <div class="logo center-align"> <img src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/logo.png" alt="Noyb Design Logo"> <li> <a href="mailto:fabr.pass@gmail.com">fabr.pass@gmail.com</a> </li> </div> <div class="links"> <li><a href="#home">Home</a></li> <li><a href="#works">Works</a></li> <li><a href="#contacts">Contacts</a></li> </div> <div class="col s12 social center-align"> <a target="_blank" href="https://github.com/noy-b/" class="mdi mdi-github-box mdi-36px mdi-dark"></a> </div> </ul> </div> </nav> </div> <header id="home" class="valign-wrapper scrollspy"> <div class="row"> <div class="col header-title center-align"> <h1 class="grey-text text-lighten-3">Hello</h1> <p class="grey-text text-darken-2 stuff-container"> I do <span class="stuff" data-stuff="web|HTML5|CSS3|Boostrap|jQuery|Angular|PHP">web</span> stuff </p> </div> </div> </header> <main id="works" class="scrollspy"> <div class="row center-align justify-content-center"> <div class="col s12 works-heading"> <h2 class="grey-text text-lighten-3">Websites</h2> </div> <div class="col work"> <img class="z-depth-3" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/corigliano.jpg" alt="Screenshot of Corigliano SRL"> <div class="toolbar"> <a href="#modal-corigliano" class="mdi mdi-information-outline mdi-36px mdi-light modal-trigger"></a> <a target="_blank" href="https://coriglianosrl.it/" class="mdi mdi-link mdi-36px mdi-light"></a> </div> </div> <div class="col work"> <img class="z-depth-3" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/giannicabula.jpg" alt="Screenshot of Gianni Cabula"> <div class="toolbar"> <a href="#modal-giannicabula" class="mdi mdi-information-outline mdi-36px mdi-light modal-trigger"></a> <a target="_blank" href="http://giannicabula.tk/" class="mdi mdi-link mdi-36px mdi-light"></a> </div> </div> <div class="col work"> <img class="z-depth-3" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/ossarotte.jpg" alt="Screenshot of Ossa Rotte"> <div class="toolbar"> <a href="#modal-ossarotte" class="mdi mdi-information-outline mdi-36px mdi-light modal-trigger"></a> <a target="_blank" href="http://ossarotte.it/" class="mdi mdi-link mdi-36px mdi-light"></a> </div> </div> <div class="col s12 works-heading"> <h2 class="grey-text text-lighten-3">Others</h2> </div> <div class="col work"> <img class="z-depth-3" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/marilynmansonit.jpg" alt="Screenshot of MarilynManson.it"> <div class="toolbar"> <a href="#modal-marilynmansonit" class="mdi mdi-information-outline mdi-36px mdi-light modal-trigger"></a> </div> </div> <div class="col work"> <img class="z-depth-3" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/dashboard.jpg" alt="Screenshot of Dashboard"> <div class="toolbar"> <a href="#modal-dashboard" class="mdi mdi-information-outline mdi-36px mdi-light modal-trigger"></a> </div> </div> </div> </main> <footer id="contacts" class="scrollspy valign-wrapper"> <div class="row center-align"> <div class="col s12"> <h1 class="grey-text text-lighten-3">Interested?</h1> <p class="grey-text text-lighten-3"> Shoot me an email at <a href="mailto:fabr.pass@gmail.com">fabr.pass@gmail.com</a> </p> </div> </div> <div class="footer-copyright center-align"> <a target="_blank" href="https://github.com/noy-b/" class="mdi mdi-github-box mdi-36px mdi-dark"></a> </div> </footer> <div class="modals-container"> <div id="modal-corigliano" class="modal bottom-sheet grey lighten-3"> <a href="#!" class="modal-action modal-close mdi mdi-close mdi-24px mdi-dark right"></a> <div class="modal-content center-align"> <h4> Corigliano SRL <a class="btn-flat btn-floating mdi mdi-link mdi-24px mdi-dark" target="_blank" href="https://coriglianosrl.it/"></a> </h4> <p> SPA for a car-body-shop, inclusive of an admin panel for internal use. Registered on Google Business for enhanced visibility. </p> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/corigliano.jpg" alt="Screenshot of Corigliano SRL"> <div class="chips-container"> <div class="chip">HTML5</div> <div class="chip">CSS3</div> <div class="chip">Bootstrap</div> <div class="chip">jQuery</div> <div class="chip">PHP</div> <div class="chip">SEO</div> <div class="chip">Ajax</div> </div> </div> </div> <div id="modal-giannicabula" class="modal bottom-sheet grey lighten-3"> <a href="#!" class="modal-action modal-close mdi mdi-close mdi-24px mdi-dark right"></a> <div class="modal-content center-align"> <h4> Gianni Cabula <a class="btn-flat btn-floating mdi mdi-link mdi-24px mdi-dark" target="_blank" href="http://giannicabula.tk/"></a> </h4> <p> SPA for an house-painter based in Sardinia. A simple gallery was added to showcase some of his works. </p> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/giannicabula.jpg" alt="Screenshot of Gianni Cabula"> <div class="chips-container"> <div class="chip">HTML5</div> <div class="chip">CSS3</div> <div class="chip">Bootstrap</div> <div class="chip">jQuery</div> </div> </div> </div> <div id="modal-ossarotte" class="modal bottom-sheet grey lighten-3"> <a href="#!" class="modal-action modal-close mdi mdi-close mdi-24px mdi-dark right"></a> <div class="modal-content center-align"> <h4> Ossa Rotte <a class="btn-flat btn-floating mdi mdi-link mdi-24px mdi-dark" target="_blank" href="http://ossarotte.it/"></a> </h4> <p> Ossa Rotte is a SPA showcasing a book. It futures some of the book's reviews and a "hall of heroes" of the people who bought it. </p> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/ossarotte.jpg" alt="Screenshot of Ossa Rotte"> <div class="chips-container"> <div class="chip">HTML5</div> <div class="chip">CSS3</div> <div class="chip">Bootstrap</div> <div class="chip">jQuery</div> </div> </div> </div> <div id="modal-marilynmansonit" class="modal bottom-sheet grey lighten-3"> <a href="#!" class="modal-action modal-close mdi mdi-close mdi-24px mdi-dark right"></a> <div class="modal-content center-align"> <h4> Marilyn Manson.it <a class="btn-flat btn-floating mdi mdi-link-off mdi-24px mdi-dark disabled" target="_blank" href="#!"></a> </h4> <p> This is a WIP. Website for the Marilyn Manson's official italian fan club. Made entirely with Angular (4), gives the opportunity to browse the band discography, members, tour dates and so on. </p> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/marilynmansonit.jpg" alt="Screenshot of MarilynManson.it"> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/marilynmansonit1.jpg" alt="Screenshot of MarilynManson.it"> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/marilynmansonit2.jpg" alt="Screenshot of MarilynManson.it"> <div class="chips-container"> <div class="chip">HTML5</div> <div class="chip">CSS3</div> <div class="chip">Angular</div> <div class="chip">PHP</div> <div class="chip">Ajax</div> </div> </div> </div> <div id="modal-dashboard" class="modal bottom-sheet grey lighten-3"> <a href="#!" class="modal-action modal-close mdi mdi-close mdi-24px mdi-dark right"></a> <div class="modal-content center-align"> <h4> Admin Dashboard <a class="btn-flat btn-floating mdi mdi-link-off mdi-24px mdi-dark disabled" target="_blank" href="#!"></a> </h4> <p> The admin dashboard made for Corigliano SRL. Gives the ability to manage vehicle inspection's reservations, create Microsoft Excel files, send emails and print out memos. It has an archive and a gallery manager as well. </p> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/dashboard.jpg" alt="Screenshot of Dashboard"> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/dashboard1.jpg" alt="Screenshot of Dashboard"> <img class="z-depth-1 materialboxed" src="https://raw.githubusercontent.com/noy-b/hello-world/master/imgs/dashboard2.jpg" alt="Screenshot of Dashboard"> <div class="chips-container"> <div class="chip">HTML5</div> <div class="chip">CSS3</div> <div class="chip">jQuery</div> <div class="chip">PHP</div> <div class="chip">Ajax</div> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js'></script> <script >$(document).ready(function() { $(".button-collapse").sideNav({ closeOnClick: true }); $(".scrollspy").scrollSpy({ scrollOffset: 1 }); $(".modal").modal(); $("header span.stuff").attr("data-stuff", function(i, d) { var self = $(this); var words = d.split("|"); var tot = words.length; var n = 0; // Loops through words' array and changes it (function loop() { n = ++n % tot; self.delay(4000).fadeTo(500, 0, function() { $(this).text(words[n]).fadeTo(500, 1, loop); }); })(); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: