"google"
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/CKH4/pen/waWzMQ?depth=everything&limit=all&order=popularity&page=12&q=material+&show_forks=false" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">@media (max-width: 800px) { .header .logo { display: none; } } * { -webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-tap-highlight-color: transparent; } body { background: #eee; margin: 0 auto; font-family: 'Open Sans', sans-serif; } .header { background: #e0e0e0; width: 100%; height: 96px; margin: 0 auto; margin-bottom: 32px; box-shadow: 0 0 16px #bdbdbd, 0 0 4px #9e9e9e; } .header div { display: inline; } .header .logo { float: left; position: relative; top: 28px; left: 32px; margin-right: -100%; } .header input { background: #fff; width: 50%; height: 0; margin: 24px 0 24px 25%; padding: 25px 48px 23px 24px; border-radius: 2px 2px 0 0; box-shadow: 0 2px 0 -1px #eee, 0 4px 0 -2px #eee; border: 0; outline: 0; color: #757575; box-sizing: border-box; } .header .voice { width: 24px; height: 24px; margin-left: -48px; position: relative; top: 8px; padding: 4px; border-radius: 100%; cursor: pointer; } .header .voice svg { fill: #616161; transition: all 0.2s; } .header .voice:hover svg { fill: #424242; } .header .icons img { float: right; margin: 24px 24px 0 0; border: 0; outline: 0; border-radius: 100%; transform: all 0.2s ease-out; cursor: pointer; } .header .icons img.small-icon { margin: 36px 24px 0 0; padding: 2px; } .header .icons img.notification { background: #9e9e9e; -webkit-filter: invert(1); filter: invert(1); transition: all 0.5s, transform 2s cubic-bezier(0.5, 7.5, 0.5, -3.5); padding: 8px; } .header .icons img.notification:hover { background: #bdbdbd; } .header .icons img.notification:active { background: #e0e0e0; transform: rotate(35deg); transition: all 0.2s, transform 0s cubic-bezier(0.5, 2.5, 0.5, -2.5); } center { width: 95%; max-width: 800px; margin: 0 auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .card { background: #e0e0e0; width: 160px; height: 120px; margin: 0 12px; box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd; border-radius: 2px 2px 0 0; margin-bottom: 32px; display: inline-block; transition: all 0.5s ease-out; cursor: pointer; } .card:hover { box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd; } .card:active { background: #bdbdbd; transition: all 0.2s; box-shadow: 0 2px 0 -1px #9e9e9e, 0 4px 0 -2px #9e9e9e, 0 0 2px #9e9e9e, 0 8px 16px #9e9e9e; } .card p { background: #e0e0e0; margin: 0; padding: 6px; font-size: 12px; transition: all 0.2s; } .card:active p { box-shadow: 0 4px 4px -4px #9e9e9e; background: #e0e0e0; } .card:after { content: ''; display: block; background: #fafafa; width: 146px; height: 72px; margin-top: 8px; border-radius: 4px; transition: all 0.2s ease-in-out; } .card:active:after { background: #eee; box-shadow: 0 2px 8px #9e9e9e; } </style></head><body> <div class="header"> <img class="logo" height="48px" src="https://www.google.com/images/srpr/logo11w.png" /> <input type="text" placeholder="Search or type URL..." /> <div class="voice icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </div> <div class="icons"> <img class="notification small-icon" width="12" src="https://google.github.io/material-design-icons/social/svg/design/ic_notifications_24px.svg" /> </div> </div> <center> <div class="card"> <p>Google</p> </div> <div class="card"> <p>Gmail</p> </div> <div class="card"> <p>Google Drive</p> </div> <div class="card"> <p>Google Classroom</p> </div> <div class="card"> <p>Google Docs</p> </div> <div class="card"> <p>Google Sheets</p> </div> <div class="card"> <p>Google Slides</p> </div> <div class="card"> <p>Google Calendar</p> </div> </center> </body></html>

Related: See More

Awesome Landing Page
Google style login extended (with HTML5 LocalStorage)
Google Plus Styled Post
Google Style Login

Questions / Comments: