Feb Challenge

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>


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;
}

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body><br>
<div class="moon"></div></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;div class="streetlight"&gt;
&lt;div class="streetlight-pole"&gt;&lt;/div&gt;
&lt;div class="streetlight-arm"&gt;&lt;/div&gt;
&lt;div class="streetlight-lantern"&gt;
&lt;div class="streetlight-glow"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="couple"&gt;
&lt;div class="person"&gt;
&lt;div class="person-head"&gt;&lt;/div&gt;
&lt;div class="person-body"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="person"&gt;
&lt;div class="person-head"&gt;&lt;/div&gt;
&lt;div class="person-body"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div id="snow-particles"&gt;&lt;/div&gt;
&lt;div class="ground"&gt;&lt;/div&gt;

&lt;script&gt;
// 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);

&lt;/script&gt;
</code></pre></div>
<p></body><br>
</html></p>


This content originally appeared on DEV Community and was authored by Arman khan


Print Share Comment Cite Upload Translate Updates
APA

Arman khan | Sciencx (2025-02-13T20:13:34+00:00) Feb Challenge. Retrieved from https://www.scien.cx/2025/02/13/feb-challenge/

MLA
" » Feb Challenge." Arman khan | Sciencx - Thursday February 13, 2025, https://www.scien.cx/2025/02/13/feb-challenge/
HARVARD
Arman khan | Sciencx Thursday February 13, 2025 » Feb Challenge., viewed ,<https://www.scien.cx/2025/02/13/feb-challenge/>
VANCOUVER
Arman khan | Sciencx - » Feb Challenge. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/13/feb-challenge/
CHICAGO
" » Feb Challenge." Arman khan | Sciencx - Accessed . https://www.scien.cx/2025/02/13/feb-challenge/
IEEE
" » Feb Challenge." Arman khan | Sciencx [Online]. Available: https://www.scien.cx/2025/02/13/feb-challenge/. [Accessed: ]
rf:citation
» Feb Challenge | Arman khan | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.