Web Card using CSS

Community feedback

• 

  Cacti•390

  @nottohavePosted over 2 years ago

  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-17Posted over 2 years ago

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

  1