Créer un site Web de hamburgers gourmands-js tutoriel-php.cn

Build a Foodie Hamburger Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : unsite 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

LeFoodie Hamburger Websiteest 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

Copier après la connexion

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 :

Cloner le dépôt:

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

Copier après la connexion

Ouvrez le répertoire du projet:
```
cd Foodie-Hamburger
```
Copier après la connexion
Exécuter le projet:
- Ouvrez le fichier index.html dans un navigateur Web pour afficher le site Web Foodie Hamburger.

Usage

Ouvrez le site Webdans un navigateur Web.
Naviguez dans les sectionsà l'aide du menu supérieur ou du menu hamburger sur des écrans plus petits.
Explorez différentes options de hamburgerset des offres spéciales.
Cliquez sur l'icône du menu hamburgerpour 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 :

     Foodie Hamburger    
       
   ☰ 
 
  × Top Picks Whopper Stunner Menu New Foodie Collection Deal of the Day 
 
 
     
 Well, You can’t resist anymore!
 
  Top Picks
   
 
  Whopper
   
 
  Stunner Menu
   
 
  New Foodie Collection
   
 
  Deal of the Day
   
 
  Go to Top
 Made with ❤️ by Abhishek Gurjar

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 !