Single price grid component with flexbox and grid

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Shemjay,

  1.To change the background color for the lower blue content... Firstly the box-shadow property for shadows... Here you should change the background color of Why Us content to make it lighter not to change the background color of Subscription content.

  You need to make the background color of Why Us lighter, Create a pseudo-element ::after as an overlay, and give it the following style:

  #content-right {
      //...
     /* Give the parent element `position: relative;` to flow the child element `::after ` on it */
      position: relative;   
  }
  
  #content-right::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: white;
      opacity: 0.15;
  }
  
  #content-left {
     /* box-shadow: inset 0px 0px 400px 100px rgba(0, 0, 0, 0.1); */  <---Remove
     //...
  }
  

  2. It is okay but I suggest you instead give each element margin-left: 3.5em to align all at the same level, Give the container that contains all elements padding-left: 3.5em... Don't repeat yourself.

  3.Semantic markup... You have accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="wrapper">
        //...
     </div >
  </main>
  

  • Page should contain a level-one heading, Change h4 to h1

  <h1 class = "title">Join our community</h1>
  

  You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

  Heading levels should only increase by one, So all the rest of h4, Change to h2... Ordered headings make it easier to navigate and understand when using assistive technologies.

  <h2 class = "section-title-left">Monthly Subscription</h2>
  

  <h2 class = "section-title-right">Why Us</h2>
  

  Some Resources

  • Pseudo-elements
  • ::after (:after)
  • ::before (:before)

  I hope this is helpful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  shemjay•140

  @shemjayPosted over 2 years ago

  @Bayoumi-dev Thanks so much!! This is a huge help will definitely apply all your advice in my next attempt. And the resources too will read them too

  0