La journée de pull laide est le troisième vendredi de décembre. Cette année, c'est le 20 décembre. Découvrez la Journée du pull laide sur la page du calendrier de la Journée nationale ..

Au cours des dernières années, j'ai fait des versions art CSS des pulls laids de la figure LEGO. Voir l'année précédente sous les liens de la série. Ce pull 2024 laid présente Leia et la bataille d'Echo Base de l'Empire frappe.

J'ai commencé avec mon modèle de pull des années précédentes. Il y a un torse de base. À l'intérieur du torse dans le personnage en vedette de ce pull. À l'intérieur du personnage, Div se trouvent les deux côtés des rebelles de la bataille et de l'empire. À l'intérieur de ces divs se trouvent les véhicules de la bataille.

.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;
}





  
  
  Rebelles


 Le côté rebelle présente un canon. En ce qui concerne la forme, il empile essentiellement des rectangles. La tourelle contient le canon, pistolet et 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;
}





  
  
  Empire


 Le côté empire de l'image est un marcheur at-at ou impérial. C'est un réservoir qui marche. Il fait de la tête, du corps et des jambes. 









.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;
}




 Les parties de la tête et du corps sont des rectangles déplacés un peu. Les jambes sont ce qui a pris plus de travail. Ils devaient être regroupés en pièces et tourner. Ils travaillent d'abord groupés par les jambes supérieures et inférieures, les appariées par les jambes avant et arrière. 







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;
}












  
  
  Image finale


  


  
  
  Conclusion


 Celui-ci était un défi. J'ai appris que je devrais supprimer mon code pseudo avant de bloguer. Quand j'ai planifié cela, les jambes marquées sont des "jambes", "supérieures", "pliées". LowerBent "," Lowerleg "et Straight. Je n'ai pas fait de cours pour tous. Certains étaient déjà couverts par leur classe parent. 

 Merci d'avoir lu.