10th Project - Fylo Landing Page With Two Column Layout Master

I was great challenge to practice landing page structure. Things I have learned:

1. use form for the form(s) There were two inputs in the project, when something contains input and submit button use <form> tag for it

2. inputs must always have labels <label for="email"></label> <input type="email" id="email" name="email" placeholder="Enter your email" required>

3. using figure with a blockquote and figcaption inside for the testimonial.

• <figure>: This element is used to group together content that is referenced from the main content, such as images, charts, diagrams, code snippets, etc. It helps in associating related content together. In your case, the testimonial as a whole, including the quote and the image, is a single entity, and <figure> provides a suitable container.
• <blockquote>: This element is specifically designed for marking up block-level quotations. It helps in indicating that a particular section of text is a quotation from another source. In your example, the actual testimonial text is marked up with <blockquote>, making it clear that this part of the content is a quote.
• <figcaption>: This element is used to provide a caption or legend for the content inside a <figure>. It adds a description or context to the content within the <figure>. In your example, the <figcaption> contains information about the author (name and role), serving as a caption for the testimonial.

4. links to phone and email in footer are not site navigation items so must not be in a nav When we do not need to redirect something we should not use it in navigation

5. as you have more than one nav on a page, these must both be labelled eg aria-label. I labeled the header nav with "primary" and footer nav with "secondary"

6. How redirect user to page and open it in a new window You must not forget https:// before your website otherwise it wont work <a href="https://www.facebook.com" target="_blank">Facebook</a>

What I need help with

1. I do not know how to create the background for mobile and desktop versions
2. I still do not know how to make social icons smaller as designed (fb, ig, twitter)
3. I dont know how to make SVG with icon change colour, (See how Fylo works)