Clone of the homepage of Google and Instagram (HTML and CSS)

parent 85dc3437
header {
width: 250px;
height: 40px;
margin-top: 15px;
float: right;
font-size: 15px;
font-family: arial;
}
.gmail, .images, .google-apps, .sign-in {
margin-right: 10px;
text-decoration: none;
}
.sign-in-button {
color: white;
font-weight: 700;
font-size: 15px;
background: -webkit-linear-gradient(top, rgb(67, 135, 253), rgb(70, 131, 234));
border-radius: 2px;
padding: 6px 12px;
border-style: solid;
border-color: rgb(66, 133, 244);
}
.logo {
margin-top: 213px;
position: absolute;
}
body {
text-align: -webkit-center;
}
.search {
width: 33vw;
height: 30px;
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 30px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat;
background-position: 98.5%;
background-size: 1.5em;
margin-top: 320px;
margin-left: 270px;
}
.search-button {
display: inline-block;
background: #f2f2f2;
padding: 8px 12px;
font-weight: 400;
font-size: 14px;
border: 1px solid #f2f2f2;
color: #5F6368;
font-family: arial;
cursor: pointer;
height: 38px;
width: 148px;
margin-left: 8px;
letter-spacing: 0.4px;
}
.country {
color: rgba(0,0,0,.54);
font-size: 17px;
line-height: 20px;
font-family: arial;
padding-left: 26px;
}
footer {
text-align: left;
margin-top: 356px;
height: 60px;
}
.bottom {
padding-left: 26px;
margin-top: 22px;
margin-bottom: 0;
height: 25px;
font-size: 15px;
}
.bottom li {
display: inline-block;
}
.left {
float: left;
}
.right {
float: right;
}
.advertising, .business, .about, .how-works, .privacy, .terms, .settings {
text-decoration: none;
vertical-align: 6px;
color: rgba(0,0,0,.54);
line-height: 20px;
font-family: arial, sans-serif;
padding-right: 30px;
}
.languages {
font-family:arial, sans-serif;
font-size: 14px;
}
.languages a {
text-decoration: none;
padding-right: 6px;
color:rgb(26, 13, 171);
font-family:arial, sans-serif;
font-size: 14px;
}
\ No newline at end of file
<!DOCTYPE html>
<link rel = "stylesheet" type = "text/css" href = "myGoogle.css">
<html>
<header>
<a class = "gmail" href="https://mail.google.com/mail/?tab=wm&ogbl" target = "_top">Gmail </a>
<a class = "images" href="https://www.google.ch/imghp?hl=en&tab=wi&ogbl" target = "_top" >Images </a>
<a class = "google-apps" href="https://www.google.ch/intl/en/about/products?tab=wh" role="button" >
<img class = "image-google-apps" src = "https://cdn4.iconfinder.com/data/icons/basic-ui-elements-1-1/100/Untitled-4-512.png" height="16px" width="16px">
</a>
<a class = "sign-in" target = "_blank" href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/">
<button class = "sign-in-button"> Sign in</button>
</a>
</header>
<body>
<img class = "logo" src="https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height = "101.2px" width = "301.2px">
<br><input class="search"><br><br><br>
<button class="search-button">Google Search</button>
<button class="search-button">I'm Feeling Lucky</button><br><br><br>
<div class = "languages">
Google offered in:
<a href = "https://www.google.com/setprefs?sig=0_TJ1Ot6rUvCj6_IE6aY1-MZWFyHo%3D&hl=de&source=homepage&sa=X&ved=0ahUKEwjszLDN5KbpAhUQzKQKHdqMBsUQ2ZgBCA8">Deutsch</a>
<a href = "https://www.google.com/setprefs?sig=0_TJ1Ot6rUvCj6_IE6aY1-MZWFyHo%3D&hl=fr&source=homepage&sa=X&ved=0ahUKEwjszLDN5KbpAhUQzKQKHdqMBsUQ2ZgBCBA">Français</a>
<a href = "https://www.google.com/setprefs?sig=0_TJ1Ot6rUvCj6_IE6aY1-MZWFyHo%3D&hl=it&source=homepage&sa=X&ved=0ahUKEwjszLDN5KbpAhUQzKQKHdqMBsUQ2ZgBCBE">Italiano</a>
<a href = "https://www.google.com/setprefs?sig=0_TJ1Ot6rUvCj6_IE6aY1-MZWFyHo%3D&hl=rm&source=homepage&sa=X&ved=0ahUKEwjszLDN5KbpAhUQzKQKHdqMBsUQ2ZgBCBI">Rumantsch</a>
</div>
</body>
<footer>
<a class = "country">Switzerland</a><br>
<ul class="bottom left">
<li><a target="blank" class = "advertising" href="https://ads.google.com/intl/en_ch/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">Advertising</a></li>
<li><a target="blank" class = "business" 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 target="blank" class = "about" href="https://about.google/?utm_source=google-CH&utm_medium=referral&utm_campaign=hp-footer&fg=1">About</a></li>
<li><a target="blank" class = "how-works" href="https://www.google.com/search/howsearchworks/?fg=1">How Search works</a></li>
</ul>
<ul class="bottom right">
<li><a target="blank" class = "privacy" href="https://policies.google.com/privacy?fg=1">Privacy</a></li>
<li><a target="blank" class = "terms" href="https://policies.google.com/terms?fg=1">Terms</a></li>
<li><a target="blank" class = "settings" href="https://www.google.com/preferences?hl=en">Settings</a></li>
</ul>
</footer>
</html>
\ No newline at end of file
body {
margin-left: 275px;
}
.phone-image {
margin-left: 215px;
margin-top: 95px;
}
.background-image {
margin-left: -306px;
margin-right: 25px;
width: 246px;
position: absolute;
margin-top: 190px;
}
.quad {
border: 1px solid lightgrey;
border-radius: 1px;
width: 350px;
margin-top: 125px;
padding-bottom: 25px;
position: absolute;
text-align: center;
font-weight: 600;
font-size: 12px;
color: grey;
font-family: Arial;
}
.instagram {
margin-top: 25px;
position: absolute;
height: 71px;
width: 180px;
padding-left: 45px;
}
.email {
border-radius: 3px;
border: 1px solid rgba(var(--ca6,219,219,219),1);
font-size: 12px;
width: 268px;
height: 35px;
margin-top: 125px;
padding-left: 5px;
}
.password {
border-radius: 3px;
border: 1px solid rgba(var(--ca6,219,219,219),1);
font-size: 12px;
width: 268px;
height: 35px;
margin-top: 9px;
padding-left: 5px;
}
.log-in-button {
height: 30px;
width: 275px;
margin-top: 9px;
border: 1px solid rgba(0, 149, 246, 0.3);
color: rgb(255, 255, 255);
background-color: rgba(0, 149, 246, 0.3);
cursor: pointer;
font-family: Arial;
font-size: 14px;
font-weight: 600;
}
.left {
width: 105px;
float: left;
margin-left: 35px;
color: grey;
}
.right {
margin-right: 35px;
width: 105px;
float: right;
}
.log-in-facebook-button {
border: transparent;
background-color: transparent;
color:rgb(56, 81, 133);
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
margin-top: 26px;;
font-size: 14px;
cursor: pointer;
}
.forgot-password {
border: transparent;
background-color: transparent;
color:rgb(56, 81, 133);
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;;
font-size: 12px;
cursor: pointer;
}
.small-quad {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid lightgrey;
border-radius: 1px;
width: 350px;
position: absolute;
margin-top: 521px;
padding-top: 18px;
padding-bottom: 18px;
text-align: center;
font-size: 14px;
color: black;
}
.sign-up-button {
border: transparent;
color: rgb(0, 149, 246);
font-size: 14px;
font-weight: 900;
background-color: transparent;
}
.apps {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
margin-top: 580px;
padding-top: 18px;
padding-bottom: 18px;
margin-left: 38px;
text-align: center;
font-size: 14px;
color: black;
}
footer {
color: rgb(0, 55, 107);
font-weight: 900;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
word-spacing: 9px;
text-align: center;
margin-top: 160px;
margin-left: -300px;
}
#from-facebook {
color: grey;
word-spacing: 0;
padding-left: 50px;
}
#top-accounts {
word-spacing: 0;
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment