Skip to content

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🍣 Sushiman

Sushiman is a fully responsive restaurant landing page for a fictional Japanese restaurant. The project was a great excuse to get hands-on with frontend fundamentals — CSS variables, modular stylesheets, BEM naming, flexbox layouts, scroll-triggered animations, and a clean project structure powered by Vite.

📦 Technologies

  • HTML5
  • CSS3
  • JavaScript (ES Modules)
  • AOS — Animate On Scroll library for scroll-triggered animations
  • Vite — frontend build tool and local dev server
  • Google Fonts — Playfair Display & Plus Jakarta Sans

🌟 Features

  • Responsive Navigation: A full desktop navbar with links to each section (Menu, Food, Services, About Us) that collapses into a hamburger icon on screens below 900px.

  • Hero Section: A bold full-width hero with a large sushi image and a Japanese kanji overlay, a headline, two call-to-action buttons (Order Now and How to Order), and a customer testimonial block with a review quote and a happy customer count.

  • About Us Section: A two-image side-by-side layout with a Learn More button and a short brand mission statement referencing the Japanese hospitality concept of Omotenashi.

  • Popular Foods Catalog: A horizontally scrollable filter bar (All, Sushi, Ramen, Udon, Danggo, Others) with three product cards below, each showing a food image, name, star rating, and price. One card is highlighted as the active selection.

  • Trending Section: Two subsections — Japanese Sushi and Japanese Drinks — each pairing a featured food/drink image with a checklist of six popular items. A centered "Discover" badge separates both subsections on larger screens.

  • Newsletter Subscription: A full-width subscription banner with an email input and a Get Started CTA button.

  • Footer: Logo, internal navigation links, and social media icons (Facebook, Instagram, Twitter).

  • Scroll Animations: All major sections use data-aos attributes (fade-up, fade-left, fade-right, flip-up, zoom-in, etc.), powered by the AOS library with a 1000ms duration and 100px offset.

▶️ How to Run

  1. Make sure Node.js is installed.
  2. Install dependencies:
    npm install
  3. Start the dev server:
    npm run dev
  4. Open http://localhost:5173 in your browser. To build for production:
npm run build

🍜 Preview

image

About

˙ . ꒷ 🍙 . 𖦹˙— 🐈‍⬛ A responsive sushi restaurant landing page built with HTML, CSS & JavaScript

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages