Explore www.google.com for inspiration.
You will notice a footer containing links to Advertising, Business, and About on the left side, and Privacy, Settings, Terms, etc. on the right side at the bottom of the page.
I am an aspiring developer attempting to recreate a similar page like Google using only HTML and CSS, without any functionality added.
Below is my HTML code:
selector {
property: value;
}
h3 {
text-decoration: underline;
position: absolute;
top: 10px;
right: 180px;
border: 0;
}
h4 {
text-decoration: underline;
position: absolute;
top: 10px;
right: 120px;
border: 0;
}
.ribbon {
position: absolute;
top: -160px;
right: -560px;
width: 25px;
}
img {
position: fixed;
width: 300px;
top: 40%;
bottom: 60%;
left: 40%;
margin: auto;
}
a {
position: relative;
margin-top: 400px;
background: no-repeat left;
font-size: 12px;
left: 500px;
}
.venu {
width: 150px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: 2.png;
padding: 20px 20px 20px 45%;
position: fixed;
top: 55%;
bottom: 60%;
left: 30%;
margin: auto;
}
p {
position: fixed;
top: 75%;
bottom: 60%;
left: 30%;
margin: auto;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
}
.left {
float: left;
left: -800px;
}
.right {
float: right;
text-align: right;
}
.button {
background-color: blue;
border: none;
color: white;
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px 2px;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
border: 0;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="2.css" />
<title>Google</title>
<style>
a:link,
a:visited {
background-color: #e0e0e0;
color: #696969;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div id="content">
<img src="22.png" class="ribbon" />
</div>
<button class="button">Sign in</button>
<h3>Gmail</h3>
<h4>Images</h4>
<img src="download.png" />
<input type="text" class="venu">
<p>Google.co.in offered in: English Hindi Tamil Telugu Kanada Malayalam</p>
<div id="footer">
<h4 class="left">Advertising Business About</h4>
<h4 class="right">Privacy Terms Settings Use Google.com</h4>
<div style="clear: both"></div>
</div>
<a href="" target="www.Google.com">Google Search</a>
<a href="" target="www.Google.com">I'm Feeling Lucky</a>
</body>
</html>If there are any elements missing from my attempt to replicate the footer design, please provide feedback.