GOOGLE FRONT PAGE
HTML CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,intial-scale=1.0">
<meta http-equiv="X-UA-Compatiable"content="ie=edge">
<link rel="stylesheet"href="style.css">
<title>Google</title>
</head>
<body>
<div id="navbar">
<a href="#" id="about">About</a>
<a href="#" id="store">Store</a>
<a href="#" id="gmail">Gmail</a>
<a href="#" id="image">Image</a>
<a href="#" id="menu"><img src="menu.jpg" height="30px" width="30px" ></a>
<a href="#" id="sign-in">Sign in</a>
</div>
<div id="main">
<a href="#" id="logo"><img src="h.png"></a>
<input type="text" id ="search">
<div id="flexbox">
<button id="google-search-btn">Google search</button> <button id="random-search-btn">I'm Feeling Lucky</button>
</div>
<p id="google-text">Google Offered in:<a href="#" id="pakistan">Pakistan</a></p>
</div>
<div id="footer">
<a href="#" id="advertising">Advertising</a>
<a href="#" id="business">Business</a>
<a href="#" id="hsw">How search works</a>
<a href="#" id="Privacy">Privacy</a>
<a href="#" id="terms">Terms</a>
<a href="#" id="settings">settings</a>
</div>
</body>
</html>
CSS CODE
html
{
height: 100%;
width:100%;
}
#navbar
{
display: grid;
grid-template-columns: 50px 50px 1fr 50px 50px 50px 60px;
grid-template-rows: 50px;
grid-template-areas:
"about store.gmail image menu sign-in";
margin:0 20px 0 10px;
}
a,p
{
text-decoration:none;
color:rgba(0,0,0,0,87);
font-family:Arial,Helyetica, sans-serif;
font-size:13px;
}
a:hover{
text-decoration:underline;
}
#about
{
grid-area:about;
justify-self:center;
align-self:center;
}
#store
{
grid-area:store;
justify-self:center;
align-self:center;
}
#gmail
{
grid-area:gmail;
justify-self:center;
align-self:center;
}
#image
{
grid-area:image;
justify-self:center;
align-self:center;
}
#menu
{
grid-area:menu;
justify-self:center;
align-self:center;
margin-right:10px;
}
#sign-in
{
grid-area:sign-in;
justify-self:center;
align-self:center;
background-color:#4683ea;
height:30px;
width:65px;
color:white;
font-weight:bold;
text-align:center;
border:1px solid #4285f4;
line-height:30px;
}
#main
{
min-height: 100%;
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:250px 70px 70px 250px;
grid-template-areas:
".logo."
".search."
".flexbox."
".google-text.";
}
#logo
{
grid-area:logo;
justify-self:center;
align-self:end;
}
#search
{
grid-area:search;
height:30px;
width:80%;
justify-self:center;
align-self:center;
border: 1px solid rgba(0,0,0,0.151);
border-radius:30px;
}
#search:focus
{
box-shadow:1px 1px 5px grey;
}
#search:hover
{
box-shadow:1px 1px 5px grey;
}
#flexbox{
display:flexbox;
grid-area:flexbox;
justify-self:center;
align-self:center;
}
#google-search-btn
{
border:none;
font-size:15px;
color:#5F6368;
border-radius:3px;
margin-right:10px;
padding:7px 15px 7px 15px;
}
#random-search-btn{
border:none;
font-size:15px;
color:#5F6368;
padding:7px 15px 7px 15px;
border-radius:3px;
margin-right:10px;
}
#google-search-btn:hover
{
border:1px solid rgba(0,0,0,0.226);
;
}
#random-search-btn:hover
{ border:1px solid rgba(0,0,0,0.226);
}
#google-text
{
grid-area:google-text;
justify-self:center;
}
#pakistan
{
color:blue;
}
#footer
{
position:relative;
bottom:0;
display:grid;
grid-template-columns:100px 100px 150px 1fr 70px 70px 70px;
grid-template-rows:50px;
grid-template-areas:
"advertising business hsw . Privacy terms settings";
}
#advertising
{
grid-area:advertising;
justify-self:center;
align-self:center;
}
#business
{
grid-area:business;
justify-self:center;
align-self:center;
}
#hsw
{
grid-area:hsw;
justify-self:center;
align-self:center;
}
#Privacy
{
grid-area:Privacy;
justify-self:center;
align-self:center;
}
#terms
{
grid-area:terms;
justify-self:center;
align-self:center;
}
#settings
{
grid-area:settings;
justify-self:center;
align-self:center;
}
No comments:
Post a Comment