Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

order-summary-component

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please I need feedback on how I can improve my project. How do I make it look more closely like the design file especially my buttons and how do I implement the hover functionality. Also, I noticed the project required

  • Mobile: 375px
  • Desktop: 1440px How do I implement this in my css file? Thank you for your helpful feedback.

Community feedback

@eddybpro

Posted

Hello, Judith👏

Congratulation for finishing this challenge 🎉.

For the code here some improvements:

  • HTML code:
<div class="price">
<div>
<img src="icon-path"/>
<p class="plan"> Annual Plan
<span>$59.99/year</span> 
</p>
</div>
<a href="#" class="link">Change</a>
</div>
  • CSS code:
main{
/* no need to use "padding" and "margin" */;
/* add overflow property*/
overflow : hidden;
}

main > img{
/* no need to use border-radius*/
/* add width property */
width : 100%;
}

.summary{
/* add "padding" property*/
padding: 0 1rem;
} 
/* update the price class*/
.price{
display : flex;
align-items : center;
justify-content: center;
gap: 1rem;
padding : 0 1rem;
}
#pay{
/* add "width" property*/
width : 80%;
color : white;
}

.btn{
/* add this*/
border: none;
outline: none;
cursor: pointer;
/* update this*/
border-radius: .5rem;
/* no need to  "display" property*/
}

.cancel{
background-color : transparent;
color : blue;
}

I hope that will help:)

good luck with your journey

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord