Welcome to the Sushi Delight Responsive Theme repository! This premium, developer-friendly theme is designed to create stunning, responsive websites with a delightful sushi theme. Perfect for restaurants, food bloggers, or anyone looking to add a touch of elegance to their web presence.
- ⬇️ Installation
- 📂 Folder Structure
- ⚙️ Tech Stack
- 🛠️ Features
- 🤝 Connect With me
- 🧾 Credit
Follow these steps to set up the project locally on your machine. Prerequisites Make sure you have the following installed on your machine:
Cloning the Repository
$ git clone https://github.com/prantomollick/sushiman-responsive-web-theme-html-css.git
$ cd sushiman-responsive-web-theme-html-css
Installation Install the project dependencies using npm:
$ npm install
Running the Project
$ npm run dev
Open http://localhost:5173 in your browser to view the project.
.
├── README.md
├── assets
│ ├── about_bg1.png
│ ├── about_bg2.png
│ ├── arrow-horizontal.svg
│ ├── arrow-left.svg
│ ├── arrow-right.svg
│ ├── arrow-up-right.svg
│ ├── arrow-vertical.svg
│ ├── check.svg
│ ├── facebook.svg
│ ├── instagram.svg
│ ├── japanese_drinks.png
│ ├── japanese_sushi.png
│ ├── menu.svg
│ ├── play-circle.svg
│ ├── popular_bg.png
│ ├── search.svg
│ ├── star.svg
│ ├── subscribe_bg.png
│ ├── sushi-1.png
│ ├── sushi-10.png
│ ├── sushi-11.png
│ ├── sushi-12.png
│ ├── sushi-2.png
│ ├── sushi-3.png
│ ├── sushi-4.png
│ ├── sushi-5.png
│ ├── sushi-6.png
│ ├── sushi-7.png
│ ├── sushi-8.png
│ ├── sushi-9.png
│ ├── twitter.svg
│ └── user.png
├── css
│ ├── sections
│ │ ├── about.css
│ │ ├── footer.css
│ │ ├── header.css
│ │ ├── hero.css
│ │ ├── popular.css
│ │ ├── subscribe.css
│ │ └── trending.css
│ └── styles.css
├── index.html
├── js
│ └── script.js
├── package-lock.json
├── package.json
└── public
└── sushi.png
- HTML5
- CSS 3
- AOS Animate on scroll library
- CSS Variables: Utilize CSS variables to maintain a consistent and easily adjustable styling approach throughout the project.
- Importing CSS Files: Promote modularity and organization in styling by importing CSS files into others.
- Flex and Position Properties: Employ flex and position properties in CSS to create responsive and well-structured layouts.
- Rendering HTML through JavaScript: Enhance code efficiency by rendering HTML through JavaScript using reusable functions.
- Smooth Animations: Implement smooth and subtle animations to enhance the overall user experience, focusing on fluid transitions.
- BEM Methodology: Follow the Block Element Modifier (BEM) methodology for naming classes, promoting a clear and maintainable structure.
- Organized File and Folder Structure: Maintain a well-organized file and folder structure for easy navigation and management of project assets.
- Responsive Design: Ensure the application is completely responsive across all devices, employing responsive design techniques such as media queries and fluid layouts.
- Navigation Bar
- Creative Hero Section
- About Us Section
- Popular Food, Trending Sushi, and Drinks Sections
- Newsletter Signup
- Footer
👥 @prantomollick ❌ @prantomollick55 ✉️ prantomollick01@gmail.com 🌎 https://prantomollick.com
This project is develope to followed by the tutorial of JavaScript Mastery