Rabu, 10 September 2025

Template HTML 1

 


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

Prompt Design Website (E-Learning Landing Page)

Judul Website: E-Learning – Single Platform for All Your Learning Needs

Desain & Layout:

  • Header (Navbar atas):

    • Logo dengan ikon bulat berisi huruf E dan teks "Learning".

    • Navigasi bagian kanan terdiri dari: ikon media sosial (Twitter, Facebook, Pinterest, Instagram).

    • Kontak di pojok kanan atas: ikon telepon + nomor, ikon email + alamat email.

    • Gaya minimalis, tipografi modern.

  • Hero Section (Bagian utama):

    • Background putih bersih.

    • Layout 2 kolom:

      • Kiri:

        • Judul besar (bold) "Single Platform For All Your Learning Needs."

          • Kata Learning diberi warna biru untuk penekanan.

        • Paragraf deskripsi singkat dengan warna teks abu-abu.

        • Form pencarian:

          • Input "Search for Course" dengan ikon search.

          • Input "Categories" dengan ikon panah dropdown.

          • Tombol biru "Search Now".

          • Semua elemen form dalam card dengan background abu-abu muda dan rounded corner.

      • Kanan:

        • Gambar ilustrasi (contoh: burung yang terbang atau visual bebas terkait pembelajaran/ilustrasi modern).

  • Footer (opsional jika ingin dibuat):

    • Copyright kecil.

    • Ikon media sosial tambahan.

Warna & Style:

  • Warna utama: biru lembut (#4A90E2 atau sejenis).

  • Background: putih.

  • Font: modern sans-serif (contoh: Poppins atau Inter).

  • Tombol: biru dengan teks putih, rounded, efek hover lembut.

  • Elemen form: clean, dengan shadow halus.

Teknologi:

  • HTML, CSS (Flexbox atau Grid untuk layout).

  • Responsive (terutama mobile-friendly).

  • Gunakan ikon dari RemixIcon atau FontAwesome.


index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>E-Learning Platform</title>

  <!-- Remix Icon -->

  <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">

  <!-- CSS -->

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <!-- NAVBAR -->

  <nav class="navbar">

    <div class="nav__logo">

      <div class="logo-circle">E</div>

      <span>Learning</span>

    </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">

        <i class="ri-phone-line"></i>

        <div>

          <p>Call Us</p>

          <h4>+01 98765 4321</h4>

        </div>

      </div>

      <div class="nav__contact__card">

        <i class="ri-mail-line"></i>

        <div>

          <p>Email Us</p>

          <h4>info@elearnings.com</h4>

        </div>

      </div>

    </div>

  </nav>


  <!-- HEADER -->

  <header class="header__container">

    <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="/" class="search__form">

        <div class="input__row">

          <div class="input__group">

            <i class="ri-search-line"></i>

            <input type="text" placeholder="Search for Course">

          </div>

          <div class="input__group">

            <i class="ri-arrow-down-s-line"></i>

            <input type="text" placeholder="Categories">

          </div>

        </div>

        <button type="submit">Search Now</button>

      </form>

    </div>


    <div class="header__image">

      <img src="https://picsum.photos/id/1011/600/400" alt="header image">

    </div>

  </header>

</body>

</html>


style.css


/* Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

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

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

body {
  font-family: "Poppins", sans-serif;
  color: var(--text-dark);
  background-color: var(--white);
}

/* NAVBAR */
.navbar {
  max-width: var(--max-width);
  margin: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid #ddd;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.logo-circle {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  background: var(--primary-color);
  color: var(--white);
  font-weight: 600;
  border-radius: 50%;
}

/* Socials */
.nav__socials {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav__socials a {
  font-size: 1.3rem;
  color: var(--text-dark);
  transition: 0.3s;
}

.nav__socials a:hover {
  color: var(--primary-color);
}

/* Contact */
.nav__contact {
  display: flex;
  gap: 1.5rem;
}

.nav__contact__card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.nav__contact__card i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.nav__contact__card p {
  color: var(--text-light);
  font-size: 0.8rem;
}

.nav__contact__card h4 {
  font-size: 0.9rem;
  font-weight: 600;
}

/* HEADER */
.header__container {
  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.header__content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.header__content h1 span {
  color: var(--primary-color);
}

.header__content p {
  font-size: 1rem;
  line-height: 1.6rem;
  margin-bottom: 2rem;
  color: var(--text-light);
}

/* Search form */
.search__form {
  background: #f6f6f6;
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input__row {
  display: flex;
  gap: 1rem;
}

.input__group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.input__group input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1rem;
}

.search__form button {
  background: var(--primary-color);
  color: var(--white);
  border: none;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.search__form button:hover {
  background: #357ac8;
}

/* Image */
.header__image img {
  width: 100%;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .header__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .input__row {
    flex-direction: column;
  }
}

di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Coding Web Back End

  https://www.youtube.com/watch?v=rMzbqEM8LHE&list=PL3uuG4lYbnOyccQGREqdmpIQkBqOc6YEJ https://www.youtube.com/watch?v=FIsgMZ1m4Zs&li...

  • Katong - Absensi Online
      https://www.youtube.com/watch?v=ronKK1MqcqE https://drive.google.com/file/d/1XG6bPRxZdLmujypKBONwBhlvhbLN0r1g/view https://drive.google.co...
  • Website Toko Online
    https://www.youtube.com/watch?v=mvu1toK5JNQ&t=520s https://www.youtube.com/watch?v=UjS2j2sWXp4 https://www.youtube.com/watch?v=zOulu9wZ9...
  • Kurikulum Pemrograman Berbasis Obyek
      https://ids.ac.id/object-oriented-programming/ https://techvidvan.com/tutorials/java-class/ https://www.youtube.com/watch?v=TViMwj692Xo...