lego Ewok, small white bear like creature wearing a green hoodie.
Basic Sweater
This a a modification of the Spider-Man and Black widow sweatersrs from earlier this month. The colors have been changed but the structure is the same.
<div class="sweater">
<div class="collar"></div>
<div class="torso">
<div class="InnerSweater">
<wrapper>
<snow></snow>
<redtree></redtree>
<snow></snow>
</wrapper>
</div>
</div>
<div class="hem"></div>
</div>
Inner Sweater
The Inner Sweater holds the main subject of the sweater. Here it is a Christmas tree and falling snow.
.InnerSweater {
width: 2000px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 50px;
column-gap: 40px;
}
Let it snow
The falling snow was made by alternating the spacing in rows of 10x10px white squares. One set has used justify-content: space-between; the other justify-content: center. This is an expanded version of the snow on the Black Widow sweater.
.flake_wrapper{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.flake_wrapper2{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 180px;
}
The Tree
The tree was made by stacking triangles. These were made by giving the a rectangle a border-bottom of red while the other borders are transparent.
<div class="redtree">
<div class="topper">
<div class="topperT"></div>
<div class="topperT vrt"></div>
<div class="toppercenter"></div>
</div>
<div class="redtree_mid">
<div class="redtree_top"></div>
</div>
<div class="trunk"></div>
</div>
.redtree{
height: 0px;
width: 0px;
background: transparent;
border-top: 0px solid transparent;
border-bottom: 195px solid var(--SweaterRed);
border-left: 90px solid transparent;
border-right: 90px solid transparent;
display: grid;
justify-content: center;
align-items: center;
}
.redtree_mid{
height: 0px;
width: 0px;
background: transparent;
border-top: 0px solid transparent;
border-bottom: 165px solid var(--SweaterRed);
border-left: 80px solid transparent;
border-right: 80px solid transparent;
display: grid;
justify-content: center;
align-items: center;
margin-top: -40px;
}
.redtree_top{
height: 0px;
width: 0px;
background: transparent;
border-top: 0px solid transparent;
border-bottom: 100px solid var(--SweaterRed);
border-left: 50px solid transparent;
border-right:50px solid transparent;
display: grid;
justify-content: center;
align-items: center;
margin-top: -30px;
}
Sweater-Time
Here is the final version of the Ewok Ugly Sweater.
illustration of a green sweater. In the center is a red 3 tiered christmas tree. snow is falling on either side.
-$JarvisScript git push