Discord Landing Page Clone

This project is a fully responsive clone of the Discord landing page, created using HTML, CSS, and JavaScript. It showcases essential front-end development skills such as mobile-first design, industry-standard CSS practices, animation, and SVG handling.

Live Demo

You can view the live version of the project here: Discord Landing Page Clone

Preview

Features

• Responsive Design: The page is fully responsive, ensuring a great user experience across devices and screen sizes.
• Mobile-First Approach: The design is optimized for mobile devices first, with enhancements for larger screens.
• AOS Animation: Integrated animations using the AOS (Animate on Scroll) library for a smooth user experience.
• SVG Handling: Optimized SVG management by importing and handling all SVGs from a single file.

Technologies Used

• HTML: Used to structure the content of the page.
• CSS:
  • Utilized Flexbox for creating flexible layouts.
  • Applied CSS Grid for complex layout management.
  • Used Media Queries for responsive design.
• JavaScript:
  • Incorporated animations using the AOS library.
  • Managed SVGs and interactions for better performance.

Learning Highlights

HTML

• Used semantic HTML5 elements for better SEO and accessibility.

CSS

• Flexbox and Grid for efficient, modern layouts.
• Media Queries to create a responsive, mobile-first design.
• Applied industry-standard CSS practices to ensure clean, maintainable code.

JavaScript

• AOS Animation: Integrated a library to add smooth animations on scroll.
• SVG Optimization: Handled multiple SVGs efficiently by organizing them into a single file.

Getting Started

1. Clone this repository:

git clone https://github.com/f-z-coder/Discord_Clone.git

2. Open index.html in your browser to view the project.

Project Structure

.
├── imgs
├── index.html
├── style.css
├── script.js
├── README.md

Acknowledgements

This project is inspired by the official Discord landing page.