Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Web Card using CSS

Rolando 60

@rolando-17

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Me falta por agregar para que fuera adaptable para los dispositivos móviles pero de ahí en adelante hice todo lo demás que se me pidió en el reto.

Community feedback

Cacti 390

@nottohave

Posted

Hola Rolando, como estas? Nice work on completing the challenge. I tested your solution on my laptop. The design can look better on a range of screen sizes if you can make these improvements:

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

.contenedor { display: flex; width: 1000px; height: 400px; }

/* Keep these in your tarj, remove the rest */
.tarj_principal {
 border-radius: 15px; background-color: #1C1938; display: flex;
}

/* I'm skipping the next blocks of code */
/* for .tarj_text2 and text_final { remove position absolute and bottom: 250px } Try margin-top and margin-bottom. Read more on margin MDN */

.imagen01 {
 /* Update and keep these: border-radius: 15px; background-size: cover; height: 100%; width: 450px; display: flex; justify-content: flex-end */
}
.imagen01 img { /* just change width & height: 100% */ }
  • For semantic HTML, you can change h5 to p. Wrap h2 and p in <section> instead of repeatedly using div.

Try these on and let me know how the desktop design looks. I hope it removes the extra paddings, place the right image on full height and give you more control on the text position. Let me know if they don't work out for you. I hope you can get more feedback to improve.

Keep it up! Nice work!

Marked as helpful

0

Rolando 60

@rolando-17

Posted

@nottohave thanks i will let you know the results of my work and thanks for the suggestions

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord