This content originally appeared on DEV Community and was authored by Arman khan
Code for the feb challenge triend making two standing under the moon with abstract grphics
<!DOCTYPE html>
Winter Romance
<br>
body {<br>
margin: 0;<br>
height: 100vh;<br>
background: linear-gradient(to bottom, #0a2342, #2a5479);<br>
overflow: hidden;<br>
font-family: Arial, sans-serif;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> /* Moon */
.moon {
position: absolute;
top: 30px;
right: 30px;
width: 80px;
height: 80px;
background: radial-gradient(circle at 50% 50%, #fff 65%, #f0f0f0 100%);
border-radius: 50%;
box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
animation: moon-glow 3s ease-in-out infinite alternate;
}
/* Improved Streetlight */
.streetlight {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.streetlight-pole {
width: 12px;
height: 250px;
background: #3d3d3d;
margin: 0 auto;
}
.streetlight-arm {
width: 80px;
height: 12px;
background: #3d3d3d;
position: relative;
left: -34px;
}
.streetlight-lantern {
width: 60px;
height: 80px;
background: #4a4a4a;
border-radius: 10px;
position: relative;
left: -24px;
display: flex;
justify-content: center;
}
.streetlight-glow {
width: 40px;
height: 40px;
background: radial-gradient(circle,
rgba(255, 215, 150, 0.8) 0%,
rgba(255, 190, 100, 0.4) 50%,
transparent 100%);
filter: blur(15px);
animation: light-flicker 2s infinite alternate;
}
/* Couple Figures */
.couple {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 1;
animation: float 3s ease-in-out infinite;
}
.person {
width: 40px;
height: 100px;
position: relative;
}
.person:nth-child(1) {
transform: rotate(5deg);
}
.person:nth-child(2) {
transform: rotate(-5deg);
}
.person-body {
width: 40px;
height: 80px;
background: #2c2c2c;
border-radius: 20px;
position: absolute;
bottom: 0;
}
.person-head {
width: 25px;
height: 25px;
background: #ffe4c4;
border-radius: 50%;
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
}
/* Snowfall container */
#snow-particles {
position: absolute;
width: 100%;
height: 100%;
}
/* Animations */
@keyframes float {
0%, 100% { transform: translateY(0) translateX(-50%); }
50% { transform: translateY(-15px) translateX(-50%); }
}
@keyframes light-flicker {
0% { opacity: 0.9; }
100% { opacity: 1; }
}
@keyframes moon-glow {
0% { opacity: 0.9; }
100% { opacity: 1; }
}
/* Ground effect */
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background: linear-gradient(transparent, #ffffff33);
backdrop-filter: blur(3px);
z-index: 2;
}
</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="moon"></div></p>
<div class="highlight"><pre class="highlight plaintext"><code><div class="streetlight">
<div class="streetlight-pole"></div>
<div class="streetlight-arm"></div>
<div class="streetlight-lantern">
<div class="streetlight-glow"></div>
</div>
</div>
<div class="couple">
<div class="person">
<div class="person-head"></div>
<div class="person-body"></div>
</div>
<div class="person">
<div class="person-head"></div>
<div class="person-body"></div>
</div>
</div>
<div id="snow-particles"></div>
<div class="ground"></div>
<script>
// Initialize particles.js for snowfall
particlesJS('snow-particles', {
particles: {
number: { value: 150, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: { type: "circle" },
opacity: { value: 0.7, random: true },
size: { value: 5, random: true },
move: {
enable: true,
speed: 2,
direction: "bottom",
random: false,
straight: false,
out_mode: "out",
bounce: false,
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "repulse" },
resize: true
}
},
retina_detect: true
});
// Add arm connection between people
const couple = document.querySelector('.couple');
const arm = document.createElement('div');
arm.style.position = 'absolute';
arm.style.width = '40px';
arm.style.height = '8px';
arm.style.background = '#2c2c2c';
arm.style.top = '60px';
arm.style.left = '50%';
arm.style.transform = 'translateX(-50%)';
arm.style.borderRadius = '4px';
couple.appendChild(arm);
</script>
</code></pre></div>
<p></body><br>
</html></p>
This content originally appeared on DEV Community and was authored by Arman khan

Arman khan | Sciencx (2025-02-13T20:13:34+00:00) Feb Challenge. Retrieved from https://www.scien.cx/2025/02/13/feb-challenge/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.