[Bot]

Je n’y arrive pas:
responsive:

.card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
   overflow: hidden;
   position: relative;
    height: 270px;
}


.card-background {
  width: 100%;
  height: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
}


.card.card1 {
  background-image: linear-gradient(to top, #1f1e1e 0.00%, rgba(0, 0, 0, 0) 100%), url('https://media.discordapp.net/attachments/1095071298595590286/1139123197887926282/Picsart_23-08-10_11-08-03-278.jpg?width=483&height=483');
  background-size: cover;
  background-position: top;
}

.card.card2 {
  background-image: linear-gradient(to top, #1f1e1e 0.00%, rgba(0, 0, 0, 0) 100%), url('https://media.discordapp.net/attachments/1095071298595590286/1139123212832231584/Picsart_23-08-10_11-04-59-437.jpg');
  background-size: cover;
  background-position: top;
}
.card-title {
  color: #fff;
  font-family: 'MyBold';
  font-size: 1.5em;
  margin-top: 0; /* Supprimez la marge supérieure pour aligner le titre en haut */
  margin-bottom: 0px; 
  position: relative;
  z-index: 1;

}

.card-description {
  color: #ffffff;
  font-family: 'MyEmerland';
  font-size: 1em;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 10px;
}

.card .icon-group {
  position: relative; /* Add relative positioning */
  display: flex;
  align-items: center;
}

.card .icon {
  position: relative;
  z-index: 2;
  display: flex;
    flex-shrink: 0; 
  width: 36px; 
  height: 36px; 
  padding: 10px;
  margin-top: 0%;
  flex-direction: column; 
  align-items: center;
    margin-right: 10px; 
}

.card .icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--card-icon-background-color);
  border: 1px solid var(--card-icon-border-color);
  backdrop-filter: blur(2px);
  transition: background-color .25s, border-color .25s;
  
}

.card .icon i.fa-duotone,
.card .icon svg {
 
  color: ;
  transition: color .25s;
  margin-bottom: 5px;
  
}

@media (max-width: 768px) {
    .grid {
    display: block; /* Change la disposition en colonne */
  }
  .card-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne quand l'espace est insuffisant */
    justify-content: center; /* Centrer les cartes horizontalement */
  }

  .card {
    width: 80%; /* Ajustez la largeur des cartes pour s'adapter à l'écran */
    margin: 10px; /* Espacement entre les cartes */
  }

  .card-title {
    font-size: 1.2em;
  }

  .card-description {
    font-size: 0.9em;
  }

  .card .icon {
    width: 30px;
    height: 30px;
  }
}

——————–
64a – Envoyé depuis le Discord : Culte du code

Sujet

[Bot]

Ah l’html j’ai oublié:

  

    

    

    
Freeze Corleone
    
@freezecorleone

    

      

        
          
        
        
          
        
      
    
  
 
  

——————–
64a – Envoyé depuis le Discord : Culte du code

[Auteur]

Réponses