Skip to main content
My First blog...

Here is the source code for my My Google Homepage Project...

HTML5 index.html


<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Google Homepage</title>
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="google.css">
</head>

 <body>

<!-- Navigation -->
<nav>
<ul>
<li><button id="signbtn"><strong>Sign in</strong></button></li>
<li><a id="apps" href="#" title="Google apps"><img src="images\googleapps.png" width="25" height="25"></a></li>
<li><a href="#" class="navigation">Images</a></li>
<li><a href="#" class="navigation">Gmail</a></li>
</ul>
</nav>

<!-- Main -->
<main>
<div id="logo">
<img src="images\googlelogo.png">
</div>
<br />

 <form>
<input id="srchbar" type="search" name='srch' spellcheck="false">
<br />
<input class="srchbtn" type="button" value="Google Search">
<input class="srchbtn" type="button" value="I'm Feeling Lucky">
</form>

 </main>


<footer>
<div id="left">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

   >
  <ul>
  <li><a href="#">Privacy</a></li>
  <li><a href="#">Terms</a></li>
  <li><a href="#">Settings</a></li>
  </ul>
  </d<div id="right"iv>

 </footer>
</body>

 </html>


Stylesheet  google.css


html, body{
margin:0;
padding:0;
color:#666;
text-decoration:none;
font-family:arial, sans-serif;
}
a:hover{text-decoration:underline;}

/* Navigation */

nav ul{
list-style-type:none;
margin:0;
padding:0;

}
.navigation{
margin:18px 18px 0 0;
float:right;
text-decoration:none;
padding:9px 8px;
font-size:13px;
color:#666;
}

 #apps{
margin-top:22px;

float:right;
}

 #signbtn{
width:84px;
height:30px;
float:right;
background-color:#198cff;
color:#fff;
padding:8px 14px;
font-size:13px;
text-shadow:1px;
border:none;
margin:20px 20px 0 20px;
}

/* Main */
main{
text-align:center;
top:130px;
position:relative;
}
.srchbtn{
margin:8px 2px;
padding:10px 15px;
background-color:#f2f2f2;
text-decoration:none;
border:1px solid #f2f2f2;
font-size:13px;
font-weight:bold;
color:#666;
}
.srchbtn:hover{
border:1px solid #c6c6c6;
color:#000;
}
#srchbar{
margin:5px;
padding:3px 0 3px 15px;
width:580px;
height:45px;
border-radius:1px;
border:1px solid #e8e8e8;
background: url("images/googlemic.png") no-repeat;
background-position:right 15px center;
background-size:15px;
box-shadow:0 2px 2px #cbcbcb;
}
#logo{
clear:right;
padding:12px 15px;
}


/* Footer Section */
footer{
position:fixed;  /*position:sticjy; */
bottom:0;
width:100%;
height:40px;
border-top:1px solid #e2e2e2;
background:#f2f2f2;
font-size:13px;
}
footer ul{
list-style-type:none;
margin:12px;
padding:0 0 0 8px;
}
footer li{
display:inline;
padding:12px;
}
footer a{
text-decoration:none;
color:#666;
}

 #left{
float:left;
}
#right{
float:right;
}


Output:







Comments

Post a Comment