"layout"
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/dawitelias/pen/wGEYwJ?depth=everything&order=popularity&page=56&q=shop&show_forks=false" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">* { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 15px 0; } .grid__item--xs-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid__item--xs-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } .grid__item--xs-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .grid__item--xs-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } .grid__item--xs-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } } .grid__item--xs-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .grid__item--xs-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } } .grid__item--xs-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } } .grid__item--xs-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } } .grid__item--xs-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } } .grid__item--xs-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } } .grid__item--xs-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 32rem) { .grid__item--xs-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .grid__item--sm-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid__item--sm-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } .grid__item--sm-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .grid__item--sm-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } .grid__item--sm-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } } .grid__item--sm-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .grid__item--sm-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } } .grid__item--sm-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } } .grid__item--sm-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } } .grid__item--sm-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } } .grid__item--sm-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } } .grid__item--sm-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 48rem) { .grid__item--sm-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .grid__item--md-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid__item--md-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } .grid__item--md-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .grid__item--md-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } .grid__item--md-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } } .grid__item--md-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .grid__item--md-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } } .grid__item--md-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } } .grid__item--md-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } } .grid__item--md-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } } .grid__item--md-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } } .grid__item--md-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 72rem) { .grid__item--md-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .grid__item--lg-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid__item--lg-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } .grid__item--lg-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .grid__item--lg-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } .grid__item--lg-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } } .grid__item--lg-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .grid__item--lg-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } } .grid__item--lg-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } } .grid__item--lg-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } } .grid__item--lg-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } } .grid__item--lg-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } } .grid__item--lg-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 96rem) { .grid__item--lg-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .grid__item--xl-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid__item--xl-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } .grid__item--xl-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .grid__item--xl-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } .grid__item--xl-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } } .grid__item--xl-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .grid__item--xl-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } } .grid__item--xl-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } } .grid__item--xl-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } } .grid__item--xl-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } } .grid__item--xl-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } } .grid__item--xl-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 102rem) { .grid__item--xl-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .grid__item--xx-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; } } .grid__item--xx-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; } } .grid__item--xx-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .grid__item--xx-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; } } .grid__item--xx-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; } } .grid__item--xx-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .grid__item--xx-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; } } .grid__item--xx-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; } } .grid__item--xx-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; } } .grid__item--xx-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; } } .grid__item--xx-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; } } .grid__item--xx-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } @media (min-width: 120rem) { .grid__item--xx-span-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } body { color: #333; font: 16px 'HelveticaNeue', Arial, sans-serif; background: #f9f9f9; min-height: 100vh; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .wrapper { width: 100%; border: 1px dotted #e2e2e2; border-radius: 6px; } .top { display: block; width: 100%; } .top .nav-left { position: relative; width: 38%; display: inline-block; vertical-align: middle; } .top .nav-left img { width: 100%; padding-left: 18px; padding-top: 8px; } .top .nav-right { position: relative; width: 60%; display: inline-block; vertical-align: middle; } .top .nav-right a { float: right; margin: 10px; text-decoration: none; color: #333; } .top .nav-right a i { font-size: 30px; } .top .nav-searchbar { position: relative; display: block; width: 95%; height: 35px; margin: 10px auto; } .top .nav-searchbar .searchbar { position: absolute; border-radius: 2px; border: 1px solid #e5e5e5; top: 0; left: 0; right: 0; height: 100%; display: block; width: 98.3%; outline: 0; padding-left: 8px; } .middle { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-bottom: 70px; } .middle .box { background-color: #eee; width: 95%; height: 200px; margin: 10px auto; } .overlay { z-index: -1; position: fixed; bottom: 56px; left: 0; right: 0; margin: 0 auto; width: 100%; opacity: 0; box-shadow: 0 -1px 2px #e2e2e2; -webkit-transform: transale3d(0, 0, 0); transform: transale3d(0, 0, 0); -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .overlay .grid { background-color: #FBB040; padding: 10px 0px; } .overlay .grid1, .overlay .grid2, .overlay .grid3 { display: none; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .overlay .grid-active { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; } .overlay .grid__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .overlay .grid__item a { text-decoration: none; color: white; font-family: "HelveticaNeue-Light"; font-size: 0.75em; } .overlay-active { opacity: 1; z-index: 2; -webkit-transform: scale(1); transform: scale(1); } .bottom { background: #fff; display: bock; position: fixed; right: 0; bottom: 0; left: 0; width: 100%; margin: 10px auto 0 auto; height: 56px; border-top: 1px solid #e2e2e2; } .bottom .tab { width: 25%; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 11px; line-height: 11px; color: #a1a1a1; height: 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; float: left; text-transform: uppercase; -webkit-transition: all 0.25s; transition: all 0.25s; } .bottom .active { background-color: #FBB040; border-top: none; color: white; } .bottom i { margin-bottom: 5px; } .bottom .current { color: #006aa4; } </style></head><body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mobile Tab Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="wrapper"> <header class="top"> <div class="nav-left"><a class="logo" href="#"><img src="https://placehold.it/130x35"></a></div> <div class="nav-right"><a href="#"><i class="material-icons">shopping_cart</i></a><a href="#"><i class="material-icons">search</i></a></div> <div class="nav-searchbar"> <input class="searchbar" type="text" placeholder="Search"> </div> </header> <main class="middle"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </main> <section class="overlay"> <div class="grid grid1"> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Collections</a></p> </div> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Gift Ideas</a></p> </div> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Categories</a></p> </div> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Popular</a></p> </div> </div> <div class="grid grid2"> <div class="grid__item grid__item--xs-span-12"> <p><a href="#">Here are the items in my cart</a></p> </div> </div> <div class="grid grid3"> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">My Orders</a></p> </div> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Manage Shipping Address</a></p> </div> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Change Account Settings</a></p> </div> <div class="grid__item grid__item--xs-span-6"> <p><a href="#">Manage Billing Address </a></p> </div> </div> </section> <footer class="bottom"><a class="tab current" href="#">Home<i class="material-icons">home</i></a><a class="tab" href="#">Shop<i class="material-icons">list</i></a><a class="tab" href="#">Cart<i class="material-icons">shopping_cart</i></a><a class="tab" href="#">Account<i class="material-icons">account_circle</i></a></footer> </div> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script> <script >$('.tab').click(function(e) { console.log($(this).index()); if ( $(this).index() == 1 || $(this).index() == 2 || $(this).index() == 3 ) { tabItemClick($(this).index()); } e.preventDefault(); }); // if what you tapped is already active, close it // and set grid display to none function tabItemClick(i) { if ($('.tab').eq(i).hasClass('active')) { $('.overlay').removeClass('overlay-active'); $('.tab').eq(i).removeClass('active'); // display changes happen immediately // by executing the remove class 0.25s after the tab is // clicked, we can delay it and keep the transition setTimeout(function () { // had to add i-1 because grid0 is technically "shop" $('.grid').eq(i-1).removeClass('grid-active'); }, 500); } else { $('.overlay').addClass('overlay-active'); $('.grid').eq(i-1).addClass('grid-active').siblings().removeClass('grid-active'); $('.tab').eq(i).addClass('active').siblings().removeClass('active'); } } // need to test performance of this $(document).click(function(event) { //make sure .tab and .overlay are not ancestors of the target of the clicked element by using .closest() and .is(). //If not ancestors, then the clicked element is outside of .tab // hide overlay if ( !$(event.target).closest('.tab').length && !$(event.target).is('.tab') && !$(event.target).closest('.overlay').length && !$(event.target).is('.overlay') ) { if ($('.overlay').hasClass('overlay-active')) { $('.overlay').removeClass('overlay-active'); $('.tab').removeClass('active'); } } }); //$('.tab').click(function(e) { // if ($(this).hasClass('active')) { // $(this).removeClass('active'); // $('.overlay').removeClass('overlay-active'); // } else { // $(this).addClass('active').siblings().removeClass('active'); // //figure out how to load in new content based on specific tab // $('.overlay').addClass('overlay-active'); // } //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Material Dashboard
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: