<!DOCTYPE html>
<html lang = "Nucleolus">
<head>
<title> Dreamscape </title>
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2024.css">
<style>
.looking-like-fools {
gap: clamp(4px, 2dvw, 6px);
flex-wrap: wrap;
justify-content: center;
}
.maddly-in-love {
text-align: center;
transition: transform 2s ease;
min-width: 22px;
flex: auto auto auto;
}
.maddly-in-love h4 {
font-size: clamp(.6rem, 2dvw, .8rem);
margin: 0;
}
.maddly-in-love:hover {
transform: scale(1.1);
}
@keyframes kissAnimation {
}
@keyframes kissAppear {
0% { opacity: .5;
transform: translate(-50%, -50%) scale(0); }
50% { opacity: 1;
transform: translate(-50%, -50%) scale(1.2); }
100% { opacity: 1;
transform: translate(-50%, -50%) scale(1); }
}
.maddly-in-love:hover::after {
top: 50%;
content: "💋";
transform: translate(-50%, -50%);
position: absolute;
animation: kissAppear 2s ease-in-out forwards;
font-size: 2em;
animation-iteration-count: 4;
}
.dreaming-of-you {
display: flex;
top: 0;
position: absolute;
align-items: center;
width: auto;
height: 100%;
justify-content: center;
}
.dreaming-of-you.left {
left: 2.5%;
}
.dreaming-of-you.right {
right: 2.5%;
}
.image-container {
width: auto;
height: auto;
position: absolute;
}
.image-container img {
width: 100dvw;
height: 100dvh;
object-fit: cover;
}
.dreaming-of-you pre {
white-space: pre-wrap;
font-size: clamp(0.6rem, 1.4dvw, 2rem);
line-height: 1.2;
overflow-y: auto;
background: rgba(222, 222, 222, 0.4);
border-radius: 6px;
margin: 0;
max-height: 90%;
word-wrap: normal;
padding: 10px;
}
.dreaming-of-you.left {
left: 8%;
}
.dreaming-of-you.right {
right: 8%;
}
.dreaming-of-you {
width: 40%;
font-size: 0.7rem;
}
</style>
</head>
<body>
<div class="w3-flex w3-2024-moonstruck looking-like-fools">
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
</div>
<div class = "image-container">
<img src="https://api.nga.gov/iiif/ffd3e8e9-6642-427b-aad5-ef69735b2204__900/0,70,900,472/!1200,630/0/default.jpg" alt = "line of sight">
<div class = "dreaming-of-you left">
<pre>
Moonlight streams through a cracked windowsill,
Sheer curtains billow in the light breeze.
I am lying in an empty room,
Beneath cool sheets,
Imagining you beside me—
Your long, heavy breath
Along my back,
The warmth from your body,
The weight of your arm
Hooked around my chest.
In a chaotic world, I am at rest,
In the safest place—
Building a nest, woven with blessings,
Handled with love, carried in on angel wings.
I haven’t quite yet fallen asleep;
I am too excited,
Finally having caught up with my dreams—
Those of you and me.
I think,
</pre>
</div>
<div class = "dreaming-of-you right">
<pre>
I may no longer ever need to sleep—
Not, at least, to see you,
Now here with me...
I turn around to kiss you,
To lay my ear upon your chest;
I long for the sound of your heart’s beat...
But am met with empty space, and silence.
That’s when it hits me—
Reality.
Still beneath the cool sheets,
Not warmed by your body,
I cling tightly to your memory,
To the moments we create,
Little by little, building
Toward a life in which we live together—
A bed we share,
Wrapped in sheets we heat,
Beneath the moonlight,
Enmeshed in the quiet gravity of each other’s stare.
</pre>
</div>
</div>
<meta name = "keywords" content = "HTML, CSS, W3.CSS">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">
</body>
</html>
<html lang = "Nucleolus">
<head>
<title> Dreamscape </title>
<link rel = "stylesheet" href = "https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2024.css">
<style>
.looking-like-fools {
gap: clamp(4px, 2dvw, 6px);
flex-wrap: wrap;
justify-content: center;
}
.maddly-in-love {
text-align: center;
transition: transform 2s ease;
min-width: 22px;
flex: auto auto auto;
}
.maddly-in-love h4 {
font-size: clamp(.6rem, 2dvw, .8rem);
margin: 0;
}
.maddly-in-love:hover {
transform: scale(1.1);
}
@keyframes kissAnimation {
}
@keyframes kissAppear {
0% { opacity: .5;
transform: translate(-50%, -50%) scale(0); }
50% { opacity: 1;
transform: translate(-50%, -50%) scale(1.2); }
100% { opacity: 1;
transform: translate(-50%, -50%) scale(1); }
}
.maddly-in-love:hover::after {
top: 50%;
content: "💋";
transform: translate(-50%, -50%);
position: absolute;
animation: kissAppear 2s ease-in-out forwards;
font-size: 2em;
animation-iteration-count: 4;
}
.dreaming-of-you {
display: flex;
top: 0;
position: absolute;
align-items: center;
width: auto;
height: 100%;
justify-content: center;
}
.dreaming-of-you.left {
left: 2.5%;
}
.dreaming-of-you.right {
right: 2.5%;
}
.image-container {
width: auto;
height: auto;
position: absolute;
}
.image-container img {
width: 100dvw;
height: 100dvh;
object-fit: cover;
}
.dreaming-of-you pre {
white-space: pre-wrap;
font-size: clamp(0.6rem, 1.4dvw, 2rem);
line-height: 1.2;
overflow-y: auto;
background: rgba(222, 222, 222, 0.4);
border-radius: 6px;
margin: 0;
max-height: 90%;
word-wrap: normal;
padding: 10px;
}
.dreaming-of-you.left {
left: 8%;
}
.dreaming-of-you.right {
right: 8%;
}
.dreaming-of-you {
width: 40%;
font-size: 0.7rem;
}
</style>
</head>
<body>
<div class="w3-flex w3-2024-moonstruck looking-like-fools">
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💕</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">💋</h4></div>
<div class="w3-padding w3-hover-crimson maddly-in-love"><h4 class = "w3-animate-fading">😘</h4></div>
</div>
<div class = "image-container">
<img src="https://api.nga.gov/iiif/ffd3e8e9-6642-427b-aad5-ef69735b2204__900/0,70,900,472/!1200,630/0/default.jpg" alt = "line of sight">
<div class = "dreaming-of-you left">
<pre>
Moonlight streams through a cracked windowsill,
Sheer curtains billow in the light breeze.
I am lying in an empty room,
Beneath cool sheets,
Imagining you beside me—
Your long, heavy breath
Along my back,
The warmth from your body,
The weight of your arm
Hooked around my chest.
In a chaotic world, I am at rest,
In the safest place—
Building a nest, woven with blessings,
Handled with love, carried in on angel wings.
I haven’t quite yet fallen asleep;
I am too excited,
Finally having caught up with my dreams—
Those of you and me.
I think,
</pre>
</div>
<div class = "dreaming-of-you right">
<pre>
I may no longer ever need to sleep—
Not, at least, to see you,
Now here with me...
I turn around to kiss you,
To lay my ear upon your chest;
I long for the sound of your heart’s beat...
But am met with empty space, and silence.
That’s when it hits me—
Reality.
Still beneath the cool sheets,
Not warmed by your body,
I cling tightly to your memory,
To the moments we create,
Little by little, building
Toward a life in which we live together—
A bed we share,
Wrapped in sheets we heat,
Beneath the moonlight,
Enmeshed in the quiet gravity of each other’s stare.
</pre>
</div>
</div>
<meta name = "keywords" content = "HTML, CSS, W3.CSS">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">
</body>
</html>
Comments
Post a Comment