card using html css

Community feedback

• 

  Mitsrael Souza•130

  @M-itsPosted about 1 year ago

  Você pode usar flex containers para alinhar os elementos e definir espaços entre eles. Pode ser um pouco desafiador no começo, mas compensa o esforço. Substituindo um trecho do seu código ficaria assim:

  antes

  section{
      background-color: hsl(216, 50%, 16%);
      padding: 20px;
      border-radius: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
  }
  

  depois

  section {
      width: 300px;
      background-color: hsl(216, 50%, 16%);
      padding: 20px;    
      border-radius: 15px;
      
      //muda o display da section para um container flexível 
      display: flex;
  
      //indica a direção do container como coluna (vertical)
      flex-direction: column;
  
      //define o espaçamento entre cada elemento da section
      gap: 1.6rem;
  
      //sombras 
      -webkit-box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
      -moz-box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
      box-shadow: 6px 7px 25px 0px rgba(0, 0, 0, 0.19);
  }
  

  Parabéns por terminar mais um desafio 🚀

  0
• 

  Nelson Pascual•130

  @NelPascualPosted about 1 year ago

  Excellent work, congratulations for finishing the project. I saw that you did not develop the hover effect applied to the main image, if you need some guidance to implement it, I will gladly support you with any indication when you want.

  Have a nice day.

  0

  ---

  

  Amanda Lima•50

  @amandalima1Posted about 1 year ago

  @NelPascual Yeah, I couldn't think of how to do that. I preferred to stop and try again later haha

  0
• 

  Sadeesha Jayaweera•240

  @SadeeshaJayaweeraPosted about 1 year ago

  Congratulations on finishing the challenge & all the very best ✌️

  0