This is the Lars Homestead on Tatooine. Home of Owen and Beru Lars and Luke Skywalker.
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 Luke and the homestead where he grew up from the original Star Wars movie.
<div class="torso">
<div class="InnerSweater">
<div class="house"></div>
<div class="collector"></div>
</div character>
</div>
.InnerSweater {
width: 900px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
column-gap: 40px;
}
.wrapper {
width: 100%;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
gap: 25px;
}
The flex-direction:column; allows the parts of the homestead to drop in line across the screen.
House
The House and its parts are modified rectangles. By adjusting the borders radii the rectangles were given curves at the top. The bottom borders were made transparent so they don't appear on screen.
.house {
width: 230px;
height: 170px;
background: var(--sweatergreen);
border: 8px white double;
border-top-right-radius: 40%;
border-top-left-radius: 40%;
margin-right: 580px;
margin-top: 235px;
position: absolute;
border-bottom-color: transparent;
display: flex;
overflow: visible;
justify-content: space-around;
}
.houseBack {
width: 30px;
height: 85px;
background: var(--sweatergreen);
border: 4px white solid;
border-bottom-color: transparent;
border-top-left-radius: 40%;
margin-left: -21px;
margin-top: 85px;
position: relative;
}
.housefront {
width: 120px;
height: 110px;
background: var(--sweatergreen);
border: 4px white double;
border-top-right-radius: 40%;
border-top-left-radius: 40%;
margin-left: 166px;
margin-top: 60px;
position: relative;
border-bottom-color: transparent;
display: flex;
justify-content: center;
align-content: flex-end;
overflow: hidden;
}
.door{
width: 50px;
height: 100px;
background-color: var(--SweaterDarkRed);
margin-top: 24px;
border-top-right-radius: 10%;
border-top-left-radius: 10%;
}
Moisture Vaporator
The Moisture Vaporator is a series of lines and boxes.
<div class="collector">
<div class="line"></div>
<div class="line hort"></div>
<div class="post">
<div class="line mid"></div>
</div>
<div class="line hort"></div>
<div class="line"></div>
</div>
.post {
width: 40px;
height: 100px;
background: var(--sweatergreen);
border: 4px white solid;
border-bottom-color: transparent;
position: relative;
display: flex;
justify-content: center;
}
.line {
width: 6px;
height: 100px;
background: white;
position: relative;
}
Dual Suns
The suns are more rectangles stacked and rotated on top one another.
<div class="sunwrapper">
<div class="sun1"></div>
<div class="sun1_mid"></div>
<div class="sun1 sunRotate"></div>
</div>
.sun1 {
width: 50px;
height: 100px;
background: var(--SweaterDarkRed);
position: absolute;
}
.sun1_mid {
width: 70px;
height: 80px;
background: var(--SweaterDarkRed);
position: absolute;
}
.sunRotate{
transform: rotate(90deg);
width: 60px;
}
Wrap up
This was an easier build than the Echo base sweater. It took more time to figure out the AT-At legs. The build went much quicker once I started.
SOCIAL SHARE CARD GENERATOR