Luke skywalker mini figure.
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 InnerSweater div are the various parts of the Lars home.
outline of a domed building, two suns in the sky.
<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.