single-price-component using grid layout

Hello @RaiPrayash, you did a Great job.👏🎉 and your solution looks similar to the design. But unfortunately it's Not Responsive. and i have some notes for you:

• To center your .container element you can add these styles to the body:

.body{
	display: grid;
	place-items: center;
	min-height: 100vh
}

• instead of set border-radius property separately for .box-1 , .box-2 and .box-3. You can just add it for the .container itself

.container{
	border-radius: 10px;
	overflow: hidden; /* to crop radius perfectly */
}

• when using font-weight property don't use units. ex:

  • The wrong way

    	.element {
    		font-weight: 700px;
    	}
    

  • The right way

    	.element {
    		font-weight: 700;
    	}
    

• row-gap property for .box-1 , .box-2 and .box-3 elements are quite big. Try to reduce it

• add active state for button element on hover. it will be nice:

	.box-2 button {
		transition: 200ms linear; /* to make hover effect smoother */
	}

	.box-2 button:hover {
		background-color: hsl(71deg 73% 65% / 96%);
		cursor: pointer;
	}

• For p element inside .box-3 p div. Try use ul element (unordered list) will be much better and this is More Html Semantic

	<ul>
		<li>Tutorials by industry experts  </li>
		<li>Peer & expert code review </li>
		<li>Coding exercises</li>
		<li>Access to our GitHub repos</li>
		<li>Community forum </li>
		<li>Flashcard decks </li>
		<li>ew videos every week</li>
	</ul>

• Try to make your solution Responsive

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀