Zerodha Clone 📈

A responsive Zerodha landing page clone built using HTML and CSS.

This project was created to practice frontend development, website layout, CSS styling, and responsive design by recreating the interface of the Zerodha website.

🚀 Features

• Zerodha-inspired landing page
• Responsive navigation bar
• Hero section
• Product and platform sections
• Education section
• Pricing section
• Footer
• Responsive layout
• Custom CSS styling
• Image and SVG assets

🛠️ Technologies Used

• HTML5
• CSS3

📚 Concepts Practiced

This project helped me practice:

• HTML semantic elements
• CSS styling
• Flexbox
• Responsive design
• Navigation bars
• Website layouts
• Sections and containers
• Image handling
• SVG usage
• CSS positioning
• Typography
• Footer design

📁 Project Structure

zerodha/
│
├── 0-20-image.png
├── Footer-Logos-1.png
├── Icon-logo.png
├── ecosystem-img.png
├── index-education-img.svg
├── index.html
├── landing-Zeroda.png
├── logo-Zorodo.svg
├── other-trades-20.svg
├── press-logos-zeroda.png
├── pricing-eq-0.svg
├── style.css
└── README.md

▶️ How to Run

No installation is required.

Clone the repository:

git clone https://github.com/AfeedaKN/zerodha.git

Go to the project folder:

cd zerodha

Open index.html in your browser.

You can also use the Live Server extension in VS Code to run the project locally.

🎯 Purpose

This project was created as a frontend practice project to understand how professional landing pages are structured and styled using HTML and CSS.

💡 Learning Outcomes

Through this project, I practiced:

• Building a complete webpage from scratch
• Creating responsive layouts
• Using Flexbox
• Working with images and SVGs
• Structuring HTML sections
• Styling pages with CSS
• Recreating an existing website design

⚠️ Disclaimer

This project is created for educational and practice purposes only. It is not affiliated with or endorsed by Zerodha.

👩‍💻 Author

Afeeda KN

GitHub: AfeedaKN