-Let's Go Code Editer
( I am Using Visual Studi Code Editer Visual Studio Code Editer Is Very Good Code Editer. If You Are A Beginner Then
Obviouly Use Visual Studio Code Editer
VS Code Helping You Writing Your Code )
1. Footer Is Very Important for Any Website
2.Create A Best Footer And Add Your Portfolio Website
👉 Fist You Can Create A Folder. Choose Any Name . And Open This Folder In Your Code Editer.
I Open This Folder in Vs Code Editer . You can Use Any Code Editer Open This Folder In Your
Code Editer
👉Then Create A New File. It's Html File You Choose Any Name But Add .html
For Example:-
👉And Create A New File. It's Css You Choose Any Name But Add .css
For Example:-
👉 Open Your Index.html File And Link Your Css File .
For Example:-
For Example:-
👉 Copy This Html Code And Paste Your Html File
Html Code 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Co
mpatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>footer</title>
<link rel="stylesheet"
href="style.css">
<link href="https://unpkg.com
/aos@2.3.1/dist/aos.css"
rel="stylesheet">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.
com/ajax/libs/
font-awesome/6.0.0
-beta3/css/all.min.css">
</head>
<body>
<footer>
<div class="footer-content">
<h3>Soura Wd</h3>
<p>Lorem, ipsum dolor
sit amet
consectetur adipisicing.</p>
<ul class="socials">
<li><a href="#">
<i class="fab fa-twitter">
</i></a></li>
<li><a href="#">
<i class="fab fa-facebook">
</i></i></a></li>
<li><a href="#">
<i class="fab fa-github">
</i></a></li>
<li><a href="#">
<i class="fab fa-instagram">
</i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p>copyright ©2022
SouravWd.
Desigend by
<span>Sourav</span></p>
</div>
</footer>
</body>
</html>
👉Copy This Css Code And Paste Your Css File
CSS Code 👇
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #fff;
}
footer{
position: absolute;
bottom: 0;
background: #000;
height: auto;
width: 100vw;
font-family: sans-serif;
padding-top: 40px;
color: #fff;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.6rem;
font-weight: 400;
text-transform: capitalize;
line-height: 15px;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 25px;
font-size: 15px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem;
}
.socials li{
margin: 0 10px;
}
.socials a{
text-decoration: none;
color: #fff;
}
.socials a i{
font-size: 1.2rem;
transition: all 0.3s ease-in-out;
}
.socials a:hover i{
color: #714571;
}
.footer-bottom{
background: #000;
width: 100vw;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 15px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: 5;
font-weight: 200;
}
👉Now Ready Your Footer
For Example:-
👉Watch This Footer Full Video On YouTube
Link :- https://bit.ly/3JKxs8K
If You Like This Footer And My Blog Then DropYour Comment
This Blog Is Helpful
(Thanks For Reding 💓)
Create a Awesome Footer Use Html, And Css
Reviewed by SouravWD
on
January 07, 2022
Rating:
Reviewed by SouravWD
on
January 07, 2022
Rating:
Thanks bro
ReplyDeleteNice
ReplyDeleteThanks
Delete