Google Search(Forked)

HTML
<div class="fluid-container"> <div class="toolbar"> <ul> </ul> </div> <main class="home"> <div class="logo"> <img src=""> </div> <form method="get" action="https://www.google.com/search" class="form-search" target="_blank"> <input type="text" name="q" class="search" autocomplete="off" placeholder="Search Google ot type URL"> <div class="button-group"> <button class="button button-default g-search" type="submit"> Google Search </button> <button class="button button-default lucky" type="submit"> I'm Feeling Lucky </button> </div> </form> </main> <div class="footer"> <ul> <li><a href="https://adwords.google.com/start/?sourceid=awo&subid=us-en-et-g-aw-a-awhpt2b_1!o2&utm_expid=95258301-62.j8d9EPtxRJejVhR7dcqliQ.3&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1&utm_referrer=https%3A%2F%2Fwww.google.com%2F#?modal_active=none">Advertising</a></li> <li><a href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1#?modal_active=none">Business</a></li> <li><a href="#">About</a></li> </ul> <ul> <li><a href="https://www.google.com/preferences?hl=en">Settings</a></li> <li><a href="https://www.google.com/intl/en_us/policies/terms/?fg=1">Terms</a></li> <li><a href="https://www.google.com/intl/en_us/policies/privacy/?fg=1">Privacy</a></li> </ul> </div> </div>
SCSS
// primary colors $blue: #4285F4; $red: #ea4335; $yellow: #fbbc05; $green: #34a853; // page colors $white: #fff; $off-white: #f2f2f2; $gray: #f2f2f2; $gray-2: #dfdfdf; $md-gray: #666; $dk-gray: #757575; $black: #222; $purple: #800099; // typography $font-family: arial, sans-serif; // gradients $g-light-gray: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); $g-light-gray-hvr: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); // shadows $box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); $box-shadow-hvr: 0 3px 8px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); body { font-family: $font-family; font-size: 13px; margin: 0; } .toolbar { position: absolute; right: 1em; height: 32px; li { display: inline-block; padding-left: 15px; vertical-align: middle; color: #737373; a { color: currentColor; text-decoration: none; &:hover { text-decoration: underline; } } i { &:hover { color: #272727; } } &:hover { cursor: pointer; } img { border-radius: 50%; width: 32px; height: 32px; } } } main.home { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -7rem; width: 584px; .logo { width: 272px; height: 92px; background-repeat: no-repeat; background-image: url(http://svgur.com/i/kM.svg); background-repeat: no-repeat; background-size: 272px 92px; margin: 0 auto; margin-bottom: 30px; &:after { content: 'My'; display: none; position: absolute; right: 190px; top: 72px; color: $blue; font-size: 18px; } } form { &:after { } } .search { height: 44px; width: 584px; line-height: 44px; border: none; border-radius: 2px; box-shadow: $box-shadow; margin-bottom: 30px; font: 16px arial,sans-serif; background: url(https://i.imgur.com/qJaCSqq.png) 540px center; background-repeat: no-repeat; background-size: 24px 24px; padding-left: 16px; &:hover, &:focus { outline: none; box-shadow: $box-shadow-hvr; } } .button { background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1)); background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); -webkit-border-radius: 2px; -webkit-user-select: none; background-color: #f2f2f2; border: 1px solid #f2f2f2; border-radius: 2px; color: $dk-gray; cursor: default; font-family: arial,sans-serif; text-align: center; &:hover { background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1)); background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1); -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2); background-color: #f8f8f8; background-image: linear-gradient(top,#f8f8f8,#f1f1f1); background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1); border: 1px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); color: $black; } &.button-default { font-size: 13px; font-weight: bold; margin: 11px 4px; min-width: 54px; padding: 0 16px; text-align: center; } &.g-search { width: 126px; height: 36px; line-height: 36px; } &.lucky { width: 144px; height: 36px; line-height: 36px; } } // button .button-group { width: 290px; margin: 0 auto; } } .footer { position: absolute; bottom: 1px; width: 100%; height: 40px; line-height: 40px; border-top: 1px solid #e4e4e4; background-image: $g-light-gray; ul { display: inline-block; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 40px; -webkit-padding-end: 40px; &:nth-child(1) { li { padding-right: 15px; } } &:nth-child(2) { float: right; li { float: right; padding-left: 15px; } } } li { display: inline-block; a { color: $md-gray; text-decoration: none; &:hover { text-decoration: underline; cursor: pointer; } } } }
JAVASCRIPT
Expand for more options Login