Ugly Sweater CSS: Spider-man.

Sweater-Man Sweater-Man, here's comes the Sweater-man

This ugly sweater was inspired by LEGO Spider-man he is part of the LEGO Avengers Advent calendar. I really should get a referral link for them.

edit: This timing wasn't planned but I just learned today is Ugly Sweater. The third Friday of December is Ugly Sweater day.

Basic Sweater

I've written about this before in Ugly Sweater BB-8 but a short explanation is the sweater body is a Dark Red background with black 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.

<div class="sweater">
  <div class="collar"></div>
    <div class="InnerSweater">
      <snow></snow>
      <spider-man></spider-man>
      <snow></snow>
    </div> 
  <div class="hem"></div>
</div>

Inner Sweater

Previous sweaters have featured a single item in the center. This time I wanted to add bands of snow flakes and band of Spider-men. I need to add a wrapper div called InnerSweater so I could make Columns.

.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 SnowRow and SpideyRows which themselves contain rows of items.

.snowRow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 140px;
    margin-top: 10px;
}

.spideyRow {
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 40px;
}

Snow Business

The snowflakes are modified squares with bars stacked on top. I made a white line and copied it. Then used transform rotate() and margins to adjust the positing of the copies. So there's an X and a plus sign (+) on the white square.

Can see it better with Borders. Here you can see the vertical, horizontal, and angles lines.

Remove the borders and the X and plus sign blend in with the white of the square.

.line{
    width: 70px;
    height: 16px;
    background: white;
    position: absolute;
}

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

}
.right{
    width: 82px;
    transform: rotate(-45deg);
    margin-left: -14px;
}

Spider-man

Spider-man's mask is a Square with ovals for eyes. Transform rotate was used to make the ovals skew in different directions. The shape is the same. The difference is that they rotate in the opposite direction.

.eye{
    width: 16px;
    height: 30px;
    background: white;
    border: 4px solid var(--SweaterDarkRed);
    border-top:  6px solid var(--SweaterDarkRed);
    border-bottom: 8px solid var(--SweaterDarkRed);
    border-top-right-radius: 40%;
    border-top-left-radius: 40%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    transform: rotate(30deg);
}

.eyeLeft{
    transform: rotate(-30deg);
}

Sweater-Time

Spider-Song

This year Brenda Lee beat Mariah Carey for the number one song. Now is the time to get Spider-man on the top of the charts with Joy to the world(That I just saved.)

This album was a line in the Into the Spider-verse movie. But fans wanted it so they made a quick album. Songs are sung by the actual actors.

Joy to the world
I keep saving
Maybe I could get paid
I saved you all again
This time from the Kingpin
And literally I don't get paid
Kinda weird that I don't get paid
I make my own web fluid and it's not free, okay?

-$JarvisScript git push