The Standard.html
<!DOCTYPE html><html>
<head lang = "lingua cordis"> Piqued Interest
<title> You </title>
</head>
<body>
<br><hr>
<h1> Attractive </h1>
<p title = "I see galaxies">
<mark><em><b> Within </b></em></mark> your eyes, a universe expanding. </p>
<p title = "Building blocks and puzzle pieces">
The foundation of <mark><em><b> a future world </b></em></mark>. </p>
<p title = "Chaotic acoustics">
Before the bells and whistles, <mark><em><b> there was </b></em></mark> Tim Berners-Leeding. </p>
<p title = "Entanglement">
Casting a web wide enough to reach <mark><em><b> YOU. </b></em></mark> </p>
<br><hr>
<h2> Lovely </h2>
<a href = "IPinter.com " target = "_top"> The Link </a>
<img src = "still.RAW" alt = "A dream" width = "100" height = "100">
<pre> <i><strong>
<del>The outline</del>
<ins>The starting place</ins>
The tug of fate
On my heart
In a language
Without words<sup>(01 & 00)</sup>
Encoded like DNA<sub>(A&T G&C)</sub> </i></strong>
</pre>
<br><hr>
<h3> Elegant </h3>
<p><a href = "#A"><bdo dir = "rtl"> .gnitsefinaM :nigeB oT </bdo></a>
<br>
<iframe src = "Envisioning.WebP" height = "144" width = "144"></iframe> </p>
<br><hr>
<h4> Xenial </h4>
<p><cite> How do I love thee? Let me count the ways </cite> by Elizabeth Barrett Browning </p>
<blockquote cite = "https://www.poetryfoundation.org/poems/43742/sonnets-from-the-portuguese-43-how-do-i-love-thee-let-me-count-the-ways">
How do I love thee? Let me count the ways.
I love thee to the depth and breadth and height
My soul can reach, when feeling out of sight
For the ends of being and ideal grace.
I love thee to the level of every day’s
Most quiet need, by sun and candle-light.
I love thee freely, as men strive for right;
I love thee purely, as they turn from praise.
I love thee with the passion put to use
In my old griefs, and with my childhood’s faith.
I love thee with a love I seemed to lose
With my lost saints. I love thee with the breath,
Smiles, tears, of all my life; and, if God choose,
I shall but love thee better after death.
</blockquote>
<br><hr>
<h5> Exquisite </h5>
<ol id = "A" type = "I">
<li> Beauty </li>
<li> Charm </li>
<li> Radiance </li>
<li> Divinity </li>
</ol>
<br>
<h6> Impeccable </h6>
<table title = "Order in the Chaos" cellpadding = "4" cellspacing = "2">
<caption> In Spire </caption>
<thead>
<tr>
<th> Hope </th>
<th> Faith </th>
<th> Love </th>
<th> Discipline </th>
</tr>
</thead>
<tbody>
<tr>
<td> on the wings of a Dove </td>
<td> a north Star </td>
<td> Forget-me-not </td>
<td> chosen Chains </td>
</tr>
<tr>
<td> renew like the Phoenix </td>
<td> a guiding Light </td>
<td> for i am but a Jasmine </td>
<td> a devotional Shield </td>
</tr>
<tr>
<td> bring the cheerful Robin </td>
<td> an eternal Flame </td>
<td> declaring my Tulips </td>
<td> a Temple, where divinity dwells </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> <sub><small> an anchor </small></sub></td>
<td> <sub><small> a buttress </small></sub></td>
<td> <sub><small> a bulwark </small></sub></td>
<td> <sub><small> to embed </small></sub></td>
</tr>
</tfoot>
</table>
<br>
<br>
<div> Worthy of Suffering </div>
<meta name = "keywords" content = "HTML">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">
</body>
</html>
CompaSS.html
<!DOCTYPE html>
<html>
<head lang = "Magnetoreception">
<title> A Voluntary Migration </title>
<style>
h1 {
width: 99dvw;
outline-style: groove;
outline-width: thin;
background-image: url(https://media.gettyimages.com/id/667588491/photo/northern-lights-over-top-of-the-town-known-as-djupavik-along-the-strandir-coast.jpg?s=2048x2048&w=gi&k=20&c=IWSddLNSojW3_LQzOJocv70obuLmcZep5lihV9zdDEs=);
font-size: 88px;
text-align: center;
}
#toggle {
display: none;
}
body {
width: 100dvw;
text-align: center;
color: white;
background-color: black;
font-family: courier;
background-attachment: fixed;
}
h2 {
zoom: 111%;
word-break: normal;
word-spacing: normal;
vertical-align: super;
margin-top: 100px;
padding-bottom: 50px;
}
label {
cursor: pointer;
}
.любовь {
border: 8px solid #98AFC7;
border-start-start-radius: 69%;
font-weight: bold;
font-size: 22px;
display: block;
transition: all 0.2s ease;
background-color: lightblue;
color: #254117;
margin-top: 44px;
margin-bottom: 44px;
margin-right: 44px;
margin-left: 44px;
user-select: none;
}
#toggle2 {
display: none;
}
.навсегда {
border: 8px solid grey;
border-start-end-radius: 69%;
font-weight: bold;
font-size: 22px;
display: block;
transition: all 0.2s ease;
background-color: lightgrey;
color: #254117;
margin-top: 44px;
margin-bottom: 44px;
margin-right: 44px;
margin-left: 44px;
user-select: none;
}
.любовь:active, .навсегда:active {
transform: translateY(0);
}
#toggle:checked + .любовь, #toggle2:checked + .навсегда {
border: 8px solid #7F7F7F;
background-color: #808080;
}
.любовь:hover, .навсегда:hover {
transform: scale(1.02);
border: 8px solid #AF0000;
background-color: tomato;
}
.любовь::after, .навсегда::after {
display: inline-block;
content: "▼";
transition: transform 0.4s ease;
margin-left: 11px;
}
#toggle:checked + .любовь::after, #toggle2:checked + .навсегда::after {
transform: rotate(180deg);
}
#toggle:checked + .любовь:hover, #toggle2:checked + .навсегда:hover {
transform: scale(1.02);
border: 8px solid #AF0000;
background-color: tomato;
}
.collapsible-content {
opacity: 0;
overflow: hidden;
max-height: 0;
border-radius: 25%;
}
#toggle:checked + .любовь + .collapsible-content, #toggle2:checked + .навсегда + .collapsible-content {
transition: all 0.4s;
opacity: 1;
background-color: #f9f9f9;
color: #254117;
max-height: 100%;
padding: 100px;
}
#аврора {
animation: aRushingDance 22s alternate infinite;
height: 100px;
width: 99%;
}
@keyframes aRushingDance {
0% { background-color: #000080; }
20% { background-color: #008000; }
40% { background-color: #800000; }
60% { background-color: #800080; }
80% { background-color: #808000; }
100% { background-color: #800080; }
}
</style>
<h1> A True North: <small>With Flashing Lights</small> </h1>
</head>
<body>
<p> I felt like a bird — not blowing in the wind — guided by the magnetism </p>
<input type = "checkbox" id = "toggle" />
<label class = "любовь" for = "toggle"> Learning To Fly </label>
<div class = "collapsible-content">
<p><cite><h2> At That Hour </h2></cite> by James Joyce </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-14348">
At that hour when all things have repose,
O lonely watcher of the skies,
Do you hear the night wind and the sighs
Of harps playing unto Love to unclose
The pale gates of sunrise?
When all things repose, do you alone
Awake to hear the sweet harps play
To Love before him on his way,
And the night wind answering in antiphon
Till night is overgone?
Play on, invisible harps, unto Love,
Whose way in heaven is aglow
At that hour when soft lights come and go,
Soft sweet music in the air above
And in the earth below.
</blockquote></pre>
<br><hr>
<p><cite><h2> Roll the dice </h2></cite> by Charles Bukowski </p>
<pre><blockquote cite = "https://deeptrums.com/5-poems-of-charles-bukowski-you-should-not-miss">
If you’re going to try, go all the way. Otherwise, don’t even start.
If you’re going to try, go all the way. This could mean
– losing girlfriends, wives, relatives, jobs, and maybe your mind;
go all the way
it could mean not eating for three or four days
it could mean freezing on a park bench
it could mean jail
it could mean derision, mockery, isolation
Isolation is a gift. All the others are a test of your endurance,
how much you really want to do it.
And you will do it.
Despite rejections and the worst odds
And it will be better than anything else that you can imagine
If you’re going to try, go all the way
There’s no other feeling like that
You will be alone with the gods and the nights will flame with fire
Do it; do it; do it
All the way
You will ride life straight into perfect laughter, it’s the only good fight
there is.
</blockquote></pre>
<br><hr>
<p><cite><h2> All Day I Hear the Noise of Waters </h2></cite> by James Joyce </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-14350">
All day I hear the noise of waters
Making moan,
Sad as the sea-bird is when, going
Forth alone,
He hears the winds cry to the water's
Monotone.
The grey winds, the cold winds are blowing
Where I go.
I hear the noise of many waters
Far below.
All day, all night, I hear them flowing
To and fro.
</blockquote></pre>
<br><hr>
<p><cite><h2> a pretty a day </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-6980">
a pretty a day
(and every fades)
is here and away
(but born are maids
to flower an hour
in all,all)
o yes to flower
until so blithe
a doer a wooer
some limber and lithe
some very fine mower
a tall;tall
some jerry so very
(and nellie and fan)
some handsomest harry
(and sally and nan
they tremble and cower
so pale ale)
for betty was born
to never say nay
but lucy could learn
and lily could pray
and fewer were shyer
than doll. doll
</blockquote></pre>
</div>
<p> through the seasons — through the years </p>
<input type = "checkbox" id = "toggle2" />
<label class = "навсегда" for = "toggle2"> Learning To Land </label>
<div class = "collapsible-content">
<p><cite><h2> all which isn't singing is mere talking </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-6983">
all which isn't singing is mere talking
and all talking's talking to oneself
(whether that oneself be sought or seeking
master or disciple sheep or wolf)
gush to it as deity or devil
-toss in sobs and reasons threats and smiles
name it cruel fair or blessed evil-
it is you (ne i)nobody else
drive dumb mankind dizzy with haranguing
-you are deafened every mother's son-
all is merely talk which isn't singing
and all talking's to oneself alone
but the very song of(as mountains
feel and lovers)singing is silence
</blockquote></pre>
<br><hr>
<p><cite><h2> ballad of the scholar's lament </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-7028">
When I have struggled through three hundred years
of Roman history, and hastened o'er
Some French play-(though I have my private fears
Of flunking sorely when I take the floor
In class),-when I have steeped my soul in gore
And Greek, and figured over half a ream
With Algebra, which I do (not) adore,
How shall I manage to compose a theme?
It's well enough to talk of poor and peers,
And munch the golden apples' shiny core,
And lay a lot of heroes on their biers;-
While the great Alec, knocking down a score,
Takes out his handkerchief, boohoo-ing, "More!"-
But harshly I awaken from my dream,
To find a new,-er,-privilege,-in store:
How shall I manage to compose a theme?
After I've swallowed prophecies of seers,
And trailed Aeneas from the Trojan shore,
Learned how Achilles, after many jeers,
On piggy Agamemnon got to sore,
And heard how Hercules, Esq., tore
Around, and swept and dusted with a stream,
There's one last duty,-let's not call it bore,-
How shall I manage to compose a theme?
Envoi
Of what avail is all my mighty lore?
I beat my breast, I tear my hair, I scream:
"Behold, I have a Herculean chore.
How shall I manage to compose a theme?"
</blockquote></pre>
<br><hr>
<p><cite><h2> if </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-7024">
If freckles were lovely, and day was night,
And measles were nice and a lie warn't a lie,
Life would be delight,-
But things couldn't go right
For in such a sad plight
I wouldn't be I.
If earth was heaven, and now was hence,
And past was present, and false was true,
There might be some sense
But I'd be in suspense
For on such a pretense
You wouldn't be you.
If fear was plucky, and globes were square,
And dirt was cleanly and tears were glee
Things would seem fair,-
Yet they'd all despair,
For if here was there
We wouldn't be we.
</blockquote></pre>
<br><hr>
<p><cite><h2> IF– </h2></cite> by Rudyard Kipling </p>
<pre><blockquote cite = "https://www.poetryfoundation.org/poems/46473/if---">
If you can keep your head when all about you
Are losing theirs and blaming it on you,
If you can trust yourself when all men doubt you,
But make allowance for their doubting too;
If you can wait and not be tired by waiting,
Or being lied about, don’t deal in lies,
Or being hated, don’t give way to hating,
And yet don’t look too good, nor talk too wise:
If you can dream—and not make dreams your master;
If you can think—and not make thoughts your aim;
If you can meet with Triumph and Disaster
And treat those two impostors just the same;
If you can bear to hear the truth you’ve spoken
Twisted by knaves to make a trap for fools,
Or watch the things you gave your life to, broken,
And stoop and build ’em up with worn-out tools:
If you can make one heap of all your winnings
And risk it on one turn of pitch-and-toss,
And lose, and start again at your beginnings
And never breathe a word about your loss;
If you can force your heart and nerve and sinew
To serve your turn long after they are gone,
And so hold on when there is nothing in you
Except the Will which says to them: ‘Hold on!’
If you can talk with crowds and keep your virtue,
Or walk with Kings—nor lose the common touch,
If neither foes nor loving friends can hurt you,
If all men count with you, but none too much;
If you can fill the unforgiving minute
With sixty seconds’ worth of distance run,
Yours is the Earth and everything that’s in it,
And—which is more—you’ll be a Man, my son!
</blockquote></pre>
</div>
<p> dance — weave — romance </p>
<div id = "аврора"> </div>
<meta name = "keywords" content = "HTML, CSS">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">
</body>
</html>
<html>
<head lang = "Magnetoreception">
<title> A Voluntary Migration </title>
<style>
h1 {
width: 99dvw;
outline-style: groove;
outline-width: thin;
background-image: url(https://media.gettyimages.com/id/667588491/photo/northern-lights-over-top-of-the-town-known-as-djupavik-along-the-strandir-coast.jpg?s=2048x2048&w=gi&k=20&c=IWSddLNSojW3_LQzOJocv70obuLmcZep5lihV9zdDEs=);
font-size: 88px;
text-align: center;
}
#toggle {
display: none;
}
body {
width: 100dvw;
text-align: center;
color: white;
background-color: black;
font-family: courier;
background-attachment: fixed;
}
h2 {
zoom: 111%;
word-break: normal;
word-spacing: normal;
vertical-align: super;
margin-top: 100px;
padding-bottom: 50px;
}
label {
cursor: pointer;
}
.любовь {
border: 8px solid #98AFC7;
border-start-start-radius: 69%;
font-weight: bold;
font-size: 22px;
display: block;
transition: all 0.2s ease;
background-color: lightblue;
color: #254117;
margin-top: 44px;
margin-bottom: 44px;
margin-right: 44px;
margin-left: 44px;
user-select: none;
}
#toggle2 {
display: none;
}
.навсегда {
border: 8px solid grey;
border-start-end-radius: 69%;
font-weight: bold;
font-size: 22px;
display: block;
transition: all 0.2s ease;
background-color: lightgrey;
color: #254117;
margin-top: 44px;
margin-bottom: 44px;
margin-right: 44px;
margin-left: 44px;
user-select: none;
}
.любовь:active, .навсегда:active {
transform: translateY(0);
}
#toggle:checked + .любовь, #toggle2:checked + .навсегда {
border: 8px solid #7F7F7F;
background-color: #808080;
}
.любовь:hover, .навсегда:hover {
transform: scale(1.02);
border: 8px solid #AF0000;
background-color: tomato;
}
.любовь::after, .навсегда::after {
display: inline-block;
content: "▼";
transition: transform 0.4s ease;
margin-left: 11px;
}
#toggle:checked + .любовь::after, #toggle2:checked + .навсегда::after {
transform: rotate(180deg);
}
#toggle:checked + .любовь:hover, #toggle2:checked + .навсегда:hover {
transform: scale(1.02);
border: 8px solid #AF0000;
background-color: tomato;
}
.collapsible-content {
opacity: 0;
overflow: hidden;
max-height: 0;
border-radius: 25%;
}
#toggle:checked + .любовь + .collapsible-content, #toggle2:checked + .навсегда + .collapsible-content {
transition: all 0.4s;
opacity: 1;
background-color: #f9f9f9;
color: #254117;
max-height: 100%;
padding: 100px;
}
#аврора {
animation: aRushingDance 22s alternate infinite;
height: 100px;
width: 99%;
}
@keyframes aRushingDance {
0% { background-color: #000080; }
20% { background-color: #008000; }
40% { background-color: #800000; }
60% { background-color: #800080; }
80% { background-color: #808000; }
100% { background-color: #800080; }
}
</style>
<h1> A True North: <small>With Flashing Lights</small> </h1>
</head>
<body>
<p> I felt like a bird — not blowing in the wind — guided by the magnetism </p>
<input type = "checkbox" id = "toggle" />
<label class = "любовь" for = "toggle"> Learning To Fly </label>
<div class = "collapsible-content">
<p><cite><h2> At That Hour </h2></cite> by James Joyce </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-14348">
At that hour when all things have repose,
O lonely watcher of the skies,
Do you hear the night wind and the sighs
Of harps playing unto Love to unclose
The pale gates of sunrise?
When all things repose, do you alone
Awake to hear the sweet harps play
To Love before him on his way,
And the night wind answering in antiphon
Till night is overgone?
Play on, invisible harps, unto Love,
Whose way in heaven is aglow
At that hour when soft lights come and go,
Soft sweet music in the air above
And in the earth below.
</blockquote></pre>
<br><hr>
<p><cite><h2> Roll the dice </h2></cite> by Charles Bukowski </p>
<pre><blockquote cite = "https://deeptrums.com/5-poems-of-charles-bukowski-you-should-not-miss">
If you’re going to try, go all the way. Otherwise, don’t even start.
If you’re going to try, go all the way. This could mean
– losing girlfriends, wives, relatives, jobs, and maybe your mind;
go all the way
it could mean not eating for three or four days
it could mean freezing on a park bench
it could mean jail
it could mean derision, mockery, isolation
Isolation is a gift. All the others are a test of your endurance,
how much you really want to do it.
And you will do it.
Despite rejections and the worst odds
And it will be better than anything else that you can imagine
If you’re going to try, go all the way
There’s no other feeling like that
You will be alone with the gods and the nights will flame with fire
Do it; do it; do it
All the way
You will ride life straight into perfect laughter, it’s the only good fight
there is.
</blockquote></pre>
<br><hr>
<p><cite><h2> All Day I Hear the Noise of Waters </h2></cite> by James Joyce </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-14350">
All day I hear the noise of waters
Making moan,
Sad as the sea-bird is when, going
Forth alone,
He hears the winds cry to the water's
Monotone.
The grey winds, the cold winds are blowing
Where I go.
I hear the noise of many waters
Far below.
All day, all night, I hear them flowing
To and fro.
</blockquote></pre>
<br><hr>
<p><cite><h2> a pretty a day </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-6980">
a pretty a day
(and every fades)
is here and away
(but born are maids
to flower an hour
in all,all)
o yes to flower
until so blithe
a doer a wooer
some limber and lithe
some very fine mower
a tall;tall
some jerry so very
(and nellie and fan)
some handsomest harry
(and sally and nan
they tremble and cower
so pale ale)
for betty was born
to never say nay
but lucy could learn
and lily could pray
and fewer were shyer
than doll. doll
</blockquote></pre>
</div>
<p> through the seasons — through the years </p>
<input type = "checkbox" id = "toggle2" />
<label class = "навсегда" for = "toggle2"> Learning To Land </label>
<div class = "collapsible-content">
<p><cite><h2> all which isn't singing is mere talking </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-6983">
all which isn't singing is mere talking
and all talking's talking to oneself
(whether that oneself be sought or seeking
master or disciple sheep or wolf)
gush to it as deity or devil
-toss in sobs and reasons threats and smiles
name it cruel fair or blessed evil-
it is you (ne i)nobody else
drive dumb mankind dizzy with haranguing
-you are deafened every mother's son-
all is merely talk which isn't singing
and all talking's to oneself alone
but the very song of(as mountains
feel and lovers)singing is silence
</blockquote></pre>
<br><hr>
<p><cite><h2> ballad of the scholar's lament </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-7028">
When I have struggled through three hundred years
of Roman history, and hastened o'er
Some French play-(though I have my private fears
Of flunking sorely when I take the floor
In class),-when I have steeped my soul in gore
And Greek, and figured over half a ream
With Algebra, which I do (not) adore,
How shall I manage to compose a theme?
It's well enough to talk of poor and peers,
And munch the golden apples' shiny core,
And lay a lot of heroes on their biers;-
While the great Alec, knocking down a score,
Takes out his handkerchief, boohoo-ing, "More!"-
But harshly I awaken from my dream,
To find a new,-er,-privilege,-in store:
How shall I manage to compose a theme?
After I've swallowed prophecies of seers,
And trailed Aeneas from the Trojan shore,
Learned how Achilles, after many jeers,
On piggy Agamemnon got to sore,
And heard how Hercules, Esq., tore
Around, and swept and dusted with a stream,
There's one last duty,-let's not call it bore,-
How shall I manage to compose a theme?
Envoi
Of what avail is all my mighty lore?
I beat my breast, I tear my hair, I scream:
"Behold, I have a Herculean chore.
How shall I manage to compose a theme?"
</blockquote></pre>
<br><hr>
<p><cite><h2> if </h2></cite> by e.e. cummings </p>
<pre><blockquote cite = "https://mypoeticside.com/show-classic-poem-7024">
If freckles were lovely, and day was night,
And measles were nice and a lie warn't a lie,
Life would be delight,-
But things couldn't go right
For in such a sad plight
I wouldn't be I.
If earth was heaven, and now was hence,
And past was present, and false was true,
There might be some sense
But I'd be in suspense
For on such a pretense
You wouldn't be you.
If fear was plucky, and globes were square,
And dirt was cleanly and tears were glee
Things would seem fair,-
Yet they'd all despair,
For if here was there
We wouldn't be we.
</blockquote></pre>
<br><hr>
<p><cite><h2> IF– </h2></cite> by Rudyard Kipling </p>
<pre><blockquote cite = "https://www.poetryfoundation.org/poems/46473/if---">
If you can keep your head when all about you
Are losing theirs and blaming it on you,
If you can trust yourself when all men doubt you,
But make allowance for their doubting too;
If you can wait and not be tired by waiting,
Or being lied about, don’t deal in lies,
Or being hated, don’t give way to hating,
And yet don’t look too good, nor talk too wise:
If you can dream—and not make dreams your master;
If you can think—and not make thoughts your aim;
If you can meet with Triumph and Disaster
And treat those two impostors just the same;
If you can bear to hear the truth you’ve spoken
Twisted by knaves to make a trap for fools,
Or watch the things you gave your life to, broken,
And stoop and build ’em up with worn-out tools:
If you can make one heap of all your winnings
And risk it on one turn of pitch-and-toss,
And lose, and start again at your beginnings
And never breathe a word about your loss;
If you can force your heart and nerve and sinew
To serve your turn long after they are gone,
And so hold on when there is nothing in you
Except the Will which says to them: ‘Hold on!’
If you can talk with crowds and keep your virtue,
Or walk with Kings—nor lose the common touch,
If neither foes nor loving friends can hurt you,
If all men count with you, but none too much;
If you can fill the unforgiving minute
With sixty seconds’ worth of distance run,
Yours is the Earth and everything that’s in it,
And—which is more—you’ll be a Man, my son!
</blockquote></pre>
</div>
<p> dance — weave — romance </p>
<div id = "аврора"> </div>
<meta name = "keywords" content = "HTML, CSS">
<meta name = "description" content = "a love poem">
<meta name = "author" content = "the source of eternal love">
</body>
</html>
W3Brainery.css
<!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