"mac theme"
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/ahmedtarek2134/pen/bwOdKG?limit=all&page=2&q=mac" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <style class="cp-pen-styles">* { box-sizing: content-box; } .topbar { height: 25px; width: 100%; background-color: #d7d7d7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: start; align-self: flex-start; } .topbar .apple-logo { display: inline-block; } .topbar .apple-logo img { width: 15px; margin-left: 20px; margin-top: 5px; margin-right: 20px; } .topbar .finder-tools { font-size: 10px; display: inline-block; } .topbar .right-part { display: block; position: absolute; right: 0px; } .topbar .right-part .fa { margin-left: 10px; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; background: url("http://media.idownloadblog.com/wp-content/uploads/2016/06/macOS-Sierra-Wallpaper-Macbook-Wallpaper.jpg") center center no-repeat; background-size: cover; } .dock { width: 825px; position: absolute; bottom: 0px; left: 0; right: 0; height: 70px; background-color: #bebebe; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top-right-radius: 5px; border-top-left-radius: 5px; } .dock .icons { width: 800px; } .dock .icons .finder { width: 40px; margin-left: 15px; display: inline-block; } .dock .icons .finder:after { content: " "; height: 5px; width: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: 60px; left: 4.5%; } .dock .icons .finder img { width: 50px; -webkit-transition: 0.2s; transition: 0.2s; } .dock .icons .finder img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .dock .icons .icon { width: 40px; margin-left: 12px; display: inline-block; } .dock .icons .icon img { width: 50px; -webkit-transition: 0.2s; transition: 0.2s; } .dock .icons .icon img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .dock .icons .icon.settings { border-left: 1px solid #fff; padding-left: 10px; } </style></head><body> <div class="topbar"> <div class="apple-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/2000px-Apple_logo_black.svg.png" alt="Apple Logo"/></div> <div class="finder-tools"> <p>Finder    File    Edit    View    Go    Window    Help</p> </div> <div class="right-part"> <div class="fa fa-wifi"></div> <div class="fa fa-battery-half"></div> <div class="fa fa-search"></div> <div class="fa fa-menu"></div> </div> </div> <div class="dock"> <div class="icons"> <div class="finder"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/finder-icon.png" alt="finder"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" alt="Safari"/></div> <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png" alt="Chrome"/></div> <div class="icon"><img src="https://www.gadgetdaily.xyz/wp-content/uploads/2013/07/Notes-5.png" alt="Notes"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/calendar-icon.png" alt="Calendar"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/reminders-icon.png" alt="reminders"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/facetime-icon.png" alt="facetime"/></div> <div class="icon"><img src="http://www.myiconfinder.com/uploads/iconsets/21cabddae0ef1e593f7d11a4262a3ec9-appstore.png" alt="App Store"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/contacts-icon.png" alt="contacts"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/mail-icon.png" alt="mail"/></div> <div class="icon"><img src="http://cdn.osxdaily.com/wp-content/uploads/2013/11/maps-icon-os-x-300x300.png" alt="maps"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/messages-icon.png" alt="messages"/></div> <div class="icon"><img src="https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/1024/itunes_5122x.png" alt="itunes"/></div> <div class="icon settings"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/system-preferences-icon.png" alt="system preferences"/></div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> </body></html>

Related: See More

Light Bootstrap Dashboard Pro Angular
Bootstrap form theme

Questions / Comments: