Web Design Headphones Desktop and Mobile

Our Website is published here: https://abrielleperry.github.io/atlas-headphones/ or https://lustrous-trifle-3e1e5d.netlify.app/

Authors:

• Abrielle Perry
• Allyson Ugarte

Building a Web Page the Right Way

Some guidelines we implemented to ensure your web page is well-structured and maintainable.

Foundations

1. Use Variables

   • Define variables for colors, fonts, and other reusable styles to maintain consistency and make updates easier.

2. Simple/“As Generic As You Can” CSS Selectors

   • Use generic selectors to keep your CSS maintainable and avoid specificity issues.

3. Avoid Using Super Specific CSS Selectors

   • Keep your CSS selectors simple to reduce complexity and improve readability.

4. Simple HTML Structure

   • Use section containers to divide the pages
   • Use div containers in every section to organize your content and keep the structure clean and easy to follow.

5. Building Strategy

   • Build the web page one section at a time and use variables for colors for consistency. Start by building the HTML page and then add the css for each section.

Tasks

Task 1: Create the Header/Hero Piece

• Build the header or hero section as the first task.
• Ensure it is visually appealing and sets the tone for the rest of the web page.

Task 2: Create the "What we do…" Section

• Build the section that describes what the business does.
• Use custom font icons provided in the holberton_school-icon.zip archive.

Task 3: Create the "Our Results" Section

• Showcase the results or achievements of the business.
• Reuse components from the "What we do…" section to maintain consistency.
• Do an overlay showing percentage of business improvement indicators.

Task 4: Contact Form

• A good landing page always includes a contact form.
• We capture the name, the email and allow user to leave a comment
• We have a button to "Call to Action"

Task 5: Footer

• Complete the web page with a footer section.
• Ensure it includes necessary links and information, maintaining the overall design consistency.

File Structure

├── fonts │ └── SourceSansPro
├── images │ ├── hero-bg.jpg │ └── logo.png ├── index.html ├── styles.css