Hi, I will provide a free code for all of you on my YouTube channel, in learn Footer Website Design in HTML And CSS. The learning is very easy, simple and easy to understand for beginners, good luck, good luck, my advice is don't forget to keep learning and repeat until you can, happy coding. have a nice day friend.
This is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
The best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>footer</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/0c13660f55.js"
crossorigin="anonymous"></script>
</head>
<body>
<section class="footer">
<div class="box-container">
<div class="box">
<h3>links</h3>
<a href="#"> <i class="fas fa-angle-right">
</i>home</a>
<a href="#"> <i class="fas fa-angle-right">
</i>blogs</a>
<a href="#"> <i class="fas fa-angle-right">
</i>contact</a>
<a href="#"> <i class="fas fa-angle-right">
</i>promotion</a>
<a href="#"> <i class="fas fa-angle-right">
</i>reviews</a>
</div>
<div class="box">
<h3>Channel links</h3>
<a href="#"> <i class="fas fa-angle-right">
</i>panel</a>
<a href="#"> <i class="fas fa-angle-right">
</i>about us</a>
<a href="#"> <i class="fas fa-angle-right">
</i>account</a>
<a href="#"> <i class="fas fa-angle-right">
</i>order</a>
<a href="#"> <i class="fas fa-angle-right">
</i>control
panel</a>
<a href="#"> <i class="fas fa-angle-right">
</i>more
order</a>
</div>
<div class="box">
<h3>contact us</h3>
<a href="#"> <i class="fas fa-phone"></i>
+628-000-0000 </a>
<a href="#"> <i class="fas fa-envelope"></i>
yayaspiritcarrieson@gmail.com </a>
<a href="#"> <i class="fas fa-map"></i>
indonesia, banten - 2022 </a>
</div>
<div class="box">
<h3>follow</h3>
<a href="#"> <i class="fab fa-facebook-f"></i>
facebook </a>
<a href="#"> <i class="fab fa-twitter"></i>
twitter </a>
<a href="#"> <i class="fab fa-instagram"></i>
instagram </a>
<a href="#"> <i class="fab fa-linkedin"></i>
linkedin </a>
<a href="#"> <i class="fab fa-github"></i>
github </a>
</div>
</div>
</section>
<div class="credit">created <span>yaya web design</span> @
2022 all rights reserved.com</div>
</body>
</html>
2. CSS
* {
font-family: 'ubuntu', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
text-transform:lowercase;
transition: all 1s;
}
html {
font-size: 62.5%;
background: #33363b;
}
section {
padding: 5rem 9%;
}
.footer {
margin-top: 25rem;
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url(../images/image1.jpg) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.footer .box-container {
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(25rem, 1fr));
gap: 3rem;
}
.footer .box-container .box h3 {
font-size: 2rem;
padding: 1rem 0;
color: #fff;
text-decoration:underline;
text-transform: capitalize;
}
.footer .box-container .box a {
display: block;
font-size: 1.4rem;
color: #fff;
padding: 1rem 0;
}
.footer .box-container .box a i {
color: #FF7F3F;
padding-right: .5rem;
}
.footer .box-container .box a:hover {
color: #FF7F3F;
}
.footer .box-container .box a:hover i {
padding-right: 2rem;
}
.credit {
text-align: center;
font-size: 1.5rem;
color: #fff;
padding: 2rem;
vertical-align: middle;
background: #33363b;
text-transform: capitalize;
}
.credit span {
color: #FF7F3F;
text-transform: capitalize;
}
For more details, you can see and click link My YouTube Channel below :
Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Download Free Code ZIP : DOWNLOAD NOW
Postingan terkait:
Belum ada tanggapan untuk "Footer Website Design in HTML And CSS"
Post a Comment