responsive Stats preview card component using HTML, CSS

Hello there 👋. Good job on completing the challenge !

• It is not necessary to repeat styles when using a media query; the base styles will always remain, and the styles within the media query only apply when the conditions are met (e.g. when the screen width is within a certain range).

  The common approach is to define the main CSS rules outside of the media query, and then override them with specific styles inside the media query.

  body {
      background-color: #0A0C1B;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
  }
  
  @media (max-width: 680px) {
    /* NOTE:  Nothing of this is necessary.*/
    body {
      /* background-color: #0A0C1B; */
      /* display: flex; */
      /* justify-content: center; */
      /* align-items: center; */
      /* min-height: 100vh; */
    }
  
    /* NOTE: Only use the ones you are going to overwrite.*/
   .footer {
      /* display: flex; */
      flex-direction: column;
      /* justify-content: space-between; */
      /* margin-top: 50px; */
      gap: 20px;
      padding-bottom: 10px;
   }
  }
  

• Consider adopting a Mobile First approach in your next project. This means designing for the smallest screens first and then scaling up as needed. This helps to create a more user-friendly and accessible experience for all users.

• The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.:

  <p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
  

I hope you find it useful! 😄

Happy coding!

Use the colors that were given in the styleguide.md found in the zip folder you downloaded

Give the main a max-width of 1440px a width of 80% . instead of a min-width, max-width value of none and a width value.

in the media query give the main flex-direction: column-reverse , give .right and .right a width of 100% and change the flex-direction of the .footer to row.

For the color of the image, add background-color of soft violet, background-blend-mode of multiply and opacity of 0.8 to .right.

.right{
background-image: url();
background-size: cover;
background-color: hsl()
background-blend-mode: multiply;
opacity: 0.8;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING