Design Google Page using HTML5 || DWPD Sem 5 Practical 7

on
DWPD : Practical 7

Index.html file Code<!DOCYPE html>
<html>
<head>
<title>Google</title>
<style>
body
{
 margin:0;
}
.top
{
 text-align:right;
 padding:1em;
}
#signin
{
 background:#4684EF;
 height:30px;
 width:70px;
 border:none;
 border-radius:2px;
 color:white;
}
#icon
{
 margin-bottom:-.5em;
}
body a
{
 text-decoration:none;
 margin:.2em;
}
.top a
{
 text-decoration:none;
 color:#666;
}
.main
{
 text-align:center;
 margin-top:9.4%;
 margin-bottom:10.6%;
}
.main input[type="search"]
{
 width:40%;
 height:40px;
 margin-bottom:2em;
 border:1px solid #DDD;
}
.main input[type="submit"],.main input[type="button"]
{
 margin:.1em;
 width:10%;
 height:35px;
 border:none;
 font-weight:600;
 color:#7588b7;
}
.foot
{
 border-top:1px solid #DDD;
 background:#F2F2F2;
 color:#666;
 padding:1em;
}
.foot a
{
 text-decoration:none;
 color:#666;
}
.foot-left
{
 float:left;
 margin-left:2em;
}
.foot-right
{
 float:right;
 margin-right:2em;
}
</style>
</head>
<body>
<div class="top">
 <a href="#">Gmail</a>
 <a href="#">Images</a>
 <img src="images/icon.jpg" id="icon"/>
 <input type="button" value="Sign in" id="signin"/>
</div>
<div class="main">
 <div class="logo"><img src="images/logo.jpg" /></div>
 <form method="get">
  <input type="search" name="search" placeholder="Search google" /><br>
  <input type="submit" name="submit" value="Google Search" />
  <input type="button" name="feeling" value="I'm Feeling Lucky" />
 </form>
 Google.co.in offered in:
 <a href="#">English</a>
 <a href="#">Hindi</a>
 <a href="#">Gujarati</a>
 <a href="#">Urdu</a>
 <a href="#">Marathi</a>
</div>
<div class="foot">
 <div class="foot-left">
  <a href="#">Advertising</a>
  <a href="#">Business</a>
  <a href="#">About</a>
 </div>
 <div class="foot-right">
  <a href="#">Privacy</a>
  <a href="#">Terms</a>
  <a href="#">Settings</a>
  <a href="#">Use Google.com</a>
 </div>
</div>
</body>
</html>


Output : 

 

Comments

Post a Comment