@Mod8124
Posted
Hola buen trabajo!
El margin y el padding no te preocupes es pura practica práctica, puedes usar los figma s pero ya q no cuentas con estos puedes usar pixel perfect y puedes practicar de manera directa en css battle es mas facil por q ves los resultados de una xd
Usaste muchas clases pero no te preocupes hay una metodología(escribir de manera eficiente el css) de css que hace lo mismo llamada bem pudiste haber ahorrado un montón de código usándola ya que usaste mucha clases que solo cambian una cosa por ejemplo
Tu css
.card__supervisor {
display: flex;
flex-direction: column;
border-top: 4px solid var(--cyan);
border-radius: 7px;
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}
. card__team {
display: flex;
flex-direction: column;
border-top: 4px solid var(--red);
border-radius: 7px;
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}
.card__karma {
display: flex;
flex-direction: column;
border-top: 4px solid var(--orange);
border-radius: 7px;
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}
Con bem
.card {
display: flex;
flex-direction: column;
border-top: 4px solid var(--orange);
border-radius: 7px;
}
.card--supervisor {
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}
.card--team {
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}
.card--karma {
box-shadow: 0px 10px 24px -4px rgba(0,0,0,0.5);
}
ves es mas fácil de aplicar y ahorras un montón de código css, solo crea una clase con los valores por defecto y otra con modificaciones. En el html:
<div class="card card--supervisor" ></div>
<div class="card card--team" ></div>
<div class="card card--karma" ></div>
Ahora cada div tiene los mismo estilos pero cambia el shadow
Espero te sirva, good coding 👌
Marked as helpful