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

vercthu

@vercthuCuritiba, Brazil120 points

hello. I enjoy rodents. 🐭

Latest solutions

  • Four Card Feature Section with HTML and CSS


    P
    vercthu•120
    Submitted 6 months ago

    1 comment
  • Product Preview Card with CSS and HTML


    P
    vercthu•120
    Submitted 6 months ago

    If there are other alternatives for aligning the bottom of an image with the bottom of the card, please let me know. I don't know why the card's height was always bigger than 450px in the desktop version since the content wasn't as high as 450px. I thought the image height would set the card height to 450px automatically, but it turned higher than I anticipated.


    1 comment
  • Recipe Page with CSS and HTML


    P
    vercthu•120
    Submitted 6 months ago

    1 comment
  • Social Links with CSS and HTML


    P
    vercthu•120
    Submitted 6 months ago

    1 comment
  • Blog Preview Card with HTML and CSS


    P
    vercthu•120
    Submitted 6 months ago

    1 comment
  • QR Code Card with HTML and CSS


    P
    vercthu•120
    Submitted 6 months ago

    1 comment

Latest comments

  • Fernando Foletto•160
    @FernandoFoletto
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Using both grid and flexbox.

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

    The most challenging part for me was getting the grid template to work according to the given design.

    Responsive layout with GRID and Flex

    1
    P
    vercthu•120
    @vercthu
    Posted 6 months ago

    Amazing job with the grid layout! The only things I'd change are aesthetic, such as decreasing the space between the title lines and the card shadow opacity.

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

    i was able to get my webpage up and running

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

    i was not able to change the font of the project i could not fix this

    blog preview solution using html and css

    1
    P
    vercthu•120
    @vercthu
    Posted 6 months ago

    Hi! I saw your code and I noticed the font-face source is src: url('assets/fonts/static/Figtree-Medium.ttf') format('truetype');, but the fonts folder is not inside a assets/ folder. Maybe if you change to src: url('fonts/Figtree-VariableFont_wght.ttf') format('truetype'); it works?

    Marked as helpful
  • Anton Rassanov•50
    @AntonRassanov
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I tried to implement rem and em values instead of px in this solution and used responsive images.

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

    Implement responsive images was pretty challenging but this is a really useful feature

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

    are there any options to optimize the code?

    Product Card Component

    1
    P
    vercthu•120
    @vercthu
    Posted 6 months ago

    Amazing that you added the svg code instead of the file! I'm just not sure if the many image formats is needed since all of them are going to the same screen size.

  • Mohamed Hamdan•80
    @Muhammed-Hamdan
    Submitted 6 months ago
    What challenges did you encounter, and how did you overcome them?
    • Styling of bullets, overcame using ::before and ::marker pseudo-elements
    • Put the image inside a div to style the image for mobile and desktop
    What specific areas of your project would you like help with?
    • How to style the bullets to align vertically with the list content ?
    • How to provide padding for entire content in desktop design and remove padding only for image in mobile design ?

    Recipe page

    1
    P
    vercthu•120
    @vercthu
    Posted 6 months ago

    Hi, nice work! I'm not sure I understood your first question, sorry. As for the second question: I don't quite understand how your code works, but on my code I'd put the image inside a .card container, and this .card container doesn't have a padding on the media query for mobile design, but the sections inside the .card do have a padding. So I left the image outside the sections, using the tag <figure>. You can check my solution here.

  • P
    Marcelo Colodetti Filho•90
    @MarceloColodetti
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Proud to use semantic tags instead of multiple divs and next time i will pay attention to the content size.

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

    The box with the main content was not respecting the dimensions I chose and I resolved this by paying attention and changing the size of the contents inside it.

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

    I would like to know the difference between the outline and border properties in css.

    Blog Card Solution

    2
    P
    vercthu•120
    @vercthu
    Posted 6 months ago

    Btw, you can solve the dimensions problem by adding "box-sizing: border-box;" in .conteudo in the css file!

  • P
    Marcelo Colodetti Filho•90
    @MarceloColodetti
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Proud to use semantic tags instead of multiple divs and next time i will pay attention to the content size.

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

    The box with the main content was not respecting the dimensions I chose and I resolved this by paying attention and changing the size of the contents inside it.

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

    I would like to know the difference between the outline and border properties in css.

    Blog Card Solution

    2
    P
    vercthu•120
    @vercthu
    Posted 6 months ago

    Oi Marcelo! Bom trabalho! I'm switching to English in case anyone has the same question as you: what is the difference between border and outline? A border is a visual representation of the area of an element, it is purely aesthetic. An outline is a line around the element and has accessibility purposes, such as a person being able to see an active state on a link when they need to navigate the webpage with a keyboard instead of the mouse. You can have a border and an outline in the same element, if you wish, but it's best to leave outlines for accessibility.

    Marked as helpful
View more comments

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