Headphones Landing Page: A Responsive Design Project
This repository contains the front-end implementation (HTML and CSS) for a premium, responsive landing page dedicated to showcasing a high-fidelity line of headphones. The design is meticulously crafted to be visually stunning, featuring a dark, focused aesthetic (as seen in the hero section) and adhering strictly to professional design specifications.
Design Source & Specifications
The entire project is a direct implementation of a detailed design provided in Figma. All layout, typography, and color choices are derived from the source file.
Figma Project:
Required Fonts: Source Sans Pro and Spin Cycle OT.
Mandatory Technical Constraints
The following critical rules must be enforced across the entire webpage:
Feature
Specification
Notes
Max Content Width
1000px
All main content is contained within this max width and is horizontally centered on the page.
Mobile Breakpoint
The layout must switch to the optimized mobile design when the viewport is 480px or narrower.
Links Hover/Active
Color: #FF6565 (Red)
Applies to all navigation and text links (e.g., the top-right menu).
Button Hover/Active
Opacity: 0.9
A subtle, consistent interaction effect for all primary and secondary buttons (e.g., "CALL TO ACTION").
Figma Values
Float values were rounded.
All fractional measurements (paddings, margins, font sizes) extracted from the Figma file were rounded to the nearest integer for CSS implementation.
Getting Started
To clone this project and view the landing page in your browser:
Clone the repository:
git clone https://github.com/Ebiere24/alx_html_css.git
Navigate to the project directory:
cd alx_html_css/headphones
Open the file: Open the index.html file in your preferred web browser (Chrome, Firefox, Safari, etc.).
Repository Structure
alx_html_css/ └── headphones/ ├── 0-index.html # The complete semantic HTML structure of the landing page. ├── 0-style.css # The CSS file containing all styling, including responsiveness. └── README.md # This documentation file.