Submitted almost 2 years ago

Product Preview Card Component Using HTML and CSS

RavanCod• 250

@vanessie2424

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm still having difficulty making it responsive. I think the desktop view is okay, but the image for the mobile isn't showing and I can't figure out why. If someone can help, I will appreciate. Thank you.

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @vanessie2424, Congratulations on completing this challenge!

Your solution its almost done and I’ve some tips to help you to improve it:

1.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

2.You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each block (image and text content) card you use <article> instead of the <div>.

3.Using <picture> you’ve more control over the elements and its better than using the product image as <img> or background-image. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

✌️ I hope this helps you and happy coding!

RavanCod• 250

@vanessie2424

Posted almost 2 years ago

@correlucas okay. Thank you for the assistance.

Edufelibugm• 450

@edufelibugm

Posted almost 2 years ago

Hi, congratulations on completing the challenge. 🥳🥳

it looks pretty good, and the problem is easy to fix, you just need to add a few properties and modify some, the most important ones to make it look good are 🔧:

.content {
    max-width: 300px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.image {
    background-image: url(../images/image-product-mobile.jpg);
    min-height: 250px;
    min-width: 200px;
    border-radius: 10px 10px 0 0;
}

button {
    font-family: 'Fraunces', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    background-color: hsl(158, 36%, 37%);
    color: hsl(0, 0%, 100%);
    border-radius: 4px;
    height: 35px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
}

only that 😌

Have a great day and happy coding 🤖💚

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord