Stats preview card component

Hello there 👋. Good job on completing the challenge !

I have SOME suggestions about your code that might interest you.

• As regards your solution giving errors on the accessibility reports. This as a result of not having a Landmark. To solve this issues, add a <main></main> just outside the <div class="content"></div> and this will fix the issue. More on LandMarks

• To help with the effect on the image, Try adding a <div class="overlay"></div> element just right before the <div class="image" ></div> container or <img> element. Now put both <div class="overlay"></div> container and the <div class="image" ></div> container inside a <div class=image__box ><div> .This will serve as the Parent Element of both . Then add the following styles below... Example

HTML

<div class=image__box >
    <div class="overlay"></div>
    <div class="image" > ... </div>
<div>

CSS

.image__box{
    position: relative;
}

.overlay{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
     height: 100%
     background: ... ;  // Color goes here
}

.image {
    background-image : url(...) ; // If used a url instead of placing it directly in the HTML
    mix-blend-mode: multiply;
    opacity: 75%;
    object-fit:cover;
}

• TIP : Check out the <picture></picture> element as this can help with switching between two images based on viewport.

I hope you find these comments helpfull! 😄 And I was able to answer your questions

Happy coding!

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

• This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage

• So fix it by replacing the wrapper <div class="content"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

• What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

• For example:
  • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
  • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

hi there,

when i was checking the page on 550px i see that the image is not covering all div. so i added .rightColumn { background-size: cover; }

under @media screen and (min-width: 470px) and (max-width: 1140px)

upi can also add .rightColumn height:40%;

anyway please check the code below this is a really quick fix for you to understand media rule. Overall is a good job but you have to have a good understanding for media rules. https://www.w3schools.com/cssref/css3_pr_mediaquery.php

@media screen and (max-width: 470px) { .data { flex-direction: row; }

.content {
    height: 70%;
}
.rightColumn {
        background-size: cover;
    height:50%

}

}

@media screen and (min-width: 780px) { .data { flex-direction: row; }

.content {
    height: 50%;
    border:1px solid red;
}

  .rightColumn {
        background-size: cover;
        height:100%;
}

}

@media screen and (min-width: 1140px) { .data { flex-direction: row; }

.content {
    height: 40%;
    border:1px solid blue;
}

.rightColumn { background-size: cover; height:100%; } }

pay attention to the .rightColumn class in the media rules for each device screen sizes.

for the backgroudn image please use below

background-image: url('../images/image-header-desktop.jpg');

that works !!

It is kinda late here and these are my humble opinions for you. ;) good luck. also