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

edixlk

@EdixlkGrenada50 points

new to web development

Latest solutions

  • Product preview card using grid & flexbox


    edixlk•50
    Submitted about 2 months ago

    0 comments
  • Recipe page (Sematic html)


    edixlk•50
    Submitted 6 months ago

    1 comment
  • Social links profile page using CSS grid and flexbox


    edixlk•50
    Submitted 6 months ago

    1 comment
  • Blog page using CSS flexbox, object-fit and clamp()


    edixlk•50
    Submitted 7 months ago

    1 comment
  • Responsive QR code component using flexbox and clamp()


    edixlk•50
    Submitted 7 months ago

    1 comment

Latest comments

  • Mariana Araripe•110
    @marianaararipe
    Submitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    My biggest challenge was making the product image stay perfectly square on smaller screens while keeping the layout proportional and visually appealing. After some research, I discovered the CSS "aspect-ratio" property, which allows you to define the relationship between width and height of an element. By using "aspect-ratio: 1 / 1", I was able to make the image automatically adapt and remain a perfect square on mobile — without relying on "hacks" like fixed heights or padding tricks.

    Responsive Product Preview Card Component | HTML/CSS

    1
    edixlk•50
    @Edixlk
    Posted about 2 months ago

    Great, the font for the "add to cart button" has to changed to the monserrat font face. I am facing the same issues with the font also.

  • Donald-cmd-ops•40
    @Donald-cmd-ops
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    trine make it closer to Figma

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

    very hard to make exact same as Figma not knowing the spacing the stuff

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

    wanna learn how to make page more efficient and how to make it looks more similar to Figma design

    recipe page html and css

    1
    edixlk•50
    @Edixlk
    Posted 6 months ago

    Everything looks great, I suggest you get the correct font for the heading and fix the padding for the card and body itself

  • whosadik•300
    @whosadik
    Submitted 7 months ago

    Social Links

    1
    edixlk•50
    @Edixlk
    Posted 6 months ago

    Great, Can you try centering the card itself by using flexbox on the container or wrapper and make the "Jessica Randall" text a bit bolder?

  • Rahat-Hridoy•30
    @Rahat-Hridoy
    Submitted 8 months ago

    Blog_Preview_Card

    1
    edixlk•50
    @Edixlk
    Posted 7 months ago

    I think that the card would need a bit more of the border radius and width. and you can center it two ways by using:

    Flexbox

    display: flex; justify-content: center; align-content: center;

    Grid (Which is just only two lines of code)

    display: grid; place-content: center;

    the paragraph line spacing is fine also

  • Nader Ashraf•50
    @iNader98
    Submitted 7 months ago

    QR Card Component

    1
    edixlk•50
    @Edixlk
    Posted 7 months ago

    Is it possible if you can make the card a bit higher and change the color of the header text?

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