Teknotes.id – Footer adalah bagian atau kotak yang letaknya berada paling bawah sendiri pada suatu website, footer biasanya berisi informasi pribadi atau profil perusahaan, alamat email, hak cipta, sosial media, dan lain-lain.
Footer adalah bagian terpenting untuk semua situs web apapun, tag <footer> mendefinisikan footer untuk dokumen atau bagian. Anda dapat memilik banyak elemen footer dalam satu dokumen.
Footer membantu pengunjung untuk mencari informasi dan opsi navigasi di bagian bawah halaman web.
Elemen <footer> biasanya berisi:
- Hak cipta
- Kebijakan privasi
- Alamat
- Kontak
- Sosial Media
Pada artikel ini, kita akan membahas cara membuat footer di html dan css responsif. Jika Anda tidak tidak terbiasa dengan bahasa-bahasa ini atau ingin meningkatkan kemampuan Anda, Anda dapat mengikuti tutorial dasar terlebih dahulu.
Untuk membuat footer, Anda perlu membuat dua file. Kedua file tersebut adalah index.html dan satu lagi adalah file style.css .
Daftar Isi
1. Membuat File HTML
1.1 Langkah 1
Mari kita buat Hypertext Markup Language (HTML) dengan nama index.html.
2.2 Langkah 2
Copy dan paste kode script html di bawah ini ke dalam file index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Membuat Footer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
</head>
<body>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>About Teknotes.id</h4>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Our service</a></li>
<li><a href="#">Carrers</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Product</h4>
<ul>
<li><a href="#">Flights</a></li>
<li><a href="#">Trains</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Flights + Hotel</a></li>
<li><a href="#">Eats</a></li>
<li><a href="#">Paylater</a></li>
<li><a href="#">Xperience</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Guide and Help</h4>
<ul>
<li><a href="#">Care</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms and Condition</a></li>
<li><a href="#">Mitra</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow us on</h4>
<div class="social-media">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</footer>
<div class="fixed-footer">
<div class="container">Copyright © 2022 Teknotes.id & EtgarKurniawan.com</div>
</div>
</body>
</html>
2.3 Langkah 3
Tekan Ctrl + S untuk menyimpan perubahan pada file.
2. Membuat File CSS
2.1 Langkah 1
Buat file Cascading Style Sheet (CSS) dengan nama style.css.
2.2 Langkah 2
Copy dan paste kode script css di bawah ini ke dalam file style.css.
body {
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1170px;
margin: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
background-color: rgba(27, 27, 27, 1);
padding: 70px 0;
}
.footer-col {
width: 25%;
padding: 0 15px;
}
.footer-col h4 {
font-size: 18px;
color: rgba(255, 255, 255, 1);
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background-color: rgba(0, 3, 255, 0.8);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: rgba(255, 255, 255, 1);
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: rgba(0, 3, 255, 0.8);
padding-left: 8px;
}
.footer-col .social-media a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(255, 255, 255, 0.5);
margin: 0 10px 10px 0;
transition: all 0.5s ease;
}
.footer-col .social-media a:hover {
color: rgba(0, 3, 255, 0.8);
background-color: rgba(236, 236, 236, 0.8);
}
.fixed-footer {
width: 100%;
position: relative;
background: #333;
margin: 0 10px 10px 0;
padding: 10px 0;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.fixed-footer {
bottom: 0;
}
/*responsive*/
@media (max-width: 767px) {
.footer-col {
width: 50%;
margin-bottom: 30px;
}
}
@media (max-width: 574px) {
.footer-col {
width: 100%;
}
}
3. Pengujian
Setelah Anda membuat dua file index.html dan style.css, sekarang jalankan file tersebut di browser Anda. Anda dapat menjalankan di browser apa pun yang Anda miliki di laptop atau komputer Anda.
Kesimpulan
Itulah cara membuat footer responsif untuk situs web menggunakan HTML dan CSS. Semoga ini membantu Anda dalam mengembangkan atau membuat proyek.
Jika kode Anda memiliki bug atau kesalahan atau Anda menghadapi kendala, jangan ragu untuk berdiskusi dengan kami melalui kolom komentar di bawah ini.
Terima kasih telah membaca artikel ini hingga selesai, nantikan artikel kami selanjutnya. Sampai jumpa!
udah saya ikutin semua tag nya tapi kenpa punya saya stuck di bagian konten ya jadi ga di bawah padahal udh bener, itu gimana ya?