"kobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/philcheng/pen/OWORgm?depth=everything&order=popularity&page=20&q=shop&show_forks=false" /> <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style> .menu-button { background-color: #2A2A2C; border-radius: 0px; border: none; color: #FFF; height: 48px; margin: 0px; min-height: 48px; min-width: 48px; padding: 0px; width: 48px; align-self: center; transition: all 0.3s; } .menu-button:hover, .menu-button:focus, .menu-button:active { outline: none; } .menu-button.active > .bar { background-color: transparent; transition: .2s; } .menu-button.active > .bar:before { transform: rotate(45deg) translate(4px, 9px); transition: .3s; width: 28px; left: 1px; } .menu-button.active > .bar:after { transform: rotate(-45deg) translate(3px, -7px); transition: .3s; width: 28px; left: 1px; } .bar { background-color: #FFF; width: 24px; height: 3px; margin: 4px auto; border-radius: 3px; display: block; position: relative; transition: all 0.3s; backface-visibility: hidden; } .bar:before, .bar:after { content: ''; background-color: #FFF; border-radius: 3px; width: 24px; height: 3px; margin: 4px auto; position: absolute; transition: all 0.3s; backface-visibility: hidden; } .bar:before { top: -12px; left: 0px; } .bar:after { bottom: -12px; left: 0px; } main { background-color: #968484; display: flex; flex: 1; height: 100vh; justify-content: center; flex-direction: column; } </style> <style class="cp-pen-styles">body { background-color: #f9f9f9; display: flex; justify-content: center; flex-direction: column; font-family: "Lato", sans-serif; } .AppContainer { margin: 30px auto; background-color: #FF6097; width: 300px; height: 534px; box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3); overflow: hidden; } .HeaderContainer { background-color: #ffffff; width: 300px; height: 47px; text-align: center; line-height: 44px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); box-sizing: border-box; border: solid transparent; position: relative; color: #3E131F; } .bar { margin: 20px 15px; } .bar, .bar:before, .bar:after { background-color: #3E131F; position: absolute; } .ListContainer { background-color: #FDF8FD; width: 300px; height: 447px; border-radius: 0 0 20px 20px; } .SecondNav { width: 100%; margin: 0 0 10px 0; padding: 20px 0px; } .SecondNav li { box-sizing: border-box; float: left; display: block; text-align: center; width: 50%; font-size: 11px; color: #AAAAAA; } .SecondNav .Active { color: #3E131F; height: 10px; padding: 0 0 22px 0; border-bottom: solid 2px #FF6097; } .Pastry { display: flex; align-items: center; box-sizing: border-box; padding: 18px 10px 18px 20px; } .ItemDetails { margin: 0 0 0 20px; width: 115px; line-height: 15px; } .Name { color: #3E131F; font-size: 12px; letter-spacing: 0.2px; } .Price { color: #777777; font-size: 10px; } button { height: 25px; width: 35px; line-height: 10px; color: #3E131F; text-align: center; border: none; background: none; font-size: 20px; cursor: pointer; outline: none; } button:active { color: #999999; } .CartContainer { text-align: center; } .Cart { background-color: #3E131F; margin: 10px auto; width: 50px; height: 50px; line-height: 56px; border-radius: 30px; } .CartCircle { height: 20px; width: 20px; border: solid 2px #ffffff; border-radius: 15px; margin: -67px 160px; } .CartCounter { background-color: #3E131F; margin: -26px 162px; color: #ffffff; width: 20px; height: 20px; text-align: center; font-size: 11px; line-height: 17px; border-radius: 15px; box-sizing: border-box; } .CartIcons { position: relative; } .reset { background-color: white; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); border-radius: 40px; height: 80px; width: 80px; display: flex; justify-content: center; align-items: center; position: absolute; float: left; top: -300px; left: 110px; opacity: 0; } .glide { animation: swipe 1s forwards; } @keyframes swipe { 0% { opacity: 1; top: -300px; transform: scale(1); } 40% { opacity: 1; top: -50px; } 75% { opacity: 1; top: -70px; } 100% { opacity: 0; top: -40px; transform: scale(0.5); } } .directions { text-align: center; margin-top: 30px; } </style></head><body> <p class="directions">try adding some items to the cart

Related: See More

Vue Argon Design System

Questions / Comments: