Skip to content

Instantly share code, notes, and snippets.

@Andrews-repo

Andrews-repo/google-homepage.markdown

Created February 17, 2021 03:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Andrews-repo/97103469ac8b3881a0745075b0eebd46 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Andrews-repo/97103469ac8b3881a0745075b0eebd46 to your computer and use it in GitHub Desktop.
Download ZIP
Google Homepage
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/0812ca28db.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="nav-container">
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
</li>
<li>
<a class="nav-link" href="https://store.google.com/US/?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
</li>
</ul>
</nav>
<nav id="nav-bar2">
<ul>
<li>
<a class="nav-link" href="https://mail.google.com">Gmail</a>
</li>
<li>
<a class="nav-link" href="https://www.google.com/imghp?hl=en&ogbl">Images</a>
</li>
<li class="nav__item nav__item--app">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="37" width="26" height="26"/><rect width="26" height="26"/><rect x="74" width="26" height="26"/><rect x="37" y="37" width="26" height="26"/><rect y="37" width="26" height="26"/><rect x="74" y="37" width="26" height="26"/><rect x="37" y="74" width="26" height="26"/><rect y="74" width="26" height="26"/><rect x="74" y="74" width="26" height="26"/></svg>
<li>
<a class="nav-link" href="https://accounts.google.com">Accounts</a>
</li>
</ul>
</nav>
</div>
<section class="main">
<div class="search-cont">
<div class="img-div">
<img class="smaller-img" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<form class="search" action="www.google.com">
<div class="input-icons">
<i class="fas fa-search icon"></i>
<input id="test-input" type="text">
</div>
<div class="buttons">
<button id="submit" type="submit">Google Search</button>
<button id="submit" type="submit">I'm Feeling Lucky</button>
</div>
</form>
</div>
</section>
<footer>
<ul id="footer-left">
<a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/"><li>Advertising</li></a>
<a href="https://smallbusiness.withgoogle.com/ce/overview3/?subid=us-en-et-g-aw-a-g4sb_test_3b!o2&gmbsrc=us-en_US-et-z-z-gmb-s-z-r~sb-g4sb_test_3b-u&utm_content=g4sb_test_3b&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter#!/"><li>Business</li></a>
<a href="https://www.google.com/search/howsearchworks/?fg=1"><li>How Search Works</li></a>
</ul>
<ul id="footer-right">
<a href="https://policies.google.com/privacy?hl=en&fg=1"><li>Privacy</li></a>
<a href="https://policies.google.com/terms?hl=en&fg=1"><li>Terms</li></a>
<a href="https://www.google.com/preferences?hl=en&client=safari&fg=1"><li>Settings</li></a>
</ul>
</footer>
</body>
</html>
Raw
script.js
function setCaretPosition(ctrl, pos) {
// Modern browsers
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
// IE8 and below
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
// Set the cursor position of the "#test-input" element to the end when the page loads
var input = document.getElementById('test-input');
setCaretPosition(input, input.value.length);
Raw
style.css
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
.main {
margin-top: 150px;
}
.nav__item--app {
height: 30px;
width: 30px;
position: relative;
}
.nav__item--app svg {
width: 17px;
height: 17px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill: var(--color-gray-500);
margin-top: -8px;
}
.nav-container {
display: flex;
justify-content: space-between;
}
.search-cont {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
nav a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
#nav-bar ul {
list-style: none;
display: flex;
justify-content: flex-start;
margin-left: -30px;
}
#nav-bar2 ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
nav li {
padding: 0 10px;
}
.smaller-img {
width: 50%;
height: 100%;
}
.img-div{
display: flex;
justify-content: center;
}
form {
}
.search {
display: flex;
flex-direction: column;
margin-top: 30px;
align-items: center;
}
input {
border-radius: 30px;
width: 500px;
height: 30px;
padding: 0px 30px;
border: 2px solid #ededed;
color: #101010;
}
input:focus {
outline: none;
}
input:hover {
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(223, 225, 229, 0);
}
.input-icons i {
position: absolute;
}
.input-icons {
margin-bottom: 10px;
}
.icon {
padding: 10px;
color: grey;
min-width: 50px;
}
button {
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
color: #5F6368;
font-family: Arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}
button:hover {
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
color: #222;
}
#footer-left {
list-style: none;
display: flex;
justify-content: flex-start;
margin-left: -30px
}
footer a {
text-decoration: none;
color: grey;
}
footer li {
padding: 0 10px;
color: grey;
}
#footer-right {
list-style: none;
display: flex;
}
footer {
background-color: #f5f5f5;
padding: 5px;
display: flex;
justify-content: space-between;
position: fixed;
width: 99.5%;
left: 0;
bottom: 0;
color: grey;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment