Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
3

Alek

@aleknovkovski150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Single Page Designer's Portofolio, Including Custom Infinite Carousel


    Alek•150
    Submitted about 2 years ago

    0 comments
  • Responsive landing page with a split hero, and pricing boxes


    Alek•150
    Submitted about 2 years ago

    0 comments
  • Clever Landing Page Challenge w Offset Hero Images (fully responsive)


    Alek•150
    Submitted about 2 years ago

    0 comments
  • Super-tricky landing-page with multi-layered design


    Alek•150
    Submitted about 2 years ago

    1 comment
  • Responsive "Request Access" Squeeze Page for SaaS-type Brand


    Alek•150
    Submitted over 2 years ago

    0 comments
  • Responsive Mobile App Landing Page with Tricky Element Positioning


    Alek•150
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • TheDudeNameLam•430
    @LiamPerryman
    Submitted about 2 years ago

    WorkIT

    1
    Alek•150
    @aleknovkovski
    Posted about 2 years 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
  • Rabbituz•160
    @Rabbituz
    Submitted about 2 years ago

    Workit lading page

    1
    Alek•150
    @aleknovkovski
    Posted about 2 years 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
  • Ryan Hemrick•290
    @Ryan-Hemrick
    Submitted about 2 years ago

    HTML & CSS Solution

    1
    Alek•150
    @aleknovkovski
    Posted about 2 years 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub