Cara Membuat Footer di HTML dan CSS

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 .

1. Membuat File HTML

1.1 Langkah 1

Mari kita buat Hypertext Markup Language (HTML) dengan nama index.html.

Cara Membuat Footer di HTML dan CSS

2.2 Langkah 2

Copy dan paste kode script html di bawah ini ke dalam file index.html.

Cara Membuat Footer di HTML dan CSS
<!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 &copy; 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.

Cara Membuat Footer di HTML dan CSS

2.2 Langkah 2

Copy dan paste kode script css di bawah ini ke dalam file style.css.

Cara Membuat Footer di HTML dan 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.

Image from Gyazo

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!

by Etgar Kurniawan
Hi! I am Owner and Writer at Teknotes.id. I love WordPress, Graphic Designer, Technology, Blogging, and Programming. I will help you making some technically being easy to understand :)

Follow me on:

Facebook Twitter Instagram Linkedin

Tinggalkan komentar