Stats preview card component

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  For the image, I did something like this, I hope that helps:

              <div class="image-container">
                  <img class="main-image" src="images/image-header-mobile.jpg" alt="">
              </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  There is no need for the <section tag in your html and the .card-container in your css. add background color:hsl(277, 64%, 61%); and background-blend-mode:multiply to the .img-container instead of .overlay. To center a content on a page add min-height:100vh; display: flex; align-items: center; justify-content:center; to the body. Give the .container a width value , there is no need for the height value. For a more responsive page , give the flex-items a width value ,replace the height value with a padding value , in your code this applies to .text_container. give .text_container a background-color. You forgot to add a media query for the mobile design. Use rem or em as unit for the padding , margin and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To Hope am helpful HAPPY CODING

  0