Skip to content
Submitted about 2 years ago

HTML & CSS Solution

Ryan Hemrick•290
@Ryan-Hemrick
A solution to the Workit landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Alek•150
    @aleknovkovski

    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

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