Skip to content
OverviewSolutions
18
Comments
2
Hawi Girmachew
@Hawigirmachew

All comments

  • 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
  • Hawi Girmachew•250
    @HawigirmachewPosted about 2 years ago

    Hello, @MaxSurawut congratulation for completing this challenge. Your solution is excellent, and I learnt a lot from it, however I believe it would be better if you used semantic tags for it, such as main, section, and footer, as well as heading tags. I hope this will be useful to you.

    0