Skip to content
OverviewSolutions
12
Comments
3
Sandipan Mukherjee
@SandipanIO

All comments

  • Sandipan Mukherjee•180
    @SandipanIOPosted over 1 year ago

    Hi, I think you have done a great job! However, the HTML structure of the page needs some improvement.

    As developers, we should take care of accessibility when developing a website. Things like semantics, ALT tags, landmarks, etc are very important.

    You can read this awesome article by Grace Snow on HTML Structure. It uses the product preview card component example and teaches how to plan and structure the HTML code.

    I hope this helps :)

    1
  • Manuel Torres•20
    @squirtleturtle02Submitted over 1 year ago

    I honestly had a ton of trouble with the mobile view. It feels like sometimes the image gets cut out of the container, and since it gets cut out, it wont have the rounded borders at the top.

    Product-preview-card

    1
    Sandipan Mukherjee•180
    @SandipanIOPosted over 1 year ago

    For the images, I think you should use the picture tag.

    <picture>
<source media="(min-width: 650px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-mobile.jpg" alt="">
</picture>

    The picture tag will now take care of the screen size/resolution. When the screen is 650px or more, the desktop version of the image will be used. When the screen size is less than 650px, the mobile version will be used. And all this will happen using pure HTML, without any CSS.

    One more thing - Instead of using "width: 90vw", you can use min-height: 90vh for your container. Using 90vw is breaking your site in mobiles.

    I hope this helps :)

    0
  • Devon Daniels•160
    @DevDan21Submitted over 1 year ago

    I wonder if there's a better way to create an color overlay onto an image. What I've done was lower the opacity of the image and add a background color to show through. Let me know if there is a better way to achieve the same or better :)

    Stats Preview Card | Flexbox | Grid

    2
    Sandipan Mukherjee•180
    @SandipanIOPosted over 1 year ago

    There are 2 ways that I know of. Let's assume the following is our code:

    <div class="image-box">
<picture>
<img class="image" src="images.jpg" alt="">
</picture>
</div>

    1. Use the mix-blend-mode CSS property

    Add a background color to the parent div element and use mix-blend-mode on the image.

    .image-box {
background-color: purple;
}

.image {
mix-blend-mode: multiply;
}

    mix-blend-mode can have the following values:

    mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

    2. Use a pseudo-element

    Add a new div after the "picture" element but inside the "image-box" div:

    <div class="image-box">
<picture>
<img class="image" src="images.jpg" alt="">
</picture>
<div class="overlay"></div>
</div>

    Here is the CSS:

    .image-box {
position: relative;
}

.image {
width: 100%;
height: 100%;
object-fit: cover;
}

.overlay {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.5);
}

    I have submitted this component today only and have used the 2nd method. You can check my solution here.

    I hope this helps :)

    1