Ugly Sweater CSS: Black Widow
Tags: css, tutorial, frontend
Published: 2023-12-21 15:03:28

This ugly sweater was inspired by LEGO Black Widow minifigure from the LEGO Avengers Advent calendar. I really should get a referral link for them, come on LEGO send me some bricks.


![LEGO figure of Black widow in a sweater. the sweater is blue with snowmen and a black widow hourglass.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7uk8yhzmfq1fejlmanaz.jpg)


##Basic Sweater

I've written about this before in [Ugly Sweater BB-8](https://dev.to/jarvisscript/ugly-sweater-css-36am) but a short explanation is the sweater body is a light blue background with dark blue boxes for the collar and hem. 

 In the torso center is the focus or character of the sweater. For more details read the [BB-8 post.](https://dev.to/jarvisscript/ugly-sweater-css-36am) 



```HTML
<div class="sweater">
  <div class="collar"></div>

    <div class="torso">

    <div class="InnerSweater">
      <gifts></gifts>
      <center>
      .
      .
      .
      </center>
      <gifts></gifts>
    </div> 
    </div>

  <div class="hem"></div>

</div>

```

##Inner Sweater

This is a modification to the Spider-Man sweater from last week. [Spider-Man Sweater](https://dev.to/jarvisscript/ugly-sweater-css-spider-man-2ke2) The colors have been changed and snowflakes have been modified but the structure is the same. 

```CSS

.InnerSweater {
	width: 2000px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 50px;
	column-gap: 40px;
}
```
The wrapper div contains Gift boxes and Widow hourglass.
```CSS
.giftRow {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 140px;
	margin-top: 10px;
}

.hourglassRow {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 80px;
}
```

##Regifting (it's just like reusing code)

The snowflakes rows are now rows of gift boxes. I removed the 'X' and changed the plus sign to match the sweater color to be ribbons. Other colors made the sweater too busy.


![row of snow flakes. with borders added to the parts that make it. it's a white square under long white bars. the bars form an x and a plus sign.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rv1fkv2h0wdngedonah.jpg)


![row of five snowflakes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q470dk00w97rujnopmt.jpg)

The gift boxes.


![White gifts boxes with blue ribbon. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu1z670i1yhp848b6vmk.jpg)


```CSS
.line, .ribbon{
	width: 70px;
	height: 16px;
	background: white;
	position: absolute;
}

.ribbon {
	background: var(--sweaterblue);	
}

.hz {
	margin-left: -10px;
}
.vrt{
	transform: rotate(90deg);
	margin-left: -10px;
}

```

##Snowmen

Snowmen are made by reusing the snowflake base. The bottom was made bigger changing the square to 70x70px.

Also two snowflakes from the previous sweater project. Below you can see the square that was used as a base for the gifts, snowflakes, and snowmen in the sweater.


![a white square with rounded corners, same square with a plus plus mark on top, snowflake, snowman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3se33a51v4ylmjiv5zz.jpg)

```CSS
.snowman{
	width: 80px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.snow{
	height: 50px;
	width: 50px;
	border-radius: 10%;
	background: white;
	display: grid;
	justify-content: center;
	align-items: center;
}

.snow_bottom{
	width: 70px;
	height: 70px;
	border-radius: 10%;
	background: white;
	display: grid;
	justify-content: center;
	align-items: center;
}


```

The falling snow in the hourglass and the coal and carrot nose are are all 6x6px squares of different colors. The falling snow was made by alternating the spacing in rows of white squares. One set has used `justify-content: space-between;` the other `justify-content: center`

```css
.flake_wrapper{
	.
        .
	justify-content: space-between;
	align-items: center;
	gap: 6px;

}

.flake_wrapper2{
	.
        .
	justify-content: center;
	align-items: center;
	gap: 18px;

}
``` 

##Hourglass

The hourglass is made from a tall rectangle and its borders. The top and bottom borders have a red background. The left and right borders have a transparent background. This makes it look like two vertical triangles.

The same method was used to make a green triangle for the tree in the bottom of the hourglass.

```css
.hourglass{
	height: 0px;
	width: 85px;
	background: transparent;
	
	border-top: 95px solid var(--SweaterRed);
	border-bottom: 95px solid var(--SweaterRed);
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
        border-radius: 20%;

        display: grid;
	justify-content: center;
	align-items: center;
}
```




##Sweater-Time

Here is the final version of the Black Widow Ugly Sweater.

![illustration of a sweater. the background is blue. there rows of gift boxes. There a row of snowmen and in the center is a red hourglass. the top part has falling snow the bottom a Christmas tree.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fr5nqzff2llytk99znt5.jpg)



```
-$JarvisScript git push
```