Skip to content

Latest commit

 

History

History
93 lines (62 loc) · 2.92 KB

README.md

File metadata and controls

93 lines (62 loc) · 2.92 KB

Project Banner


html5 css3 vite

JBL Modern UI Landing Page

📋 Table of Contents

  1. 🤖 Introduction
  2. ⚙️ Tech Stack
  3. 🔋 Features
  4. 🤸 Quick Start

🤖 Introduction

Develop a Jbl website showcasing products, headphone using HTML and CSS with smooth subtle animations.

⚙️ Tech Stack

  • HTML 5
  • CSS 3
  • Vite

🔋 Features

👉 CSS Variables: Utilize CSS variables to maintain a consistent and easily adjustable styling approach throughout the project

👉 Flex and Position Properties: Use of flex and position properties in CSS to create responsive and well-structured layouts.

👉 Rendering HTML through JavaScript: Rendering HTML through JavaScript using reusable functions, enhancing code efficiency.

👉 Smooth Animations: Smooth and subtle animations to enhance the overall user experience, focusing on fluid transitions.

👉 BEM Method: 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: The application is completely responsive across all devices, employing responsive design techniques such as media queries and fluid layouts.

all these while creating the sushi website with,

  • Navigation Bar
  • Creative Hero Section
  • About Us Section
  • Popular headphone, Jbl website
  • Newsletter Signup and Footer

🤸 Quick Start

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/Mohamadreza-Hosseinkhani/jbl-landing-page.git
cd jbl-landing-page

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.