Ugly sweater CSS: The Child Christmas outfit

This is a short Christmas Eve post. Life has been busy this past couple weeks so I haven't finished any new CSS sweaters. So I'm updating last years the Child sweater.

Here's what the final Grogu sweater looked liked.

I learned some CSS in the year since this version was made. All I'm doing to update it is change the colors and add some Holiday cheer.

Here are the new colors for the cradle and the clothes.

:root {
    --MainRed: #a42624;;
    --DarkRed: #611913;
    --Green: #3d8425;
}

I changed Grogu's clothes from a robe to a sweater and added some snowflakes to it.

    <div class="childRobe">
       <div class="childHands"></div>
      <div class="snow"> * * * * </div>
       <div class="childHands"></div>
    </div>

.childRobe {
    background-color: var(--MainRed);
    height: 40px;
    width: 88px;
    margin-top: -70px;
    margin-right: -108px;
    display: flex;
    justify-content: space-between;
}

.snow {
    color: white;
    font-size: 1em;
    margin-top: -6px;
}

To finish it off I added a hat. This took the longest time of the updates. I had to add a new div without changing the positions of the rest of divs that make the Character. I placed the hat div before all the character divs and used Z-index to force the hat to show on top of ever thing.

.hat {
    background-color: var(--MainRed);
    height: 32px;
    width: 58px;
    border: 1px solid black;
    border-bottom: 2px solid white;
    margin-top: -442px;
    margin-right: 20px;
    border-top-left-radius: 62%;
    border-top-right-radius: 62%;
    z-index:2;
}

And there is the final Christmas version of the Child made with CSS. It was fun to update an old project with new skills. I hope you enjoyed it.

-$JarvisScript git push

Chris Jarvis | Fullstack Developer | Documentation

@jarvisscript

"Ugly sweater CSS: The Child Christmas outfit" by @JarvisScript #DEVCommunity dev.to/jarvisscript/u…
I updated last year's ugly sweater post. Now Grogu is has a new Christmas sweater.

17:27 PM - 24 Dec 2021