Entries Closed [Design/HTML/CSS] Festive Div ☃️

Entries Closed [Design/HTML/CSS] Festive Div ☃️

adam

Mr. Webwide
Administrator
Local time
00:34
Joined
Sep 24, 2019
Messages
1,261
Pronouns
he/him

Challenge Name: Festive Div
Closing Date: 20th December 2019 12:00pm UTC

The holiday season is upon us! In this community challenge you are tasked with channelling some of your festive spirit in to a coded creation.

What can you create with just a single div?

Your challenge is to create a piece of holiday-themed CSS art using nothing but CSS and a single empty div in your HTML body.

HTML:
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Webwide Festive Div</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div id="canvas"></div>
    </body>
</html>
CSS:
#canvas { }
#canvas:before { }
#canvas:after { }

You are welcome to use the html/body elements to set a background and suitably sized container. CSS preprocessors are also permitted.

You will likely find that the website 'A Single Div' contains some nice inspiration for what can be achieved with these limitations.

All submissions will receive a holiday themed profile trophy. You can either play for fun or choose to submit your creation in to our public vote after the closing date to choose a winner who will receive first place in this challenge.

Submit your entry below using the following template and feel free to use the thread to discuss any ideas also. I'll keep the participants updated in this OP to keep them easy to find. 😄

Submission Name:
CodePen
(or similar) URL:
Submit for Voting:
Yes/No

 
Last edited:

avena

Member
Local time
19:34
Joined
Oct 19, 2019
Messages
152

Ohh, chat proves to be handy, It leads me to this post 🤘 . Sounds fun, will do something! 😊

 

adam

Mr. Webwide
Administrator
Local time
00:34
Joined
Sep 24, 2019
Messages
1,261
Pronouns
he/him

Ohh, chat proves to be handy, It leads me to this post 🤘 . Sounds fun, will do something! 😊
Looking forward to it! Do you think the rules should be relaxed to allow a few more divs inside to allow for a bit easier creativity?

 

avena

Member
Local time
19:34
Joined
Oct 19, 2019
Messages
152

I think it is perfect like that 🤗 . It is definitely a challenge to use a single div, which makes you think.

It is allow to write inside the div, right?

 

adam

Mr. Webwide
Administrator
Local time
00:34
Joined
Sep 24, 2019
Messages
1,261
Pronouns
he/him

I think it is perfect like that 🤗 . It is definitely a challenge to use a single div, which makes you think.

It is allow to write inside the div, right?

Yeah some text is fine, just no extra HTML elements currently like the 'a single div' website example. 😄

 

Gummibeer

Astroneer
Moderator
Local time
01:34
Joined
Oct 5, 2019
Messages
1,187
Pronouns
he/him

Looking forward to it! Do you think the rules should be relaxed to allow a few more divs inside to allow for a bit easier creativity?
The question is if you want a comma separated background challenge or more a stack simple (CSS) geometric docs to a big "image". The second one could also be done with a canvas and plain JS.

 

adam

Mr. Webwide
Administrator
Local time
00:34
Joined
Sep 24, 2019
Messages
1,261
Pronouns
he/him

joshmanders

Full Snack Developer
Local time
18:34
Joined
Dec 4, 2019
Messages
43

I see the pressure increases to participate. Have to defend my "all challenge participation"! 😅
@joshmanders what's about you? You wanted to challenge my trophies. 😉

Unfortunately on a scale from 1 to 100, 100 being dope, I'm a 300. But when we factor in CSS skillset, I'm a 4.

This challenge I will have to bow out of.

 

VickiLanger

Asks "why?" too much
Gold Member
Local time
19:34
Joined
Oct 7, 2019
Messages
189
Pronouns
she/her

Yay Vicki's back! 😄 I love it! I like to think I am looking up at the night sky and a microsecond away from being snowballed to the face. 🥶
I'm soooooo glad you understood my abstract vision :D

 
Top