Basic html css card

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component button hover state background has not been set yet.

  ---

  • Just add the following css rules

  .main__summarySectionButton:hover {
      background-image: linear-gradient(#6542FE, #342CE2);
  }
  

  ---

  • Now your component's button background for hover state has been set properly

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Anderson Fernandez•350

  @anderson-fndzPosted over 1 year ago

  good code! pay attention to the dimensions of your <main> it would be interesting to wrap the 2 <section> in 1 container to make it easier to manipulate the spacing, try using this for the containeror to apply it to the <main> :

  .container {
      width: 738px;
      height: 514px;
      display: flex;
      border: none;
      border-radius: 35px;
      box-shadow: 5px 5px 5px 2px #00000021;
  }
  

  together with that create a class for the sides of the content to make them look like:

  .side {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  

  your HTML will look like this

  <div class='container'> 
  	<section class='side main_scoreSection'> </section>
  	<section class='side main_summarySection'>
   </section>
  </div>
  

  Marked as helpful

  1