<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Devin Cooper</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<title>Google</title>
<link rel="stylesheet" href="/css/style.css" media="screen" charset="utf-8">
</head>
<body>
<div class="wrapper">
<header class="main-header">
<ul class="menu-top">
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</header>
<div class="cf">
<img src="https://drive.google.com/file/d/0B4aIV427X4rgWXkyWTlqcS1hX2c/preview" alt="Google logo" />
</div>
<div>
<input class="search-field" type="text" name="txtSearch" value="">
</div>
<div class="btn">
<button type="button" name="search">Google Search</button>
<button type="button" name="lucky">I'm Feeling Lucky</button>
</div>
<div class="footer-wrapper">
<ul class="menu-bottom-left">
<li class="menu-footer"><a href="#">Advertising</a></li>
<li class="menu-footer"><a href="#">Business</a></li>
<li class="menu-footer"><a href="#">About</a></li>
</ul>
<ul class="menu-bottom-right">
<li class="menu-footer"><a href="#">Privacy</a></li>
<li class="menu-footer"><a href="#">Terms</a></li>
<li class="menu-footer"><a href="#">Settings</a></li>
</ul>
</div>
</div>
</body>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Ferrous/a-pen-by-devin-cooper-GZREWg */
* {
box-sizing: border-box; /*The width & height properties (and min/max properties) includes content, padding, and border, but not the margin*/
}
/*Elements --------------------*/
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
ul {
margin-left: 0; /*this gives white-space*/
margin-right: 0; /*between the ul and the*/
padding-left: 10px; /*left & right window*/
padding-right: 22px; /*borders*/
}
li {
display: inline;
list-style: none;
font-size: 14px;
margin-right: 7px; /*gives white-space between li elements*/
}
a {
text-decoration: none;
color: #696969;
}
img {
display: block;
margin: 186px auto 28px auto;
}
button {
display: inline-block;
margin: 0 4px 0 0;
padding: 10px 15px;
appearance: none;
box-shadow: none;
border-radius: 0;
background-color: white;
border: solid 1px white;
font-weight: bold;
color: #696969;
}
/*Pseudo-classes --------------------*/
a:hover {
text-decoration: underline;
}
button:hover {
color: black;
border: solid 1px #d3d3d3;
}
/*Classes --------------------*/
.wrapper {
margin-left: auto; /*this wrapper simply keeps the content*/
margin-right: auto; /*from running into each other when the*/
min-width: 960px; /*window width is below 960px*/
}
.main-header {
float: right; /*places the top menu*/
text-align: right; /*to right side*/
}
.search-field {
font-size: 1.1em; /*17.6px*/
width: 485px;
height: 2.3em; /*41.6px*/
display: block; /*Centers to window and*/
margin: 0 auto 30px auto; /*gives white space from logo*/
}
.btn {
text-align: center; /*Centers buttons to window*/
}
.footer-wrapper {
position: absolute; /*Positions footer-wrapper*/
left: 0; /*to bottom-left corner*/
bottom: 0; /*of window*/
width: 100%; /*Stretches footer-wrapper to 100% of windows width*/
min-width: 960px; /*Prevents menu-bottom-left & menu-bottom-right from running into each other when window size decreases*/
background-color: #ededed;
border-top: 1px solid #d3d3d3;
}
.footer-wrapper a:active {
color: red; /*clicked on links turn red*/
}
.menu-bottom-left {
height: 10px; /*gives footer-wrapper height of 10px for grey background*/
float: left; /*places menu on left side of window*/
}
.menu-bottom-right {
height: 10px; /*gives footer-wrapper height of 10px for grey background*/
float: right; /*places menu on right side of window*/
}
.menu-footer {
font-size: 13px;
margin-left: 20px; /*gives white-space between li elements in bottom menu*/
}
/*Clearfix --------------------*/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}