Skip to content
OverviewSolutions
7
Comments
3
P
Alek
@aleknovkovski

All comments

  • Alek•150
    @aleknovkovskiPosted over 1 year ago

    Hi Liam ^_^ In response to your request:

    • First of all great job on getting most of the elements done

    I see that you didn't replicate the divider curve, but that's normal, most solutions don't implement this part exactly because it is kind of tricky. It involves combining several tricks.

    You need to use an empty :before element, an empty :after element, use the scale function (so it grows the circle and results in a bigger curve), and then finally you'll need to use overflow:hidden because that circle is going to go off-screen.

    If you want to see exactly how it is implemented you can check out my solution, I document this in the repo.

    Marked as helpful
    0
  • Alek•150
    @aleknovkovskiPosted over 1 year ago

    Looks good, you've replicated most of the design :) Just wanted to share some thing I learned whilst doing the same project.

    • I see you didn't use the provided fonts. I also didn't use them initially because I didn't realize they're stored in the assets folder. I then updated the project to use those local self-hosted fonts (not the google fonts version which looks slightly different)

    • The curved divider between sections is tricky. I almost gave up on this project because it's so tricky to get everything in the design and also have a curved border. There is a solution though, it involves using ::before and ::after pseudo elements. You set the curve on the ::after and you set those green spring things on the ::before. If you get the z-indexing right you end up achieving all things as per the design. I described the process in the readme in the repo for my challenge if you're curious.

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

    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!

    HTML & CSS Solution

    1
    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