@its-rkravi
Posted
Congratulations @Kkkiiiirran for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. But you need to do some changes in your style.css file.
1. First of all your github repo link not working. so please update it. ☹️
2. go inside html file and a div with classname (.flexgroup) keep ( ringtune icon svg and the div which have plan and price) keep all these in one div and the (anchor link with class (.change) keep it seprate. how to do this is given below.
<div class="flexgroup subscription">
<div class="sub-container">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<g fill="none" fill-rule="evenodd">
<circle cx="24" cy="24" r="24" fill="#DFE6FB"/>
<path fill="#717FA6" fill-rule="nonzero" d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"/>
</g>
</svg>
<div>
<h2 class="plan">Annual Plan</h2>
<p class="price">$59.99/year</p>
</div>
</div>
<a href="#" class="changelink">Change</a>
</div>
3. update one CSS property in the in the div which have a class name (.main-component) just change width to max-width:28rem or whatever width you want. now your design is responsive for small screens also.
.main-component{
max-width:28rem;
}
Instead of this everything looks fine.
"Best of Luck for future Design"
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
Marked as helpful
