Skip to main content

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>

Comments