Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
4

Mazen Ahmed

@Mazen922Riyadh80 points

a frontend developer 🎪

I’m currently learning...

HTML & CSS & Javascript

Latest solutions

  • Typemaster pre-launch landing page

    #pure-css#accessibility

    Mazen Ahmed•80
    Submitted 8 days ago

    . Media query and responsive design. . Height and Width for the Elements


    0 comments
  • Workit landing page

    #pure-css

    Mazen Ahmed•80
    Submitted about 2 months ago

    . Media query understanding . understand the width and height more and how to focus with them for each element in each media screen size .


    1 comment
  • Product-preview-card-component Using HTML & CSS

    #accessibility

    Mazen Ahmed•80
    Submitted over 1 year ago

    2 comments
  • Pure HTML & CSS , Flex box

    #accessibility

    Mazen Ahmed•80
    Submitted over 1 year ago

    2 comments
  • Pure HTML & CSS without using Flexbox

    #accessibility

    Mazen Ahmed•80
    Submitted over 2 years ago

    2 comments

Latest comments

  • P
    Oryan Hachamoff•440
    @oryanhach
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I have had much fun trying this challenge, learnt a few things and got better at others. It is my last challenge in the Newbie category. Cant wait to start the Junior category's challenges.

    Workit Landing Page Solution

    1
    Mazen Ahmed•80
    @Mazen922
    Posted about 2 months ago

    Hi Oryan this is very nice solution for the challenge , i like how you center the phone image and make borders in the right , left corners ... but i have better way to do so..

    give the hero section :: after pseudo class and check my gitbub repo to take the image for the curve in order to make it the right way .

    make the image on background using background-image and set it as position absolute for relative hero section and also don't forget the margin-top on the phone because i saw you don't use it .

    Hope this could help and all the best for you :)

  • P
    VirginiaPatrika•260
    @VirginiaPat
    Submitted about 2 months ago

    Workit-landing page - Tailwind

    #tailwind-css
    1
    Mazen Ahmed•80
    @Mazen922
    Posted about 2 months ago

    Hi Virginia Nice work in general , just small tip to make your work responsive , try to give the image on the right "the circle image" to give it overflow :hidden or to the all container of your website ..

    Hope it could help and best of luck (:.

    Marked as helpful
  • P
    pietrodev01•260
    @pietrodev01
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Workit Landing Page

    Here's what I learned:

    To make a circle make sure the width and height are the same as it is on figma and use border radius.

    Curved bottom: clip-path: ellipse(100% 100% at top); ellipse(100% 100%) → Creates an ellipse that spans 100% of the width and 100% of the height of the element

    at top → cuts the ellipse at the top of the element with the ellipse on the bottom

    To put an image on top of the ellipse I had to create an element outside of its container. I then did position absolute and centered it.

    On the desktop version I set the width of the photo to a vw value so it is responsive with width (calc(25vw + 20vh)). I set the value of left of the img container to a vw value as well so its container is responsive with width.

    Workit Landing Page

    1
    Mazen Ahmed•80
    @Mazen922
    Posted about 2 months ago

    This is a nice solution for the challenge .

    Just a small tip to make your website responsive in the desktop version

    .Try to make the shapes at the left and right in the hero-section "the circles shape " with :after and :before pseduo classes in order to make the overflow:hidden work and Don't give them block display you don't have to . this will make it perfect .

    All the best :)

  • Mazen Ahmed•80
    @Mazen922
    Submitted over 2 years ago

    Pure HTML & CSS without using Flexbox

    #accessibility
    2
    Mazen Ahmed•80
    @Mazen922
    Posted over 1 year ago

    Thanks @ecemgo it worked well with me in HTML feedback, but in CSS advice the body tag styling couldn't be centered by your code, but I got it 😊👌.

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

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

Oops! 😬

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

Log in with GitHub