In this video, I have shown you how you can create a responsive footer section using HTML and CSS only.
Source Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Footer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section>
<h1>Your Content Here!</h1>
</section>
<footer>
<div class="main-content">
<div class="left box">
<h2>About us</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sunt saepe maxime consequatur, architecto cum quos quo ut id totam laborum veritatis quaerat esse atque, doloremque facere hic. Odit, eum.</p>
<div class="social">
<a href=""><span class="fab fa-facebook-f"></span></a>
<a href=""><span class="fab fa-instagram"></span></a>
<a href=""><span class="fab fa-twitter"></span></a>
<a href=""><span class="fab fa-youtube"></span></a>
</div>
</div>
</div>
<div class="center box">
<h2>Adress</h2>
<div class="content">
<div class="place">
<span class="fas fa-map-marker-alt"></span>
<span class="text">London, UK</span>
</div>
<div class="phone">
<span class="fas fa-phone-alt"></span>
<span class="text">+089-5689754993</span>
</div>
<div class="email">
<span class="fas fa-envelope"></span>
<span class="text">webdev@dev.com</span>
</div>
</div>
</div>
<div class="right box">
<h2>Contact US</h2>
<div class="content">
<form action="#">
<div class="email">
<div class="text">Email:</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">Message:</div>
<textarea name="" id="" cols="25" required rows="2"></textarea>
</div>
<div class="btn">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<center>
<span class="credit">
Created by <a href="">WebDev</a> |
</span>
<span class="far fa-copyright"></span>
<span>2021 All Rights Reserved.</span>
</center>
</div>
</footer>
</body></html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
color: #d9d9d9;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
background-color: bisque;
}
section {
/* Just for parent demo size */
height: 65vh;
display: grid;
place-items: center;
}
h1 {
font-size: 48px;
color: black;
}
footer {
position: fixed;
bottom: 0px;
width: 100%;
background-color: #111;
}
.main-content {
display: flex;
}
.main-content .box {
flex-basis: 50%;
padding: 10px 20px;
}
.box h2 {
font-size: 1.125;
font-weight: 600;
text-transform: uppercase;
}
.box .content {
margin: 20px 0 0 0;
position: relative;
}
.box .content::before {
position: absolute;
content: "";
/* border: 2px solid red;*/
/* Show them the file*/
top: -10px;
height: 4px;
width: 100%;
background-color: #1a1a1a;
}
.box .content::after {
position: absolute;
content: "";
height: 3px;
width: 20%;
background: #f12020;
top: -10px;
}
.left .content .social {
margin: 20px 0 0 0;
}
.left .content .social a {
padding: 0 2px;
}
.left .content .social a span {
height: 40px;
width: 40px;
background-color: #1a1a1a;
line-height: 40px;
text-align: center;
font-size: 18px;
border-radius: 5px;
transition: 0.3s;
}
.left .content .social a span:hover {
background: #f12020;
}
.center .content .fas {
font-size: 1.4375rem;
background-color: #1a1a1a;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
border-radius: 50%;
cursor: pointer;
transition: .3s;
}
.center .content .fas:hover {
background-color: #f12020;
}
/*Now we grab the text*/
.center .content .text {
font-size: 1.07rem;
font-weight: 500;
padding-left: 10px;
}
.center .content .phone {
margin: 8px 0;
}
.right form .text {
font-size: 1.07rem;
margin-bottom: 2px;
color: #656565;
}
.right form .msg {
margin-top: 10px;
}
.right form input,
.right form textarea {
width: 100%;
font-size: 1.07rem;
background-color: #151515;
padding-left: 10px;
border: 1px solid #222222;
}
.right form input:focus,
.right form textarea:focus {
outline-color: #3498db;
}
.right form input {
height: 35px;
}
.right form .btn {
margin-top: 10px;
}
.right form .btn button {
height: 40px;
width: 100%;
border-radius: 5px;
border: none;
outline: none;
background-color: #f12020;
font-size: 1.07rem;
font-weight: 500;
cursor: pointer;
transition: .3s;
}
.right form .btn button:hover {
background-color: #000;
}
.bottom center {
padding: 5px;
font-size: 0.94rem;
background-color: #151515;
}
.bottom center span {
color: #656565;
}
.bottom center a {
color: #f12020;
text-decoration: none;
}
.bottom center a:hover {
text-decoration: underline;
}
@media screen and (max-width: 900px) {
footer {
position: relative;
bottom: 0px;
}
.main-content {
flex-wrap: wrap;
flex-direction: column;
}
.main-content .box {
margin: 5px 0;
}
}
Top comments (0)