Single price grid component

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey, You did amazing work congratulations for completing this challenge

  to fix accessibility issues :

  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h1 instead h3 in div.container-top and change font-size if you want .

  To make your code more Responsive

  • if you want to center span.per month you can use this :

  html

   <span class="dollar-sign">$29 </span><span class="month-text"> per month</span> 
  

  css

  span
  {
  vertical-align:middle
  }
  

  OR use this :

  html

  <p class="price"> <span class="dollar-sign">$29 </span><span class="month-text"> per month</span> </p>
  
  

  css

  p.price 
  {
    display:flex;
    align-items:center
  }
  span
  {
  display:inline-flex
  }
  p.price span.month-text 
  {
  padding-left:10px;
  }
  

  • don't give classes colors name but give it semantic name to make code more readable and if you change colors, classes will be meaningless so you can use :

  <p class="heading-details"> 30-day, hassle-free money back guarantee</p>

  instead of using

  <p class="bright-yellow-color">30-day, hassle-free money back guarantee </p>

  • you can use variables in css and save colors or fixed sizes in variables like this :

  :root 
  {
  --main-color:#3829e0;
  --font-family:'Red Hat Display',sans-serif;
  }
  
  h1 
  {
  font-family:var(--font-family)/*to call  value of the variable*/
  }
  

  Regardless You did amazing I hope this is useful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  Ola White•160

  @whitesoftxPosted over 2 years ago

  @zenab12

  Very helpful comment. Thank you!

  And thanks for the words of encouragement, really needed to keep me going.

  Thank you @zenab12

  0

  

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  @whitesoftx You are Welcome :-) , Keep going on

  0