Bina Laman Web Foodie Hamburger-tutorial js-php.cn

Build a Foodie Hamburger Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: Tapak Web Foodie Hamburger. Projek ini sesuai untuk mereka yang ingin membina laman web yang menarik dan berfungsi secara visual yang mempamerkan pelbagai pilihan burger. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil mencipta pengalaman web yang menarik untuk pengguna.

Gambaran Keseluruhan Projek

Tapak Web Foodie Hamburger ialah aplikasi web yang direka untuk mempamerkan menu burger yang berbeza dan tawaran istimewa. Dengan reka bentuk yang bersih dan moden, ia membolehkan pengguna menavigasi dengan mudah melalui pelbagai bahagian, seperti Pilihan Teratas, Whopper, Stunner Menu, New Foodie Collection dan Deal of the Day. Projek ini menunjukkan cara membuat tapak web yang interaktif dan menyenangkan dari segi estetika.

Ciri-ciri

Navigasi Interaktif: Menu hamburger yang runtuh dan berkembang pada skrin yang lebih kecil untuk kebolehgunaan yang lebih baik.
Reka Bentuk Responsif: Memastikan tapak web kelihatan hebat pada kedua-dua desktop dan peranti mudah alih.
Reka Letak Bersih: Menyediakan cara yang menarik secara visual untuk memaparkan pilihan burger yang berbeza dan tawaran istimewa.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Laman Web Foodie Hamburger.
CSS: Menggayakan tapak web untuk mencipta reka bentuk yang moden dan responsif.
JavaScript: Mengurus elemen interaktif, termasuk fungsi menu hamburger.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Foodie-Hamburger/
├── index.html
├── style.css
└── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Laman Web Foodie Hamburger.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengurus elemen interaktif tapak web, seperti menu hamburger.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/Foodie-Hamburger.git

Salin selepas log masuk

Buka direktori projek:
```
cd Foodie-Hamburger
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat Laman Web Foodie Hamburger.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Navigasi melalui bahagian menggunakan menu atas atau menu hamburger pada skrin yang lebih kecil.
Terokai pilihan burger yang berbeza dan tawaran istimewa.
Klik ikon menu hamburger untuk membuka atau menutup navigasi pada skrin yang lebih kecil.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Laman Web Foodie Hamburger, termasuk navigasi, bahagian untuk pilihan burger yang berbeza dan pengaki. Berikut adalah coretan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foodie Hamburger</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="main-content">
    <header>
      <div class="header-content">
        <div class="Bina Laman Web Foodie Hamburger">
          <img src="./images/Bina Laman Web Foodie Hamburger.svg" alt="Bina Laman Web Foodie Hamburger">
        </div>
        <div class="hamburger-menu-container">
          <div class="hamburger-menu">
            <span class="hamburger-icon">&#9776;</span>
          </div>
        </div>
        <nav>
          <span class="close-icon">&times;</span>
          <a href="#top-picks">Top Picks</a>
          <a href="#whooper">Whopper</a>
          <a href="#stunner-menu">Stunner Menu</a>
          <a href="#new-foodie-collection">New Foodie Collection</a>
          <a href="#deal-of-the-day">Deal of the Day</a>
        </nav>
      </div>
    </header>
    <main>
      <section class="hero-section">
        <div class="img-container">
          <img src="./images/hero-image.png" alt="hero-image">
        </div>
        <p>Well, You can’t resist anymore!</p>
      </section>
      <section id="top-picks" class="section">
        <h2>Top Picks</h2>
        <div class="img-container">
          <img src="./images/burger-1.png" alt="burger-1">
        </div>
      </section>
      <section id="whooper" class="section">
        <h2>Whopper</h2>
        <div class="img-container">
          <img src="./images/burger-2.png" alt="burger-2">
        </div>
      </section>
      <section id="stunner-menu" class="section">
        <h2>Stunner Menu</h2>
        <div class="img-container">
          <img src="./images/burger-3.png" alt="burger-3">
        </div>
      </section>
      <section id="new-foodie-collection" class="section">
        <h2>New Foodie Collection</h2>
        <div class="img-container">
          <img src="./images/burger-4.png" alt="burger-4">
        </div>
      </section>
      <section id="deal-of-the-day" class="section">
        <h2>Deal of the Day</h2>
        <div class="img-container">
          <img src="./images/burger-5.png" alt="burger-5">
        </div>
      </section>
      <footer>
        <h3 class="go-to-top"><a href="#">Go to Top</a></h3>
        <p class="footer-text">Made with ❤️ by Abhishek Gurjar</p>
      </footer>
    </main>
  </div>
</body>
</html>

Salin selepas log masuk

CSS

Fail style.css menggayakan Laman Web Foodie Hamburger, memastikan ia menarik secara visual dan responsif. Di bawah ialah beberapa gaya utama:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #f6f0eb;
  font-family: 'Poppins', sans-serif;
}

.main-content {
  overflow-x: hidden;
  height: 100vh;
  scroll-behavior: smooth;
}

a {
  text-decoration-line: none;
  color: inherit;
}

header {
  background-color: #fff;
  padding: 24px;
}

.header-content {
  max-width: 1290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

nav {
  display: flex;
  /* gap: 60px; */
}

nav a {
  font-weight: 700;
  font-size: 20px;
  color: #492118;
}

nav a + a {
  margin-left: 60px;
}

.Bina Laman Web Foodie Hamburger {
  width: 50px;
}

img {
  width: 100%;
}

main {
  padding: 0 24px;
}

.hero-section {
  margin-top: 100px;
}

.img-container {
  max-width: 1290px;
  margin: 0 auto;
}

.hero-section p {
  color: #492118;
  text-align: center;
  font-size: 24px;
}

.section {
  margin-top: 120px;
}

.section .img-container {
  max-width: 960px;
}

.section h2 {
  font-weight: 700;
  font-size: 48px;
  color: #492118;
  text-align: center;
}

.go-to-top {
  text-align: right;
  max-width: 960px;
  margin: 0 auto;
  font-size: 32px;
  margin-top: 80px;
}

.go-to-top a {
  text-decoration-line: underline;
}

.footer-text {
  text-align: center;
  color: #858585;
  font-size: 24px;
  margin-top: 64px;
}

.close-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  display: none;
}

.hamburger-menu-container {
  overflow: hidden;
  position: relative;
  width: 40px;
  height: 40px;
  display: none;
}

.hamburger-menu {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -64px;
  right: -58px;
  background-color: white;
  cursor: pointer;
}

.hamburger-icon {
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

@media (max-width: 1200px) {
  nav a {
    font-size: 16px;
  }

  nav a + a {
    margin-left: 48px;
  }

  header {
    padding: 16px 24px;
  }
}

@media (max-width: 960px) {
  nav a {
    font-size: 12px;
  }

  nav a + a {
    margin-left: 32px;
  }

  .hero-section {
    margin-top: 32px;
  }

  .section {
    margin-top: 42px;
  }

  .hero-section p {
    font-size: 10px;
  }

  .section h2 {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  header {
    background-color: #f6f0ebb7;
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    padding: 8px 24px;
  }

  .header-content {
    min-height: 40px;
  }

  nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    padding: 24px;
    right: -200px;
    top: 16px;
    transition: right 0.25s ease-in-out;
    /* display: none; */
  }

  nav a + a {
    margin: 0;
    margin-top: 16px;
  }

  .close-icon,
  .hamburger-menu-container {
    display: block;
  }

  .menu-open nav {
    /* display: flex; */
    right: 24px;
  }

  .menu-open .hamburger-menu-container {
    display: none;
  }

  .go-to-top {
    font-size: 12px;
    margin-top: 40px;
  }

  .footer-text {
    font-size: 10px;
    margin-top: 32px;
  }

  .Bina Laman Web Foodie Hamburger {
    width: 30px;
  }
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk pop timbul bar menu berdasarkan penukaran tab input pengguna . Berikut adalah coretan:

const hamburgerIcon = document.querySelector('.hamburger-menu-container');
const headerContent = document.querySelector('.header-content');
const closeIcon = document.querySelector('.close-icon');
const nav = document.querySelector('nav');

hamburgerIcon.addEventListener('click', (e) => {
  e.stopPropagation();
  headerContent.classList.add('menu-open');
});

nav.addEventListener('click', (e) => {
  e.stopPropagation();
});

closeIcon.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

window.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Laman Web Foodie Hamburger di sini.

Kesimpulan

Membina Laman Web Foodie Hamburger ialah peluang yang hebat untuk mencipta pengalaman web yang menarik secara visual dan interaktif. Projek ini mempamerkan pelbagai pilihan burger dan tawaran istimewa, memberikan pengalaman menyemak imbas yang menarik untuk pengguna. Dengan menggunakan HTML, CSS dan JavaScript, kami mencipta tapak web yang responsif dan mesra pengguna yang menyerlahkan kemahiran pembangunan bahagian hadapan yang penting. Saya harap projek ini memberi inspirasi kepada anda untuk meneroka cara kreatif untuk membina pengalaman web yang menarik. Selamat mengekod!