Discord Structure Clone +Login

A responsive static web project replicating the layout and style of the official Discord landing page.
The project is built using HTML5 and CSS3 with a focus on semantic structure, advanced CSS selectors, and responsive design patterns.

🌐 Check it out!

🚀 Features

• Semantic HTML5 structure with header, main, and footer.
• CSS utilities (.d-flex, .justify-content-between, .align-center, etc.).
• Advanced CSS selectors (*, descendant, direct child >, grouped selectors).
• Custom components:
  • Hero/Jumbotron section with background image.
  • Invite-only, Channel, Fandom, and Meeting sections with alternating layouts.
  • Footer with multi-column navigation and social links.
• Responsive containers (.container, .container-sm) with fixed and flexible widths.
• Reusable buttons with different styles (.light-b, .dark-b, .lightblue-b).
• Debug mode for quickly visualizing layout with borders.

🛠️ Technologies Used

• HTML5
• CSS3
  • Flexbox
  • Background images
  • Utility classes
  • Custom buttons
• Google Fonts: Outfit