Web Design Mastery

 

https://smadt.net/linksite/linksite1.html

https://smadt.net/linksite/linksite1.html

https://webdesignmastery.github.io/E-Learning_11-05-24/

https://github.com/WebDesignMastery/E-Learning_11-05-24

https://remixicon.com/

https://github.com/Remix-Design/RemixIcon

https://fonts.google.com/

https://github.com/WebDesignMastery/E-Learning_11-05-24

https://www.youtube.com/watch?v=QVpALbitwTI&list=PLz_5rPRIvGEBDvyf-HIIDHjsPppnuXtFG&index=5

Kode JavaScript yang kamu tulis menggunakan library ScrollReveal.js. Library ini dipakai untuk membuat efek animasi saat elemen muncul di layar (ketika di-scroll).

Mari kita bedah artinya baris demi baris:

const scrollRevealOption = {
  distance: "50px",   // Elemen bergerak sejauh 50px saat animasi muncul
  origin: "bottom",   // Elemen muncul dari arah bawah
  duration: 1000,     // Durasi animasi = 1000 ms (1 detik)
};

👉 Bagian ini mendefinisikan opsi default animasi untuk ScrollReveal.

---

ScrollReveal().reveal(".header__image img", {
  ...scrollRevealOption,
  origin: "right",
});

• .header__image img → target elemen gambar dalam header.

• Menggunakan opsi default scrollRevealOption, tetapi origin diganti jadi "right" → gambar muncul dari kanan.

---

ScrollReveal().reveal(".header__content h1", {
  ...scrollRevealOption,
  delay: 500,
});

• Target: h1 dalam .header__content.

• Efek animasi sama dengan default, tetapi ada delay: 500 → animasi mulai setelah 0,5 detik.

---

ScrollReveal().reveal(".header__content p", {
  ...scrollRevealOption,
  delay: 1000,
});

• Target: paragraf dalam .header__content.

• Sama seperti default, tetapi muncul setelah 1 detik.

---

ScrollReveal().reveal(".header__content form", {
  ...scrollRevealOption,
  delay: 1500,
});

• Target: form dalam .header__content.

• Sama seperti default, tetapi muncul setelah 1,5 detik.

---

Kesimpulan

Kode ini membuat animasi scroll di bagian header:

1. Gambar (img) → muncul dari kanan.

2. Judul (h1) → muncul dari bawah dengan delay 0,5 detik.

3. Paragraf (p) → muncul dari bawah dengan delay 1 detik.

4. Form (form) → muncul dari bawah dengan delay 1,5 detik.

CSS yang kamu kirim itu adalah stylesheet untuk sebuah halaman website, khususnya bagian navigasi (nav) dan header.
Mari saya jelaskan bagian per bagian supaya jelas artinya:

---

1. Import Font

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

👉 Mengimpor font Raleway dari Google Fonts, agar digunakan di seluruh body website.

---

2. Variabel CSS

:root {
  --primary-color: #6eb0ec;
  --text-dark: #111827;
  --text-light: #6b7280;
  --white: #ffffff;
  --max-width: 1200px;
}

👉 Membuat variabel global yang bisa dipakai ulang:

• --primary-color → warna utama (#6eb0ec, biru muda).

• --text-dark → warna teks gelap.

• --text-light → warna teks abu-abu muda.

• --white → warna putih.

• --max-width → lebar maksimum kontainer (1200px).

---

3. Reset CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

👉 Menghilangkan margin & padding bawaan browser, dan pakai border-box biar ukuran elemen lebih konsisten.

---

4. Style Global

img {
  display: flex;
  width: 100%;
}
a {
  text-decoration: none;
  transition: 0.3s;
}
body {
  font-family: "Raleway", sans-serif;
}

👉 Gambar penuh lebar, link tanpa underline dengan animasi halus saat hover, dan seluruh body pakai font Raleway.

---

5. Navigasi (nav)

nav {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 1rem;
  border-bottom: 1px solid var(--text-light);
}

👉 Navigasi (navbar) dibuat responsif dengan flexbox:

• Kolom pada layar kecil (mobile),

• Spasi antar elemen (gap),

• Ada garis bawah (border-bottom).

---

6. Logo

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}
.nav__logo div {
  width: 40px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 100%;
}

👉 Logo terdiri dari teks + ikon bundar berwarna biru (border-radius: 100% → lingkaran).

---

7. Ikon Sosial Media

.nav__socials {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.nav__socials a {
  padding: 5px 7px;
  font-size: 1.5rem;
  color: var(--text-dark);
  background-color: #efeaee;
  border-radius: 100%;
}
.nav__socials a:hover {
  color: var(--white);
  background-color: var(--text-light);
}

👉 Sosial media berupa ikon bulat, default abu-abu terang, berubah jadi abu-abu gelap + teks putih saat hover.

---

8. Kontak

.nav__contact {
  display: flex;
  gap: 1rem;
}
.nav__contact__card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav__contact__card span {
  font-size: 2rem;
  color: var(--primary-color);
}
.nav__contact__card p {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
}
.nav__contact__card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
}

👉 Menampilkan kontak (telepon/email) dengan ikon besar + teks deskriptif.

---

9. Header

.header__container {
  max-width: var(--max-width);
  margin: auto;
  padding: 2rem 1rem;
  display: grid;
  gap: 2rem;
  text-align: center;
}
.header__container h1 {
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-dark);
}
.header__container h1 span {
  color: var(--primary-color);
}
.header__container p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75rem;
}

👉 Bagian header (judul + paragraf). Judul besar, kata yang di-span pakai warna utama biru.

---

10. Form Header

.header__container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #f6f4f7;
  border-radius: 10px;
}
.header__container input {
  border: none;
  background: transparent;
}
.header__container button {
  padding: 1rem 2rem;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 10px;
  cursor: pointer;
}

👉 Form di header tampil seperti form pencarian/registrasi, dengan input transparan + tombol biru besar.

---

11. Media Queries (Responsif)

@media (width > 540px) { ... }   // Tablet kecil
@media (width > 768px) { ... }   // Tablet/desktop
@media (width > 1024px) { ... }  // Laptop besar

👉 Membuat tampilan adaptif:

• >540px → jarak antar kontak lebih lebar.

• >768px → navbar berubah jadi baris (row), header jadi 2 kolom (teks di kiri, gambar di kanan).

• >1024px → form header berubah jadi baris (input + tombol sejajar).

---

Kesimpulan

CSS ini:
✅ Mengatur tema warna & font dengan variabel.
✅ Mendesain navbar (logo, sosial media, kontak).
✅ Mendesain header (judul, teks, form).
✅ Sudah responsif untuk berbagai ukuran layar.

Oke 👍 mari kita bedah arti kode HTML itu. Kodenya adalah struktur dasar website e-learning dengan bagian navigasi (nav), header (gambar + teks), dan form pencarian kursus.

---

1. Bagian Awal (Deklarasi & Head)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Web Design Mastery | E-Learning</title>
  </head>

• <!DOCTYPE html> → deklarasi bahwa dokumen ini adalah HTML5.

• <html lang="en"> → bahasa utama dokumen = Inggris.

• <meta charset="UTF-8"> → encoding karakter UTF-8 (supaya bisa menampilkan semua simbol/emoji).

• <meta name="viewport"...> → membuat tampilan responsif di perangkat mobile.

• <link href="remixicon.css"...> → memuat ikon Remix Icon (untuk ikon telepon, email, sosmed).

• <link rel="stylesheet" href="styles.css"> → menghubungkan dengan file CSS eksternal (styles.css).

• <title> → judul halaman browser: Web Design Mastery | E-Learning.

---

2. Navigasi (Navbar)

<nav>
  <div class="nav__logo">
    <div>E</div>
    Learning
  </div>
  <ul class="nav__socials">
    <li><a href="#"><i class="ri-twitter-fill"></i></a></li>
    <li><a href="#"><i class="ri-facebook-circle-fill"></i></a></li>
    <li><a href="#"><i class="ri-pinterest-line"></i></a></li>
    <li><a href="#"><i class="ri-instagram-line"></i></a></li>
  </ul>
  <div class="nav__contact">
    <div class="nav__contact__card">
      <span><i class="ri-phone-line"></i></span>
      <div>
        <p>Call Us</p>
        <h4>+01 98765 4321</h4>
      </div>
    </div>
    <div class="nav__contact__card">
      <span><i class="ri-mail-line"></i></span>
      <div>
        <p>Email Us</p>
        <h4>info@elearnings.com</h4>
      </div>
    </div>
  </div>
</nav>

👉 Bagian ini adalah navbar yang berisi:

• Logo → teks E dalam lingkaran + kata Learning.

• Ikon Sosial Media → Twitter, Facebook, Pinterest, Instagram (pakai Remix Icon).

• Kontak → nomor telepon & email dengan ikon di samping.

---

3. Header (Bagian Atas Website)

<header class="header__container">
  <div class="header__image">
    <img src="assets/header.jpg" alt="header" />
  </div>
  <div class="header__content">
    <h1>Single Platform For All Your <span>Learning</span> Needs.</h1>
    <p>
      Whether you're seeking to enhance your professional skills, explore
      new hobbies, or pursue academic interests, our comprehensive platform
      offers diverse courses and resources tailored to support your lifelong
      learning journey.
    </p>
    <form action="/">
      <div class="input__row">
        <div class="input__group">
          <span><i class="ri-search-line"></i></span>
          <input type="text" placeholder="Search for Course" />
        </div>
        <div class="input__group">
          <span><i class="ri-arrow-down-s-line"></i></span>
          <input type="text" placeholder="Categories" />
        </div>
      </div>
      <button type="submit">Search Now</button>
    </form>
  </div>
</header>

👉 Isi header:

• Gambar (header.jpg) → visual ilustrasi.

• Teks utama (h1) → tagline: Single Platform For All Your Learning Needs. Kata Learning diberi warna khusus (pakai <span>).

• Paragraf (p) → deskripsi platform e-learning.

• Form Pencarian → ada 2 input:

  • Search for Course (input teks dengan ikon search).

  • Categories (input teks dengan ikon panah bawah).

  • Tombol Search Now.

---

4. Script JavaScript

<script src="https://unpkg.com/scrollreveal"></script>
<script src="main.js"></script>

👉 Menghubungkan JavaScript eksternal:

• scrollreveal → library untuk animasi saat elemen muncul ketika discroll.

• main.js → file JS custom milik kita (yang berisi kode animasi ScrollReveal seperti yang kamu tanya sebelumnya).

---

5. Penutup

</body>
</html>

👉 Menutup struktur HTML.

---

Kesimpulan

Kode HTML ini membangun halaman depan website e-learning yang berisi:
✅ Navbar (logo, sosial media, kontak).
✅ Header (gambar + teks promosi).
✅ Form pencarian kursus.
✅ Sudah siap dipasangkan CSS (styles.css) dan animasi JS (main.js).