Skip to content
Submitted over 2 years ago

@traez's Huddle landing page with a single intro... using HTML and CSS

Trae Zeeofor•490
@traez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What I learned:

  1. Getting more familiar implementing multiple backgrounds
  2. How to pay attention/build for specified width
  3. Enabling responsive using aspect-ratio and sub-container width
  4. Used gap property to manipulate spacing in Flexbox
  5. Using grid-template-areas to eliminate the mathematics of grid-areas

Continued development:

  1. Forgot to implement "hover states". My apologies.
  2. Having done 11 CSS-HTML projects, I feel comfortable manipulating CSS usefully.
    Truly I was barely scratching the surface previously.
    Now time to move on to Javascript review and projects.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    Hello Traez, congratulations for this amazing solution!

    You've done pretty much everything there, is all nice.

    The only advice I've for your is to delete the big comment from the css(this makes heavier to load) and to replace the background from html to body, note that mobile the background is not full width, try this instead     background-size: contain

    Happy coding

    Marked as helpful
    0
  • Chiquita Minor•170
    @MichelleMinor87Posted over 2 years ago

    This looks awesome keep up the great work!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord