Créer un site Web de hamburgers gourmands

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : un site Web Foodie Hamburger. Ce projet est parfait pour ceux qui cherchent à créer un site Web visuellement attrayant et fonctionnel présentant diverses options de hamburgers. C'est un excellent moyen d'améliorer vos compétences en développement front-end en utilisant HTML, CSS et JavaScript tout en créant une expérience Web agréable pour les utilisateurs.

Aperçu du projet

Le Foodie Hamburger Website est une application Web conçue pour présenter différents menus de burgers et offres spéciales. Avec un design épuré et moderne, il permet aux utilisateurs de naviguer facilement à travers diverses sections, telles que Top Picks, Whopper, Stunner Menu, New Foodie Collection et Deal of the Day. Ce projet montre comment créer un site Web interactif et esthétique.

Caractéristiques

• Navigation interactive : un menu hamburger qui se réduit et se développe sur des écrans plus petits pour une meilleure convivialité.
• Conception réactive : garantit que le site Web s'affiche parfaitement sur les ordinateurs de bureau et les appareils mobiles.
• Mise en page épurée : fournit un moyen visuellement attrayant d'afficher différentes options de hamburgers et des offres spéciales.

Technologies utilisées

• HTML : fournit la structure du site Web Foodie Hamburger.
• CSS : stylise le site Web pour créer un design moderne et réactif.
• JavaScript : Gère les éléments interactifs, y compris la fonctionnalité du menu hamburger.

Structure du projet

Voici un aperçu de la structure du projet :

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

• index.html : Contient la structure HTML du site Web Foodie Hamburger.
• style.css : inclut des styles CSS pour créer un design attrayant et réactif.
• script.js : Gère les éléments interactifs du site Web, comme le menu hamburger.

Installation

Pour démarrer le projet, suivez ces étapes :

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Foodie-Hamburger
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour afficher le site Web Foodie Hamburger.

Usage

1. Ouvrez le site Web dans un navigateur Web.
2. Naviguez dans les sections en utilisant le menu supérieur ou le menu hamburger sur des écrans plus petits.
3. Explorez différentes options de hamburgers et des offres spéciales.
4. Cliquez sur l'icône du menu hamburger pour ouvrir ou fermer la navigation sur des écrans plus petits.

Explication du code

HTML

Le fichier index.html définit la structure du site Web Foodie Hamburger, y compris la navigation, les sections pour les différentes options de hamburgers et le pied de page. En voici un extrait :

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


  <div class="main-content">
    <header>
      <div class="header-content">
        <div class="Créer un site Web de hamburgers gourmands">
          <img src="./images/Cr%C3%A9er%20un%20site%20Web%20de%20hamburgers%20gourmands.svg" alt="Créer un site Web de hamburgers gourmands">
        </div>
        <div class="hamburger-menu-container">
          <div class="hamburger-menu">
            <span class="hamburger-icon">☰</span>
          </div>
        </div>
        <nav>
          <span class="close-icon">×</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>

CSS

Le fichier style.css stylise le site Web Foodie Hamburger, garantissant qu'il est visuellement attrayant et réactif. Voici quelques styles clés :

* {
  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;
}

.Créer un site Web de hamburgers gourmands {
  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;
  }

  .Créer un site Web de hamburgers gourmands {
    width: 30px;
  }
}

Javascript

Le fichier script.js contient la logique du pop-up de la barre de menus basée sur le changement d'onglet de saisie de l'utilisateur. En voici un extrait :

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');
});

Démo en direct

Vous pouvez consulter la démo en direct du projet de site Web Foodie Hamburger ici.

Conclusion

La création du site Web Foodie Hamburger a été une opportunité fantastique de créer une expérience Web visuellement attrayante et interactive. Ce projet présente diverses options de hamburgers et des offres spéciales, offrant une expérience de navigation agréable aux utilisateurs. En appliquant HTML, CSS et JavaScript, nous avons créé un site Web réactif et convivial qui met en valeur les compétences essentielles en développement front-end. J'espère que ce projet vous incitera à explorer des façons créatives de créer des expériences Web attrayantes. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours d'apprentissage continu en développement Web.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!