This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See a beautiful UI on the website.
- The website is also mobile friendly, user can also view it on mobile without any problem.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
This is my first challenge and I have learnt many things. I have learnt how to use flexbox within the divs properly, and which properties of flex box to use at what time. Moreover arranging the items was a difficult thing for me, so I learnt that also.
Some of the mentions of my code to which I am happy I did myselves:
<div class="annual-plan">
<div class="content-padding">
<img src="./images/icon-music.svg" alt="" class="๐ต" />
<div class="content-2">
<p class="๐ช">Annual Plan</p>
<p>$59.99/year</p>
</div>
</div>
<div class="change"><a href="#">Change</a></div>
</div>
.change {
display: flex;
justify-content: flex-start;
width: 5rem;
}
- Frontend Mentor - PriyanshuSaxena2612
- Twitter - Priyanshu_1310
- Solution - Solution