landing-page

This is a dummy webpage created to practice my HTML and CSS skills.

Disclaimer

This website is viewed most optimally on Google Chrome. Some attributes such as gap or margin may not appear correctly on some browsers like Safari.

Components

It contains five flexbox containers that also may also contain flexbox containers as items themselves. The main five containers are of class (in order):

1. header
2. content
3. quote
4. signup
5. footer

   header

   The header consists of a logo, pseudo-links, text boxes, a looping video and a sign-up button. Organizing the header improved my flexbox skills as I manipulated the content by using multiple containers. I also nested the containers to utilize the flex-direction attribute and align the content into columns and rows.

   content

   The content container consists of a header text multiple pictures aligned in a row along with their respective captions. In order to align the captions with their pictures, I created div containers holding the pictures and captions separately.

   quote

   The quote container takes up a fourth of the page and contains only a quote from one of my favorite movies in cursive font. It has a considerable amount of padding to emohasize the importance of the quote.

   signup

   The signup container parodies a website asking for visitors to sign-up to their email list and includes a *don't* sign-up button similiar to the button in the header.

   footer

   The footer only contains the copyright statement. It has the same background color as the header.

   Summary

   The landing-page helped me practice correctly using HTML anchor tags and strategically nesting them in order to best stylize them using CSS specificity and the Box Model. I can definitely work on naming classes better and chaining containers and items more efficiently.