"window"
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/sean_codes/pen/mmVzoK?limit=all&page=66&q=form" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Ubuntu|Raleway'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <style class="cp-pen-styles">html, body { padding: 0px; margin: 0px; background: #222; font-family: 'Ubuntu', sans-serif; color: #FFF; } body { padding: 0px 10px; } body * { box-sizing: border-box; padding: 0px; margin: 0px; } .window { max-width: 600px; min-width: 420px; margin: 20px auto 0px auto; } .microsoft { font-family: 'Raleway', sans-serif; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); animation: openwindows 0.2s; transform-origin: bottom center; } .microsoft .header { display: flex; color: rgba(255, 255, 255, 0.85); line-height: 40px; font-weight: 100; height: 40px; background: #449; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); } .microsoft .header .title { flex: 1; width: 100%; height: 100%; padding: 0px 10px; display: flex; } .microsoft .header .title .icon { width: 30px; position: relative; display: inline-block; top: 6px; } .microsoft .header .title .text { height: 25px; top: 7px; position: relative; padding: 0px 8px; line-height: 25px; border-left: 1px solid rgba(0, 0, 0, 0.2); } .microsoft .header .buttons { display: flex; width: 160px; height: 30px; } .microsoft .header .buttons .btn { flex: 1; text-align: center; } .microsoft .header .buttons .btn:hover { cursor: pointer; } .microsoft .header .buttons .btn:hover.minus { background: rgba(0, 0, 0, 0.25); } .microsoft .header .buttons .btn:hover.expand { background: rgba(0, 0, 0, 0.25); } .microsoft .header .buttons .btn:hover.close { background: rgba(150, 0, 0, 0.5); } .microsoft .header .buttons .btn i { position: relative; display: inline-block; top: -1px; font-size: 20px; } .microsoft .form { min-height: 80px; background: rgba(255, 255, 255, 0.1); } .ubuntu { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); font-size: 14px; animation: hide 0.5s, openwindows 0.25s; animation-delay: 0s, 0.5s; } .ubuntu .header { height: 30px; line-height: 30px; display: flex; border-radius: 6px 6px 0px 0px; background: linear-gradient(#333, #323232); border: 1px solid #333; border-bottom: none; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); z-index: 10; position: relative; } .ubuntu .header .buttons { width: 80px; padding: 0px 8px; display: flex; } .ubuntu .header .buttons .btn { flex: 1; display: inline-block; text-align: center; } .ubuntu .header .buttons .btn i { position: relative; top: 0px; font-size: 11px; width: 17px; height: 17px; left: 0px; padding-left: 0px; line-height: 15px; background: #444; color: rgba(255, 255, 255, 0.25); border-radius: 100%; border: 1px solid rgba(0, 0, 0, 0.5); background: linear-gradient(#555, #434343); } .ubuntu .header .buttons .btn i:hover { background: linear-gradient(#fa6531, #E95420); border: 1px solid rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.8); cursor: pointer; } .ubuntu .header .title { flex: 1; z-index: 0; padding-left: 5px; } .ubuntu .form { min-height: 80px; background: #AEA79F; border: 1px solid rgba(0, 0, 0, 0.25); } .macos { font-family: 'Raleway', sans-serif; font-weight: 600; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25); animation: hide 1s, openwindows 0.25s; animation-delay: 0s, 1s; } .macos .header { display: flex; border-radius: 5px 5px 0px 0px; padding: 0px 8px; background: linear-gradient(#f6f6f6, #e0dee0); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.01); position: relative; z-index: 1; height: 25px; line-height: 26px; } .macos .header .buttons { width: 75px; display: flex; } .macos .header .buttons:hover { cursor: pointer; } .macos .header .buttons:hover i { border: 1px solid rgba(0, 0, 0, 0.15) !important; } .macos .header .buttons:hover .close i { background: #d86258; color: #222; } .macos .header .buttons:hover .minus i { background: #f0bd4e; color: #222; } .macos .header .buttons:hover .expand i { background: #64ca57; color: #222; transform: rotateZ(-45deg); } .macos .header .buttons .btn { display: inline-block; flex: 1; } .macos .header .buttons .btn i { font-size: 10px; border-radius: 100%; background: #ccc; color: #ccc; border: 1px solid #bbb; width: 14px; height: 14px; line-height: 12px; text-align: center; } .macos .header .title { color: #666; display: inline-block; width: 100%; height: 25px; } .macos .header .title .text, .macos .header .title .icon { height: 25px; line-height: 26px; display: inline-block; vertical-align: top; font-size: 12px; } .macos .header .title .text i, .macos .header .title .icon i { padding: 0px 3px; position: relative; top: 4px; font-size: 18px; color: #444; } .macos .form { min-height: 80px; background: #FFF; border-radius: 0px 0px 5px 5px; border-top: 1px solid #cdcdcd; } @keyframes hide { to, from { opacity: 0; } } @keyframes openwindows { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } </style></head><body> <div class="window microsoft"> <div class="header"> <div class="title"> <div class="icon"><i class="material-icons">folder</i></div> <div class="text">Microsoft Windows Form</div> </div> <div class="buttons"> <div class="btn minus"> <i class="material-icons">remove</i></div> <div class="btn expand"> <i class="material-icons">crop_square</i></div> <div class="btn close"> <i class="material-icons">close</i></div> </div> </div> <div class="form"></div> </div> <div class="window ubuntu"> <div class="header"> <div class="buttons"> <div class="btn close"> <i class="material-icons">close</i></div> <div class="btn minus"> <i class="material-icons">remove</i></div> <div class="btn expand"> <i class="material-icons">crop_square</i></div> </div> <div class="title"> <div class="text">Ubuntu 16.04 LTS Form</div> </div> </div> <div class="form"></div> </div> <div class="window macos"> <div class="header"> <div class="buttons"> <div class="btn close"> <i class="material-icons">close</i></div> <div class="btn minus"> <i class="material-icons">remove</i></div> <div class="btn expand"> <i class="material-icons">swap_horiz</i></div> </div> <div class="title"> <div class="icon"><i class="material-icons">mail</i></div> <div class="text">macOS Sierra Form</div> </div> </div> <div class="form"></div> </div> </body></html>

Related: See More


Questions / Comments: