Modern-Ui-

🍱 Sushiman - Modern Japanese Restaurant Website

A modern, responsive website for a Japanese restaurant featuring elegant animations, intuitive navigation, and a stunning showcase of Japanese cuisine. Built with attention to UI/UX principles and modern web development practices.

✨ Features

• Modern Design: Clean and contemporary interface that emphasizes visual appeal
• Responsive Layout: Fully adaptive design that works seamlessly across all devices
• Smooth Animations: Integration of GSAP and AOS for engaging scroll-based and interactive animations
• Interactive Menu: Dynamic food filtering system with attractive food cards
• Performance Optimized: Efficient loading and rendering of assets
• Accessibility Focused: Semantic HTML and proper ARIA attributes

🛠️ Tech Stack

• HTML5
• CSS3 (with custom properties and flexbox)
• JavaScript (ES6+)
• GSAP (GreenSock Animation Platform)
• AOS (Animate On Scroll)
• Modern CSS Reset
• Google Fonts (Playfair Display, Plus Jakarta Sans)

🚀 Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/sushiman.git

2. Navigate to the project directory:

cd sushiman

3. Open index.html in your browser or use a local development server:

# Using Python
python -m http.server 3000

# Using Node.js
npx serve

📱 Responsive Breakpoints

• Desktop: 1024px and above
• Tablet: 750px to 1024px
• Mobile: Below 750px

🎨 Color Palette

• Primary Color: #b1454a
• Secondary Color: #121212
• Background: #fff0de
• Text Colors: Various shades of black and gray
• Accent White: #fff

✅ Key Sections

1. Hero Section: Captivating introduction with Japanese typography and high-quality food imagery
2. About Us: Story and mission statement with elegant image composition
3. Popular Foods: Interactive menu showcase with ratings and pricing
4. Trending: Featured sushi and drinks with dynamic layout
5. Subscribe: Newsletter subscription with custom-styled form
6. Footer: Navigation and social media links

🌟 Animations

The website features two types of animations:

1. GSAP Animations:

   • Header elements entrance
   • Hero section content reveal
   • Testimonial slide-in

2. AOS (Animate On Scroll):

   • Menu cards fade-up
   • Image reveals
   • Content block animations

🙏 Credits

• Development Tutorial: JavaScript Mastery (YouTube)
• Try to replicate the design post on dribbble by Hakim Haiman
• Design inspiration from Hakim Haiman
• Icons from various free SVG providers
• Images are placeholder assets

Developed with ❤️ by [Md Shahil]

Feel free to star ⭐ this repository if you find it helpful!