Winter Solstice

#devchallenge #frontendchallenge #css #html

<!DOCTYPE html>

Winter Solstice CSS Art

<br>
body {<br>
margin: 0;<br>
font-family: 'Arial', sans-serif;<br>
background: linear-gradient(to bottom, #001d3d, #003366);<br>
color: #fff;<br>
display: flex;<br>
flex-direction: column;<br>
align-items: center;<br>
justify-content: center;<br>
height: 100vh;<br>
overflow: hidden;<br>
transition: background 5s ease-in-out;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 5px #000;
}

.scene {
    position: relative;
    width: 300px;
    height: 300px;
}

.sun {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #ffec99, #ffb703);
    border-radius: 50%;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulse 3s infinite;
    transition: background 5s ease-in-out;
}

.moon {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #d4d4dc, #828282);
    border-radius: 50%;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    display: none;
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, #00796b, #4caf50);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

.tree {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 140px;
    background: linear-gradient(to top, #004d40, #2e7d32);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100px;
    background: linear-gradient(to top, #004d40, #388e3c);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree::after {
    content: "";
    position: absolute;
    bottom: 170%;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 60px;
    background: linear-gradient(to top, #004d40, #4caf50);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.snowflake {
    position: absolute;
    top: -10%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall 5s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes fall {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateY(120vh) scale(0.5);
        opacity: 0;
    }
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<h1>Winter Solstice</h1><br>
<div class="scene"><br>
<div class="sun"></div><br>
<div class="moon"></div><br>
<div class="tree"></div><br>
<div class="ground"></div><br>
<br>
<script><br>
const scene = document.querySelector('.scene');<br>
const sun = document.querySelector('.sun');<br>
const moon = document.querySelector('.moon');<br>
const body = document.body;</p>
<div class="highlight"><pre class="highlight plaintext"><code> // Generate snowflakes
for (let i = 0; i < 50; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.style.left = Math.random() * 100 + '%';
snowflake.style.animationDelay = Math.random() * 5 + 's';
snowflake.style.animationDuration = (3 + Math.random() * 2) + 's';
snowflake.style.width = snowflake.style.height = (Math.random() * 5 + 5) + 'px';
scene.appendChild(snowflake);
}

    // Change background and sun to moon during snowfall
    setInterval(() =&amp;gt; {
        body.style.background = body.style.background.includes('#001d3d') 
            ? 'linear-gradient(to bottom, #000814, #001d3d)' 
            : 'linear-gradient(to bottom, #001d3d, #003366)';
        sun.style.display = sun.style.display === 'none' ? 'block' : 'none';
        moon.style.display = moon.style.display === 'block' ? 'none' : 'block';
    }, 10000); // Switch every 10 seconds
&amp;lt;/script&amp;gt;

</div>
</code></pre></div>
<p></body><br>
</html></p>

DEV Community

Winter Solstice

Top comments (0)

Read next

Understanding CSS Inheritance: A Guide to Consistent Styling

Variable Fonts for Dynamic Typography

LingoLens 🎤: Speak, Transcribe, Translate

Smart Bookmark Manager