Skip to content
Submitted over 1 year ago

HTML & CSS Solution

Ryan Hemrick•290
@Ryan-Hemrick
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Workit landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello!

I decided to use basic HTML & CSS (flexbox) for this project.

I went back-and-forth with how I wanted to offset the phone image within the header / hero section. Ultimately, I decided to position it absolute and translate it to the correct position. This feels a bit forced, but seemed like a better approach than keeping it position: relative and offsetting it. Also, I couldn't get the rounded borders of the first two sections to get the right angle. I used a pseudo-element with border-radius, but it looks like it needs a value of more than 50% to look correct.

Any feedback is appreciated!

Community feedback

  • Alek•150
    @aleknovkovskiPosted over 1 year ago

    Hi Ryan :) Great job on matching everything else in the design. The large curve is achieved using the scaling trick. Basically you take the element which you applied curved borders on, and scale it up. It's basically going to produce a bigger/rounder object (most of which is off-screen), and so the curve visible on screen is larger. You do have to hide the excess object you've produced though, so you set overflow to hidden or clip.

    You can check out my solution for the exact code. Just look at .hero::after pseudoelement.

    Marked as helpful
    0
    Ryan Hemrick•290
    @Ryan-HemrickPosted over 1 year ago

    @aleknovkovski that was actually an approach that I tried earlier on, but couldn't get the overflow the hide properly! I'll have a look at your solution.

    Thank you!

    0
    Alek•150
    @aleknovkovskiPosted over 1 year ago

    @Ryan-Hemrick feel free to reply on here if you get stuck. It's a lot of code across a lot of selectors. It was quite tricky. If you omit just one relevant property, the whole thing breaks, or doesn't work as expected, either the overflow doesn't work, or the layering gets messy. I also described the entire process in the Readme under "What I Learned". The z-index is also relevant.

    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