html and css order summary card

Community feedback

• 

  Hawi Girmachew•250

  @HawigirmachewPosted about 2 years ago

  @satish2raj congratulation on completing the order-summary project. I have some recommendations for you. The div element should be changed to the main element because the main element is one of the semantic elements. Create this key component as shown below to design the main element.

  body{
      font-family: "Red Hat Display", sans-serif;
      background-image: url(images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-color: hsl(225, 100%, 94%);
  }
  .main{
     width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }```
  
  
  You can add your footer under the main element's closing tag.
   ```<footer class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Your Name Here</a>.
    </footer> ```
  
  Give your button hover effect as follows
  ```.order-payment button:hover{
  cursor:pointer;
  }```
  Hope it's useful to you.
  

  Marked as helpful

  0

  ---

  

  Satish•60

  @Satishakula-fullstackPosted about 2 years ago

  Hi, @Hawigirmachew Thank you for your valuable feedback.

  0