Responsive result summary card

Community feedback

• 

  Aakash Verma•9,520

  @skyv26

  Posted 7 months ago

  Hi @adetoadeto 👋,

  I have some feedback and suggestions to improve your code:

  1. Background Color in Media Query 🖤
     Please remove the background color property from the media query for screens below 1000px. It’s not part of the requirement and the black background can negatively affect the design. Instead, leave the background color to be controlled by the general styles.

  2. Proper Use of Heading Tags 📜
     The <h2> tag is used for headings, but in the following code, it seems to represent a score rather than a heading for the app or card:

   <div class="score">
      <h2>76</h2>
      <p>of 100</p>
   </div>
  

  Please consider using a more appropriate element, like

  
     <strong>76
        <span>of 100</span>
      </strong>
  

  which will semantically make more sense.

  3. Use of <ul> and <li> Tags 📝
     For the following code:

     <div class="summaries_box reaction">
        <div class="icons">...</div>
        <p class="percent"> <span>80</span> / 100</p>
     </div>
     

     It's a good practice to use <ul> and <li> for lists. Try to wrap each "box" in a <ul> and each item in an <li>. This improves semantic HTML and accessibility.

  4. Avoid Repetition (DRY Principle) 🔄
     In the media query, you have repeated the height property for .container and body. You can avoid repetition by combining similar styles:

     @media (max-width:1000px) {
        body, .container {
           height: 100vh;
        }
        background-color: black; /* can stay outside media query */
     }
     

     This keeps your code cleaner and adheres to the DRY (Don't Repeat Yourself) principle.

  These changes will make your code more semantic, cleaner, and maintainable. Keep up the great work! 💪

  00

  Marked as helpful
• 

  Marzia Jalili•9,670

  @MarziaJalili

  Posted 7 months ago

  Hey bro!

  Some adjestments you can make to the button:

  1. A smoother color change.
  2. Inhert the font-family from the parent element, 'cause buttons don't do so by default.

  • Take the code below as an example for html:

  <button>
    <!-- to prevent the text of being hidden we have to wrapp it inside an element -->
    <div>Continue</div>
  </button>
  

  • Then, apply this in css:

  button {
    position: relative;
    font: inhert;
    background: black; /* or the code of that dark blue color */
     
    /* ensure that the text doesn't get hidden */
    & > * {
      position: relative;
    }
  }
  
  button::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background: linear-gradient(codes of the two or more colores);
    /* we will only show it on hover so now it will be hidden... */
    opacity: 0;
    transition: opacity .4s;
  }
  
  button:hover::before {
    /* make the pesudo element appear */
    opacity: 1;
  }
  

  This definitely works!

  Other than this your solution is spot on😎😎

  00