"mobile"
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/cirox/pen/mCqgD?depth=everything&order=popularity&page=62&q=device&show_forks=false" /> <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1"> <style class="cp-pen-styles">body { font-family: 'Source Sans Pro', sans-serif; color:#555; margin:0; } a { color:#666; text-decoration:none; font-weight:bold; } a:hover { color:#BB2C54; } img { width: auto; max-width:100%; } .row { margin: auto; max-width: 960px; } header { position:relative; width:100%; padding:10px 0 0 0; } nav { position:absolute; right:0; top:60px; } nav ul { list-style-type: none; margin: 0px; padding: 0px; } nav li { float: left; margin-right: 10px; padding-right: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: #ccc; font-size:16px; } nav a { color: #888; text-decoration: none; font-weight:500; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; } nav a:hover { color: #BB2C54; } nav li:last-child { margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } nav a.attivo { font-weight: bold; color: #333; } #immagine { margin: 10px 0; border-top: 1px solid #E0DACD; border-bottom: 1px solid #E0DACD; padding-bottom: 10px; background:#F6EFDF; float:left; width:100%; -webkit-box-shadow:inset 0px 5px 5px rgba(0,0,0,0.2); box-shadow: inset 0px 5px 5px rgba(0,0,0,0.2); overflow:hidden; } #contenuto { float: left; padding-bottom: 50px; } #contenuto p { font-size:15px; line-height:1.5; } #contenuto h1 { font-size:22px; } .col { float: left; width: 31.25%; /* 300px / 960px */ margin-right: 1.041666666667%; /* 10px / 960px */ margin-left: 1.041666666667%; /* 10px / 960px */ } footer { color:#999; widt:100%; padding-bottom:10px; } footer p { font-size:13px; text-align:center; padding:10px 0; margin:0; } footer a { color:#666; } footer a:hover { color:#222; } .mobile { display:none; } .tinynav { display: none; margin-bottom: 20px; font-size: 16px; width: 100%; text-align:center; } hr { background: #fff; height: 2px; border: 0; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fff), to(#fff), color-stop(50%, #e6e6e6)); background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -ms-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff); clear: both; } hr:after { content: ''; background: #ccc; display: block; height: 1px; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#e6e6e6), to(#e6e6e6), color-stop(50%, #ccc)); background-image: -webkit-linear-gradient(left, #e6e6e6, #ccc, #e6e6e6); background-image: -moz-linear-gradient(left, #e6e6e6, #ccc, #e6e6e6); background-image: -ms-linear-gradient(left, #e6e6e6, #ccc, #e6e6e6); background-image: -o-linear-gradient(left, #e6e6e6, #ccc, #e6e6e6); } @media only screen and (max-width: 767px) { .col { float:none; border-bottom:1px solid #ccc; width:93.75%; /* 300px / 320px */ margin-right:3.125%; /* 10px / 320px */ margin-left:3.125%; /* 10px / 320px */ } .col:last-child { float:none; border-bottom:none; } #logo { text-align:center; } header, #contenuto, footer { width:93.75%; /* 300px / 320px */ margin-right:3.125%; /* 10px / 320px */ margin-left:3.125%; /* 10px / 320px */ } #immagine { -webkit-box-shadow:none; box-shadow: none; margin-left:0; margin-right:0; } #immagine img { width: auto; max-width: none; height:300px; } nav { position:relative; top:0; margin-bottom:20px; text-align:center; } nav li { float:none; display:inline-block; } footer p { padding-bottom:30px; } .mobile { display:inline; } .desktop { display:none; } } @media screen and (max-width: 600px) { .tinynav { display: block; } #nav { display: none } } @media only screen and (-webkit-min-device-pixel-ratio: 2) { #logo { background: url(http://ciroesposito.com/rwd/rwd-retina.png) no-repeat left top; background-size: 160px 64px; text-indent:-999em; margin-bottom:10px; } }</style></head><body> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'> <div class="row"> <header> <div id="logo"><img src="http://ciroesposito.com/rwd/rwd.png"></div> <nav> <ul id="nav"> <li><a href="#" class="attivo">Home</a></li> <li><a href="#">Cos'è RWD</a></li> <li><a href="#">Workshop</a></li> <li><a href="#">Partecipa</a></li> </ul> </nav> </header> </div> <section id="immagine"> <div class="row"> <img src="http://ciroesposito.com/rwd/image.png"> </div> </section> <div class="row"> <section id="contenuto"> <div class="col"> <h1>Cos'è RWD </h1> <p>Nato da un’intuizione di <a href="http://ethanmarcotte.com/">Ethan Marcotte</a>, il <a href="https://en.wikipedia.org/wiki/Responsive_web_design">Responsive Web Design</a> è un approccio nuovo e diverso alla creazione e progettazione di pagine web, orientato al multi-device.</p> </div> <div class="col"> <h1>Workshop </h1> <p>Il 31 Maggio presso il co-working <a href="http://www.thecollective.it/">The Collective</a> di Verona parleremo del passato, del presente e del futuro del Web Design, di workflow e realizzeremo pagine web responsive</p> </div> <div class="col"> <h1>Partecipa </h1> <p>Sulla <a href="https://thecollectivelearning04.eventbrite.com/">pagina evento del Workshop</a> è possibile trovare tutte le informazioni sul programma della giornata, su come parteciapre e una presentazione del docente.</p> </div> </section> <hr> <footer> <p><span class="mobile">RWD</span><span class="desktop">Responsive Web Design</span> | <a href="http://www.thecollective.it/">The Collective</a> - <a href="https://thecollectivelearning04.eventbrite.com/">Evento su Eventbrite</a></p> </footer> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://goo.gl/tcAh9'></script> <script >$(function () { $("#nav").tinyNav(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: