"css native"
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 lang='en' 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/Raybe/pen/XzzwbK?limit=all&page=40&q=sketch" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:300,400" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.23.1/css/mwf-west-european-default.min.css'> <style class="cp-pen-styles">html, body { height: 100%; font-size: calc((1.5vmax + 1em) / 2) } * { margin: 0; padding: 0; } body { background-color: black; display: flex; } @media screen and (orientation: portrait) { body { flex-direction: column; } body > section { width: 100% !important; box-shadow:0 32px 32px -32px rgba(0,0,0,.5) inset!important } } body > section { width: 33.33%; height: 100%; background-size: cover; background-position: center; transition: 0.3s width; display: flex; align-items: center; justify-content: center; box-shadow:32px 0 32px -32px rgba(0,0,0,.5) inset } #apple { background-color: orange; background-image: url(http://media.idownloadblog.com/wp-content/uploads/2016/06/macOS-Sierra-Wallpaper-Macbook-Wallpaper.jpg); font-family: "Roboto", sans-serif; font-weight: 400; } #apple .popup { border-radius: 0.4em; position: relative; box-shadow: 0 1px 24px rgba(0, 0, 0, 0.3), 0 8px 64px -8px rgba(0, 0, 0, 0.3), 0 16px 92px -8px rgba(0, 0, 0, 0.3); overflow: hidden; background-color: #e3dede; margin: 0.5em; } #apple .popup::before { content: ""; background-color: rgba(255, 255, 255, 0.85); position: absolute; opacity: 0.5; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } #apple .popup::after { content: ""; position: absolute; background-image: url(http://media.idownloadblog.com/wp-content/uploads/2016/06/macOS-Sierra-Wallpaper-Macbook-Wallpaper.jpg); background-size: 100vmin; background-position: center; width: 200%; height: 200%; filter: blur(20px); top: -50%; left: -50%; z-index: 0; opacity: 0.5; } #apple .bar { background: -moz-linear-gradient(#efeeef, #d7d6d8); background: linear-gradient(#efeeef, #d7d6d8); border-bottom: 1px solid #c1c0c2; text-align: center; padding: 0.25em; border-radius: 0.4em 0.4em 0 0; position: relative; z-index: 2; } #apple .bar i { color: #7bd5fa; } #apple .msg { display: flex; align-items: start; justify-content: center; padding: 0.25em 0.75em; position: relative; z-index: 2; } #apple .icon { padding-top: 1em; } #apple .icon img { height: 4em; width: auto; } #apple .text { padding: 0.5em; max-width: 16em; } #apple .text p { padding: 0.75em 0.5em 1em 0.5em; } #apple .buttons { text-align: right; } #apple button { background-color: #fff; padding: 0.25em 1em; margin-left: 0.25em; border: 1px solid #adadad; border-radius: 0.3em; transition: 0.3s; outline: none; box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.25); cursor: pointer; font-family: "Roboto", sans-serif; } #apple button.blue { background: -moz-linear-gradient(#6bb3fb, #067dff); background: linear-gradient(#6bb3fb, #067dff); color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); } #apple button:hover { box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.25), 0 0 16px rgba(255, 255, 255, 0.6); } #apple button.blue:hover { box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.25), 0 0 16px rgba(6, 125, 255, 0.4); } #apple button:active, #apple button:focus { box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 255, 255, 0.5); } #apple button.blue:active, #apple button.blue:focus { box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8), 0 0 8px rgba(6, 125, 255, 0.1); } #apple .actions { width: 30%; height: 100%; left: 0; top: 0; position: absolute; z-index: 0; display: flex; align-items: center; justify-content: flex-start; } #apple .actions:after, #apple .actions:before, #apple .mid { content: ""; display: block; width: 0.8em; height: 0.8em; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); margin: 0 0 0 0.4em; cursor: pointer; } #apple .actions:before { background-color: #fd5f61; } #apple .mid { background-color: #fabe4c; } #apple .actions:after { background-color: #46c954; } #google { background-color: #eee; background-image: url(http://longwallpapers.com/Desktop-Wallpaper/google-wallpaper-desktop-For-Desktop-Wallpaper.png); font-family: "Open Sans", sans-serif; } #google .popup { background-color: #fafafa; padding: 1em; max-width: 14em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 16px 48px rgba(0, 0, 0, 0.3); margin: 0.5em; } #google .heading { font-size: 1.2em; font-weight: 800; color: #212121; } #google .msg { padding: 0.75em 0; color: #757575; } #google .buttons { text-align: right; } #google button { padding: 0.4em; color: #212121; background-color: transparent; border: none; font-weight: bold; font-size: 1em; text-transform: uppercase; font-family: "Roboto", sans-serif; transition: 0.3s; cursor: pointer; outline: none; } #google button.blue { color: #2196f3; } #google button:hover { background-color: rgba(0, 0, 0, 0.1); } #google button.blue:hover { background-color: rgba(5, 56, 97, 0.1); } #microsoft { background-color: blue; background-image: url(http://mspoweruser.com/wp-content/uploads/msn/2015/06/windows10wallpaper.png); font-family: "SegoeUI", Sans-serif; font-weight: 400; } #microsoft .popup { position: relative; overflow: hidden; z-index: 2; border: 1px solid #0078d7; margin: 0.5em; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 24px rgba(0, 0, 0, 0.15); } #microsoft .popup:after { content: ""; position: absolute; background-image: url(http://mspoweruser.com/wp-content/uploads/msn/2015/06/windows10wallpaper.png); background-size: 100vmin; background-position: center; width: 200%; height: 200%; filter: blur(30px); top: -50%; left: -50%; z-index: 0; } #microsoft .popup:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(240, 240, 240, 0.75); z-index: 1; } #microsoft .bar { display: flex; position: relative; z-index: 2; align-items: center; justify-content: space-between; padding: 0.4em 0.75em; } #microsoft .bar img { padding: 0 0.4em; cursor: pointer; } #microsoft .msg { padding: 0.75em; position: relative; z-index: 2; max-width: 24em; } #microsoft .buttons { position: relative; z-index: 2; padding: 0.75em 0.75em 1.25em 0.75em; text-align: right; } #microsoft button { padding: 0.25em 1em; background-color: transparent; border: 2px solid transparent; font-family: "Segoe UI", Sans-serif; font-weight: 600; outline: none; transition: 0.3s; cursor: pointer; } #microsoft button.focus { background-color: rgba(0, 0, 0, 0.1); border: 2px solid rgba(0, 0, 0, 0.75); } #microsoft button:hover { background-color: rgba(0, 0, 0, 0.1); } #microsoft button.focus:hover { background-color: rgba(0, 0, 0, 0.2); } #microsoft button:active, #microsoft button:focus { border: 2px solid rgba(0, 0, 0, 0.75); } </style></head><body> <section id="apple"> <div class="popup"> <div class="bar"> <div class="actions"> <div class="mid"></div> </div> Apple </div> <div class="msg"> <div class="icon"> <img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png"/> </div> <div class="text"> <p>The Human Interface by Apple has their design inspired by frosted glass.</p> <div class="buttons"> <button>Cancel</button> <button class="blue">Okay</button> </div> </div> </div> </div> </section> <section id="google"> <div class="popup"> <div class="heading"> Material Design </div> <div class="msg"> Google uses paper as a real life inspiration instead. </div> <div class="buttons"> <button>Cancel</button> <button class="blue">Okay</button> </div> </div> </section> <section id="microsoft"> <div class="popup"> <div class="bar"> <p>Microsoft</p> <img src="https://image.prntscr.com/image/mmDhnevgR8ePHoBWI7JZCw.png"/> </div> <div class="msg"> Windows 10s new Fluent Design steals a little from both, flat elements and hover effects from Google and blurry backgrounds from Apple. </div> <div class="buttons"> <button class="focus">Okay</button> <button>Cancel</button> </div> </div> </section> <script src='https://use.fontawesome.com/ce8165658e.js'></script> </body></html>

Related: See More


Questions / Comments: