Ugly Sweater CSS: Echo Base

Ugly sweater day is the third Friday of December. This year that is December 20th. Learn about Ugly sweater day on National Day calendar page..

For the past few years I've made CSS art versions of the LEGO Figure ugly sweaters. See the previous year under the series links. This 2024 Ugly Sweater features Leia and the battle of Echo base from The Empire Strikes Back.

I started with my sweater template from previous years. There's a basic torso. Inside torso in the featured character for this sweater. Inside the character div are the two sides of the battle Rebels and Empire. Inside those divs are the vehicles of the battle.

<div class="torso"> 
   <div class="character">
     <div class="Rebels"></div> 
     <div class="Empire"></div> 
   </div character>
</div>

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

Rebels

The rebel side features a Cannon. As far as the shape goes it's basically stacking rectangles. The turret contains The cannon-lid, gun and base.

<div class="turret">
    <div class="cannon_lid"></div>
    <div class="gun"></div>
    <div class="turret_base"></div>
</div>

.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

The Empire side of image is an AT-AT or Imperial Walker. It's a tank that walks. It made of the head, body, and legs.

<div class="empire">
    <div class="at-at">
        <div class="at-at_main">
            <div class="at-at_head"></div>
            <div class="at-at_neck"></div>
            <div class="at-at_body"></div>
            <div class="at-at_hanger"></div>
        </div>
         </div>

    <div class="legs_group">/div>
</div>

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

The head and body parts are rectangles moved around a bit. The legs are what took more of the work. They had to be grouped in parts and rotated. First they work grouped by upper and lower legs, the paired by front and back legs.

<div class="legs_group">
    <div class="upper">
        <div class="front"></div>
    <div class="back"></div>
    </div>

    <div class="lower">
        <div class="front"></div>
        <div class="back"></div>
    </div>

 </div> 

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

<div class="legs_group">
    <div class="upper">
        <div class="front">
        <div class="legs bent"></div>
        <div class="legs"></div>
    </div>
    <div class="back">
        <div class="legs bent"></div>
        <div class="legs"></div>
    </div>
    </div>

    <div class="lower">
        <div class="front">
        <div class="legs lowerbent"></div>
        <div class="legs"></div>
        </div>
        <div class="back">
        <div class="legs lowerbent"></div>
        <div class="legs"></div>
        </div>
    </div>

 </div>

Final Image

Conclusion

This one was a challenge. I learned that I should remove my pseudo code before I blog. When I planned this out I marked legs are "legs", "upper", "bent". Lowerbent", "lowerleg", and straight. I didn't make classes for all of those. Some were already covered by their parent class.

Thank you for reading.