This web page was coded from scratch based on some design models given on Figma
The designs were planned for Desktop, Tablet, and Mobile, so the web page was implemented with responsiveness to different device sizes.
| Desktop (Width: 1400 px) | Tablet (Width: 760 px) | Mobile (Width: 480 px) |
|---|---|---|
 |
 |
 |
The Holberton Headphones web page was developed by sections. These can be previewed in the next links thanks to the help of htmlpreview.github.io.
In order to have a correct preview experience, you must make sure your computer contains certain fonts, source-sans-pro and Spin-Cycle-OT
All of the sections contain the respective code in order to support responsiveness to the sizes mentioned at the beginning.
Header/Hero Section : 0-index.html / 0-styles.css
"What we do..." section: 1-index.html / 1-styles.css
"Our results" section: 2-index.html / 2-styles.css
Contact us section: 3-index.html / 3-styles.css
Footer: 4-index.html / 4-styles.css
No Imgs, only Pure HTML/CSS for "Our results" section: 100-index.html / 100-styles.css
Animations added for "What we do" and "Our results" sections: 101-index.html / 101-styles.css
SASS Version: 102-index.html / 102-styles.css / 102-styles.scss
Besides the responsiveness of the site, the web page was also coded to be as accessible as possible.
This resulted in the only problem of this area to be the contrast of the site, which at the moment can not be changed for design reasons.
Besides this, there are no other issues as shown by an Axe analysis in the browser. This means all aria labels and content presentation considerations were taken into account in the HTML layout.
Jhoan Zamora: jzamora5