-min.png)
Всем Привет! Сегодня вы узнаете как создать адаптивный нижний колонтитул используя HTML и CSS. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это подробное руководство поможет вам создать адаптивный нижний колонтитул (footer).
Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Footer Section</title>
<!--font awesome(for icons)-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
/>
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<footer>
<div class="wrapper">
<div class="box info">
<h2 class="title">Tivotal</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque nam
tempore ratione iure dolore repellendus? Aliquid eligendi labore
ducimus inventore.
</p>
<ul class="icons">
<li>
<a href="#"><i class="fab fa-github"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-x-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</div>
<div class="box links">
<h2>Company</h2>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Careers</a></li>
</div>
<div class="box links">
<h2>Quick Links</h2>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Refund Policy</a></li>
<li><a href="#">Cookies Policy</a></li>
</div>
<div class="box contact">
<h2>Contact Us</h2>
<ul>
<li>
<span><i class="fas fa-phone"></i></span>
<p><a href="#"> +9123456789</a></p>
</li>
<li>
<span><i class="fas fa-envelope"></i></span>
<p><a href="#">tivotalteam@gmail.com</a></p>
</li>
</ul>
</div>
</div>
</footer>
<div class="copyright">
Copyright © 2024 Tivotal. All rights reserved
</div>
</body>
</html>CSS КОД:
/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
font-family: "Poppins", sans-serif;
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
align-content: end;
justify-content: end;
background: #e8e8e8;
padding: 50px;
}
footer {
position: relative;
width: 100%;
height: auto;
padding: 40px 50px;
background: #fff;
}
footer .wrapper {
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 20px;
}
footer .wrapper .box {
position: relative;
}
footer .wrapper .box h2 {
position: relative;
color: #333;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
footer .wrapper .box .title {
color: #4070f4;
}
footer .wrapper .box p {
font-size: 15px;
color: #555;
}
footer .wrapper .box .icons {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(4, 50px);
}
footer .wrapper .box .icons a {
width: 36px;
height: 36px;
background: #333;
border-radius: 5px;
display: grid;
place-items: center;
}
footer .wrapper .box .icons a i {
font-size: 18px;
color: #fff;
}
footer .wrapper .links a {
font-size: 15px;
color: #555;
margin-bottom: 10px;
display: inline-block;
transition: 0.3s;
}
footer .wrapper .links a:hover,
footer .wrapper .contact li a:hover {
color: #4070f4;
}
footer .wrapper .contact li {
display: grid;
grid-template-columns: 30px 1fr;
margin-bottom: 16px;
}
footer .wrapper .contact li span {
font-size: 18px;
color: #555;
}
footer .wrapper .contact li a {
color: #555;
}
.copyright {
width: 100%;
background: #fff;
padding: 20px 100px 30px;
text-align: center;
font-size: 15px;
color: #555;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
@media (max-width: 925px) {
footer {
padding: 30px;
}
footer .wrapper {
grid-template-columns: repeat(2, 1fr);
}
.copyright {
padding: 20px 40px 30px;
}
}
@media (max-width: 640px) {
footer .wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
