stats-preview-card-component-main

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 20 days ago

  Congratulations on completing this challenge. Your page looks great and is responsive. I love the way you have documented your code so well with comments. I am learning tailwindcss, so I was excited to see how you implemented it on this project.

  I do have two suggestions. First, the mobile version is a bit cramped and hard to read. Perhaps if you increased w-[80%] on the main it would be better.

  Second, the picture has a purple tint to it (the accent color in the style guide). This can be accomplished by adding a background color to the image div, reducing the opacity of the 2 img, and blending the img and background color with mix-blend. It would look like this:

        <div class="sm:float-right bg-[#aa5cdb] bg-blend-overlay">
          <img
            class="h-48 w-[100%] rounded-t-lg sm:hidden opacity-70"
            src="images/image-header-mobile.jpg"
            alt="image-header-mobile"
          />
          <img
            class="hidden sm:block sm:h-[411px] rounded-r-lg opacity-70"
            src="images/image-header-desktop.jpg"
            alt="image-header-desktop"
          />
        </div>
  ``
   Now it looks just like the design! Hope this helps.
  

  Marked as helpful

  0

  ---

  

  Kalebe Max•240

  @kalebemaxPosted 20 days ago

  @beowulf1958 thanks for your recommendations, i really appreciate it. I will try to add to the solution.

  0