Simple Sunset Links Page Design - HTML & CSS Only

- Juni 05, 2024

Hallo Sobat Programming! Selamat Datang dan Salam Koding! Pada Tutorial Kali Ini, Saya Akan Membagikan Design Sunset Simple Untuk Sebuah Halaman Link (Seperti Linktree). Membuat halaman yang menarik dan responsif dengan HTML dan CSS adalah keterampilan penting bagi setiap pengembang web. Dalam artikel ini, kita akan belajar bagaimana membuat desain halaman link sederhana dengan tema sunset. Berikut adalah panduan langkah demi langkah dan kode yang diperlukan untuk mencapainya.

Pendahuluan

Desain halaman ini menggunakan HTML untuk struktur dan CSS untuk gaya. Kita akan membuat halaman yang menampilkan video latar belakang, logo, beberapa teks, dan tautan ke berbagai platform media sosial.

Apa yang akan kita buat?

Video latar belakang
Logo dan teks pengantar
Tautan ke media sosial dengan ikon
Desain responsif untuk tampilan yang baik di berbagai perangkat

Langkah 1: Menyiapkan Struktur HTML

Pertama, buat file HTML dasar yang akan digunakan untuk struktur halaman. Berikut adalah contoh kode HTML:

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">
      <link rel="stylesheet" href="style.css">
      <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
      <title>Simple Sunset Links Page Design</title>
  </head>

  <body>
      <div class="container">
          <video autoplay muted loop id="bg">
              <source src="/images/bgvd.mp4" type="video/mp4">
          </video>
          <div class="filler"></div>
          <div class="content">
              <div class="wrapper">
                  <img src="/images/logo-event.png" alt="">
                  <div class="isi">
                      <p>Hello, Alvin Christian Farrell Here 👋</p>
                      <p>IT Student of <a href="https://smkn1jakarta.sch.id/">Highschool 01 Jakarta</a></p>
                      <p>Feel Free To Visit My Links Below 👇</p>
                  </div>
                  <div class="links">
                      <a href="/"><span><i class='bx bx-home'></i> Home</span></a>
                      <a href="https://wa.me/+6285888167591"><span><i class='bx bxl-whatsapp'></i> Whatsapp</span></a>
                      <a href="https://www.instagram.com/cfee_pinn"><span><i class='bx bxl-instagram'></i> Instagram</span></a>
                      <a href="https://discordapp.com/users/742348519117160528/"><span><i class='bx bxl-discord-alt'></i> Discord</span></a>
                      <a href="http://t.me/Alpinnnnnnnnnnn"><span><i class='bx bxl-telegram'></i> Telegram</span></a>
                      <a href="https://github.com/Alpinnnn"><span><i class='bx bxl-github'></i> GitHub</span></a>
                  </div>
                  <p style="margin-top: 15px; font-size: 90%;">© Made by Alpinnnn</p>
              </div>
          </div>
          <div class="filler"></div>
      </div>
      <script src="script.js"></script>
  </body>

</html>

Langkah 2: Menambahkan Gaya dengan CSS

Setelah struktur HTML selesai, tambahkan gaya menggunakan CSS untuk memberikan tampilan menarik pada halaman. Berikut adalah contoh kode CSS:

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    transition: all 0.4s ease;
}

#bg {
    position: fixed;
    right: 0;
    bottom: 1;
    min-width: 100%;
    min-height: 100%;
    z-index: -1000;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
}

.content {
    width: 425px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper p {
    text-align: center;
    font-size: 110%;
}

.content img {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border: 1.5px solid #18191A;
}

.isi {
    margin-top: 15px;
}

.isi p {
    color: #d9d9d9;
}

.wrapper p a {
    text-decoration: none;
}

.links {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.links a {
    color: #242526;
    width: 180%;
    padding: 10px 20px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 5px;
    border-bottom: 5px ridge #A4A4A4;
    text-decoration: none;
}

.links a:nth-child(1) {
    background-color: #DEDEDE;
}

.links a:nth-child(2) {
    background-color: #25D366;
}

.links a:nth-child(3) {
    background: linear-gradient(90deg, rgba(252,204,99,1) 0%, rgba(251,173,80,1) 35%, rgba(205,72,107,1) 70%, rgba(76,104,215,1) 100%);
}

.links a:nth-child(4) {
    background-color: #5865F2;
}

.links a:nth-child(5) {
    background-color: 	#24A1DE;
}

.links a:nth-child(6) {
    background-color: #2b3137;
    color: #A4A4A4;
}

.links a:hover {
    border-bottom: none;
    transform: translateY(4px);
}

.filler {
    width: 100%;
    backdrop-filter: blur(20px);
}

@media (max-width: 426px) {
    .filler {
        display: none;
    }
}

@media (max-width: 790px) {
    nav .nav-bar .sidebarOpen {
        display: block;
    }

    .menu {
        position: fixed;
        height: 100%;
        width: 320px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-color: var(--side-nav);
        z-index: 100;
        transition: all 0.4s ease;
    }

    nav.active .menu {
        left: -0%;
    }

    nav.active .nav-bar .navLogo a {
        opacity: 0;
        transition: all 0.3s ease;
    }

    .menu .logo-toggle {
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-toggle .siderbarClose {
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }

    .nav-bar .nav-links {
        flex-direction: column;
        padding-top: 30px;
    }

    .nav-links li a {
        display: block;
        margin-top: 20px;
    }
}

Langkah 3: Menambahkan Video Latar Belakang

Agar halaman terlihat lebih menarik, tambahkan video sebagai latar belakang. Gunakan tag <video> di dalam elemen .container:

video tag

<video autoplay muted loop id="bg">
    <source src="/images/bgvd.mp4" type="video/mp4">
</video>

Langkah 4: Mengintegrasikan Ikon dengan Boxicons

Untuk menambahkan ikon pada tautan, kita akan menggunakan pustaka Boxicons. Tambahkan pustaka ini di dalam tag <head>:

Boxicons Library

<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

Gunakan kelas Boxicons untuk setiap ikon dalam elemen <span> di dalam tautan:

Boxicons Element Usage

<a href="/"><span><i class='bx bx-home'></i> Home</span></a>
<a href="https://wa.me/+6285888167591"><span><i class='bx bxl-whatsapp'></i> Whatsapp</span></a>
<a href="https://www.instagram.com/cfee_pinn"><span><i class='bx bxl-instagram'></i> Instagram</span></a>
<a href="https://discordapp.com/users/742348519117160528/"><span><i class='bx bxl-discord-alt'></i> Discord</span></a>
<a href="http://t.me/Alpinnnnnnnnnnn"><span><i class='bx bxl-telegram'></i> Telegram</span></a>
<a href="https://github.com/Alpinnnn"><span><i class='bx bxl-github'></i> GitHub</span></a>

Langkah 5: Responsif dengan Media Query

Gunakan media query untuk memastikan halaman tetap responsif di berbagai perangkat:

Responsive

@media (max-width: 426px) {
    .filler {
        display: none;
    }
}

@media (max-width: 790px) {
    nav .nav-bar .sidebarOpen {
        display: block;
    }

    .menu {
        position: fixed;
        height: 100%;
        width: 320px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-color: var(--side-nav);
        z-index: 100;
        transition: all 0.4s ease;
    }

    nav.active .menu {
        left: -0%;
    }

    nav.active .nav-bar .navLogo a {
        opacity: 0;
        transition: all 0.3s ease;
    }

    .menu .logo-toggle {
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-toggle .siderbarClose {
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }

    .nav-bar .nav-links {
        flex-direction: column;
        padding-top: 30px;
    }

    .nav-links li a {
        display: block;
        margin-top: 20px;
    }
}

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat halaman tautan dengan tema sunset yang menarik dan responsif. Kode HTML dan CSS yang sederhana ini dapat memberikan tampilan profesional pada halaman tautan Anda, membuatnya lebih menarik bagi pengguna.

Semoga artikel ini bermanfaat dan membantu Anda dalam membuat halaman tautan yang keren! Jangan ragu untuk bereksperimen dan menyesuaikan desain sesuai dengan kebutuhan Anda. Selamat mencoba!

Cari Blog Ini

Alpinn's HTML Tutorial

Simple Sunset Links Page Design - HTML & CSS Only

Pendahuluan

Apa yang akan kita buat?

Langkah 1: Menyiapkan Struktur HTML

HTML

Langkah 2: Menambahkan Gaya dengan CSS

CSS

Langkah 3: Menambahkan Video Latar Belakang

video tag

Langkah 4: Mengintegrasikan Ikon dengan Boxicons

Boxicons Library

Boxicons Element Usage

Langkah 5: Responsif dengan Media Query

Responsive

Kesimpulan

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Program To-Do list Sederhana

Ringkasan Capaian Pembelajaran SMK Jurusan Pengembangan Perangkat Lunak dan Gim (Fase E)

Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Data Analytic dan Machine Learning

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-3: Membuat Quiz Exam Generator

Javascript 7-2: String, Mengupgrade Mini Project Trayek.