Basic html css card

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!

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>