my solution

A super easy way to add some visual interactivity are to add hover or active states. Here, you could use:

con:hover {
background-color: red;
}

to change the color of the button on hover.

:active adds properties on clicks.

Overall awesome job so far!

Hello Hugo8814

Congratulations for completing this challenge!!

✏️ Here are some tips and suggestions for this and your future projects ;) ✏️

• 1. 📱 Build a responsive web page:

  • The use of px unit to dimension your components in the page gives it a appearance of static.
  • To build a more responsive one, you should start to use relative length units to adequate the page components to a device screen.
  • In your case, using px to dimension the mobile version of your web page will create the same view in all devices, but keep in mind that they have different sizes, so content could not appear entirely.
  • To deeper details, take a look at it

• 2. 🚀 CSS Layout:

  • It's common in a web page you see every kind of elements such as images, titles, paragraphs and etc... they are disposed in different manners all over the page
  • Using CSS Layouts you can distribute theses elements in your page and do it according to what you want to do
  • Center a element?
    • You can magin:auto an element or do a display:flex, with center alignment, in the parent element!!
  • Dispose in a cols and rows?
    • You can do it using display:grid!!
  • That are a lot of options to be explored, other than positioning your elements based on a px.
  • Here is a good way to start

Overall your project is great and keep coding, I'm sure you will discover new things and become even better

Here, take a star for achieving it: 🌟 <- it's a glowing star if you're seeing a rectangle :)