"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/Yudo/pen/KXMEWK?depth=everything&order=popularity&page=60&q=shop&show_forks=false" /> <style class="cp-pen-styles">body{ background-color:#353535; font-family:verdana; } #iPhoneScreen{ position:relative; background-color:black; background-image:url('http://www.yudo.it/FOTO/iPhone-X-wallpaper.jpg'); background-size:cover; background-position:center center; margin:auto; border-radius:10px; overflow:hidden; transition: all 0.3s; } .CenterMenu{ width:100px; padding-top:15px; margin:auto; } #ChangeScreenOrientation{ cursor:pointer; position:absolute; right:20px; top:20px; width:20px; height:20px; border:solid 1px black; border-radius:50%; font-size:12px; line-height:20px; text-align:center; } .TopMenu{ position:relative; height:60px; background-color:#ddddee; box-shadow:0px 1px 5px 5px rgba(0,0,0,0.35); } .iOSMenu{ position:fixed; left:0px; top:0px; width:100vw; height:calc(100vh - 60px); background-color:rgba(0,0,0,0.85); transition: all 0.3s; } .HomeSandwich{ display:block; width:30px; height:30px; left:14px; top:14px; cursor:pointer; position:absolute; } .L1O { transform:translate(0px,15px) rotate(45deg); } .L2O { display:none; } .L3O { transform:translate(0px,-15px) rotate(-45deg); } #Line1{ position:absolute; top:0px; left:0px; width:100%; border-top:solid 3px black; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #Line2{ position:absolute; top:50%; left:0px; width:100%; border-top:solid 3px black; } #Line3{ position:absolute; top:100%; left:0px; width:100%; border-top:solid 3px black; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #OverScreenBlack{ transform:scale(3,3); display:none; opacity:0; position:absolute; left:0px; top:60px; width:100%; height:100%; background-color:rgba(0,0,0,0.75); -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #InnerBlocks{ width:100%; position:relative; height:100%; padding:26px; box-sizing: border-box; overflow:scroll; } .SingleBlock{ position:relative; float:left; width:75px; max-width:25%; padding:6px 6px 20px 6px; box-sizing: border-box; } .SingleBlockInn{ cursor:pointer; width:100%; height:0px; padding-top:100%; border:solid 1px transparent; border-radius:10%; color:white; text-align:center; font-size:10px; font-weight:normal; line-height:20px; background-color:rgba(255,255,255,0); background-repeat:no-repeat; background-position:center center; background-size:100% 100%; } .S1{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S1.png'); } .S2{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S2.png'); } .S3{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S3.png'); } .S4{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S4.png'); } .S5{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S6.png'); } .S6{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S5.png'); } .S7{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S7.png'); } .S8{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S8.png'); } .S9{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S9.png'); } .S10{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S10.png'); } .S11{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S11.png'); } .S12{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S12.png'); } .S13{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S13.png'); } .S14{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S14.png'); } .S15{ background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S15.png'); } .SingleBlockInn:hover{ background-color:rgba(0,0,0,1); border:solid 1px rgba(255,255,255,0.85); }</style></head><body> <br /> <div id="iPhoneScreen" style="width:360px;height:667px;"> <div class="TopMenu"> <div onclick="OpenMenuPhone();" class="HomeSandwich"> <div id="Line1"> </div> <div id="Line2"> </div> <div id="Line3"> </div> </div> <div class="CenterMenu"> <select onchange="SwitchSize(this)" class="PhoneSize"> <option value="360|667">iPhone X</option> <option value="640|960">iPad Air2</option> <option value="512|682">iPad Mini</option> <option value="320|480">iPod 1st</option> <option value="360|640">Google Pixel</option> </select></div> <div onclick="ChangeScreenOrientation()" id="ChangeScreenOrientation">▶</div> </div> <div id="iOSMenu"> <div onclick="OpenMenuPhone()" id="OverScreenBlack"> <div id="InnerBlocks"> <div onclick="GoWeb('home')" class="SingleBlock"> <div class="SingleBlockInn S1">Home</div> </div> <div onclick="GoWeb('info')" class="SingleBlock"> <div class="SingleBlockInn S2">Info</div> </div> <div onclick="GoWeb('company')" class="SingleBlock"> <div class="SingleBlockInn S3">Company</div> </div> <div onclick="GoWeb('products')" class="SingleBlock"> <div class="SingleBlockInn S4">Products</div> </div> <div onclick="GoWeb('quality')" class="SingleBlock"> <div class="SingleBlockInn S5">Quality</div> </div> <div onclick="GoWeb('contacts')" class="SingleBlock"> <div class="SingleBlockInn S6">Contacts</div> </div> <div onclick="GoWeb('adv')" class="SingleBlock"> <div class="SingleBlockInn S7">ADV</div> </div> <div onclick="GoWeb('users')" class="SingleBlock"> <div class="SingleBlockInn S8">Users</div> </div> <div onclick="GoWeb('events')" class="SingleBlock"> <div class="SingleBlockInn S11">Events</div> </div> <div onclick="GoWeb('video')" class="SingleBlock"> <div class="SingleBlockInn S12">Video</div> </div> <div onclick="GoWeb('shop')" class="SingleBlock"> <div class="SingleBlockInn S9">Shop</div> </div> <div onclick="GoWeb('ordini')" class="SingleBlock"> <div class="SingleBlockInn S10">Orders</div> </div> <div onclick="GoWeb('social')" class="SingleBlock"> <div class="SingleBlockInn S13">Social</div> </div> <div onclick="GoWeb('games')" class="SingleBlock"> <div class="SingleBlockInn S14">Games</div> </div> <div onclick="GoWeb('blog')" class="SingleBlock"> <div class="SingleBlockInn S15">Blog</div> </div> </div> </div> </div> </div> <div alt="Only for provide a jpeg when sharing on fb, you can delete this image." style="display:none;"><img width="1024" height="768" src="https://i.redd.it/qpgih677v9nz.gif" /></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >function g(w){ return document.getElementById(w); } function OpenMenuPhone(){ if(g("Line1").className=="L1O"){ HideSB(); g("Line1").className=""; g("Line2").className=""; g("Line3").className=""; } else{ ShowSB(); g("Line1").className="L1O"; g("Line2").className="L2O"; g("Line3").className="L3O"; } } function HideSB(){ g("OverScreenBlack").style.transform="scale(3,3)"; g("OverScreenBlack").style.opacity=0; setTimeout(function(){ HideScreenBlack(); }, 400); } function HideScreenBlack(){ g("OverScreenBlack").style.display="none"; } function ShowSB(){ g("OverScreenBlack").style.transform="scale(3,3)"; g("OverScreenBlack").style.display="block"; setTimeout(function(){ ShowScreenBlack(); }, 30); } function ShowScreenBlack(){ g("OverScreenBlack").style.transform="scale(1,1)"; g("OverScreenBlack").style.opacity=1; } function GoWeb(w){ alert("Here you can set the links for: "+w); } function ChangeScreenOrientation(){ w=g("iPhoneScreen").style.width.split("px")[0]; h=g("iPhoneScreen").style.height.split("px")[0]; if(w<h){ g("ChangeScreenOrientation").innerHTML='▼'; } else{ g("ChangeScreenOrientation").innerHTML='▶'; } g("iPhoneScreen").style.height=w+"px"; g("iPhoneScreen").style.width=h+"px"; } function SwitchSize(v){ wh=v.value.split("|") g("iPhoneScreen").style.width=wh[0]+"px"; g("iPhoneScreen").style.height=wh[1]+"px"; } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: