single-price-component using grid layout

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  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🚀

  Marked as helpful

  2