Feo Sweater Day es el tercer viernes de diciembre. Este año ese es el 20 de diciembre. Aprenda sobre la página del Calendario del Día Nacional del Día Nacional ..

Durante los últimos años, he hecho versiones de arte CSS de los suéteres feos de LEGO. Vea el año anterior en los enlaces de la serie. Este suéter feo 2024 presenta a Leia y la Batalla de Echo Base de The Empire Strikes Back.

Comencé con mi plantilla de suéter de años anteriores. Hay un torso básico. Dentro del torso en el personaje destacado para este suéter. Dentro del personaje Div están los dos lados de los rebeldes de batalla e imperio. Dentro de esos Divs están los vehículos de la batalla.

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}

.ground{
    width: 100%;
    height: 2px;
    background: white;
}


.rebels {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.empire {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
}





  
  
  Rebeldes


 El lado rebelde presenta un cañón. En cuanto a la forma, es básicamente rectángulos apilados. La torreta contiene la tapa del cañón, la pistola y la base. 









.turret{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    margin-right: 40px;
    margin-bottom: -280px;

}

.cannon_lid{
    width: 80px;
    height: 10px;
    border:4px white solid;
    margin-bottom: 32px;
    margin-left: 11px;
        position: absolute;
        z-index: 1;
        background: var(--sweaterblue);
}

.gun{
    width: 60px;
    height: 5px;
    background: white;
    position: absolute;
    margin-bottom: 32px;
    margin-left: 125px;
}

.turret_base{
    width: 30px;
    height: 40px;
    border: 4px white solid;
    border-top: 4px white dotted;
    position: absolute;
    margin-top: 40px;
}





  
  
  Imperio


 El lado del imperio de la imagen es un caminante AT-AT o Imperial. Es un tanque que camina. Hecho de la cabeza, el cuerpo y las piernas. 









.at-at{
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative; 
    background: var(--sweaterblue);
    margin-top: 145px;
}

.at-at_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    position: absolute;
}




 Las partes de la cabeza y el cuerpo son rectángulos movidos un poco. Las piernas son lo que tomó más del trabajo. Tenían que agruparse en partes y rotados. Primero trabajan agrupados por las piernas superiores e inferiores, los emparejados por las piernas delanteras y traseras. 







The legs all start with the leg class and are the same shape. Some of the upper legs get another class called bent. This uses transform: rotate to change the leg shape. If a leg is bent then the lower part of the leg gets the lowerbent class, which just moves that part of the leg forward.



.legs{
    width: 10px;
    height: 50px;
    background: var(--sweaterblue);
    border: 2px solid white;
}
.bent{
    transform: rotate(45deg);
    height: 40px;
}

.lowerbent{
    margin-left: -10px;
}












  
  
  Imagen final


  


  
  
  Conclusión


 Este fue un desafío. Aprendí que debería eliminar mi código pseudo antes de bloguear. Cuando planeé esto, las piernas marcadas son "piernas", "superiores", "dobladas". Lowerbent "," Lowerleg "y recto. No hice clases para todos ellos. Algunos ya estaban cubiertos por su clase principal. 

 Gracias por leer.