Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
32
Comments
9

Tomosori Ayomide

@tomosoriayomideAbuja, Nigeria510 points

I am a frontend web developer who loves coding.

I’m currently learning...

I am currently learning Frontend web development.

Latest solutions

  • Sunny Side Agency Landing Page Lite


    Tomosori Ayomide•510
    Submitted 16 days ago

    0 comments
  • Social Proof Section Main


    Tomosori Ayomide•510
    Submitted 16 days ago

    0 comments
  • Notification Page


    Tomosori Ayomide•510
    Submitted 16 days ago

    0 comments
  • Article Preview Component


    Tomosori Ayomide•510
    Submitted 16 days ago

    0 comments
  • Testimonial Grid Section


    Tomosori Ayomide•510
    Submitted about 2 months ago

    1 comment
  • Four Card Feature


    Tomosori Ayomide•510
    Submitted about 2 months ago

    1 comment
View more solutions

Latest comments

  • antoni0kim•190
    @antoni0kim
    Submitted 16 days ago
    What are you most proud of, and what would you do differently next time?

    The mobile site looks exactly what I wanted. I wish I named all the classes and ids before delving into JavaScript.

    What challenges did you encounter, and how did you overcome them?

    Learning about position and z-index, along with the description of what I wanted for the component, which was drawer/popover, was a big challenge. I didn't understand how to describe what I wanted and it was a big challenge trying to find solution online. So I went to bootstrap framework website and try to find the look and the behaviour of the share component, which turned out to be popover on desktop and drawer on mobile. I also had to learn and really apply position and z-index to really apply what I wanted to do with only css. So I went to learn about creating a simple drawer, and then applied to the project which turned out to be very helpful

    What specific areas of your project would you like help with?

    I would like help on adding triangle on top of share button in desktop, along with image. The image doesn't seem right to me and should be cropped out more than what is currently being shown. I'd also like some feedback on animation, which I do not know whether if ease-in is the correct way to do so.

    Article preview component solution

    1
    Tomosori Ayomide•510
    @tomosoriayomide
    Posted 16 days ago

    As regards the triangle, I normally use another div(square) inside that rectangle with position of absolute then you position with : right: ; left: ; then the square i use a transform: rotate(xdeg) property to make it look like a triangle then give it the same background color as the parent div.

  • web-dev-pasta•790
    @web-dev-pasta
    Submitted 3 months ago

    Testimonials Grid Section Main

    1
    Tomosori Ayomide•510
    @tomosoriayomide
    Posted about 2 months ago

    This is a nice job. It is responsive as well as it is nice and neat.The structure of the codes makes it easier to read and understand. In a nutshell i would say you have done a good job.

    Marked as helpful
  • cat-script•250
    @cat-script
    Submitted about 2 months ago

    Four card feature section

    1
    Tomosori Ayomide•510
    @tomosoriayomide
    Posted about 2 months ago

    Your Work is nice and well structured. I love the responsiveness and the breakpoints used. Good job keep it up.

  • P
    Alex•200
    @Oleksandr5768965
    Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I didn't understand how to make the image change when the screen width changed. I found a solution in the <picture> tag.

    I also noticed that the image that was in the project files differs from the image in the design. I solved this by exporting the image from Figma in order to bring the solution as close to the design as possible.

    grid layouts, media queries,

    1
    Tomosori Ayomide•510
    @tomosoriayomide
    Posted 3 months ago

    This is a nice job you got here. I love the responsiveness on different screen sizes.

  • kuzukani•250
    @Kuzukani
    Submitted 3 months ago

    recipe-page

    1
    Tomosori Ayomide•510
    @tomosoriayomide
    Posted 3 months ago

    This is awesome. Love the responsiveness even on an apple watch 6 series it still looks nice.

  • Abbas•30
    @Abbas-Qurbani
    Submitted 4 months ago

    Social-links-profile

    1
    Tomosori Ayomide•510
    @tomosoriayomide
    Posted 3 months ago

    To start with you have a nice job here. The background color on hover is actually too dark and does not look visually appealing so if you can make it lighter, also when it comes to mobile screens the card content looks so small so probably if you can increase the width of the cards to like a 100% and give your body a padding of about 20px, then also on hover make the div "cursor: pointer;" instead of the text alone.

View more comments
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

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

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