Skip to content
Submitted over 1 year ago

huddle landing page with a single introductory

Abdelrahman•90
@Dribbz
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

Hello this is my solution to the landing page challenge ✌️ i had some trouble with the following :

  • the website stretches beyond 1440px which leads to distortion in layout

  • the icons needs to have a circular border with hover effects ( when the border is added they become oval and when i add border-radius:50%; aspect-ratio:1; it still doesnt solve the oval shape around the icons

  • the grid content area in desktop mode isnt fitted well as the design

  • had trouble adjusting the content area in desktop mode ( width and height )

Community feedback

  • Roy•600
    @arkaroy135Posted over 1 year ago

    Hey Abdelrahman, you did a fine job. However, use

    body{
min-width: 100dvh;
min-height:100dvh;
}

    for solving the overflow issue. dvh or dvw units are better at handling the overflow issue. Check my code to solve your icon issue. PS, I also have that overflow issue which I didn't fixed yet.

    Marked as helpful
    1
    Abdelrahman•90
    @DribbzPosted over 1 year ago

    Hey Roy i will give your code a look and try to fix my mistakes.

    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