<body>
<header>
<div class="headercontent">
<div class="item">
<i class="material-icons">home</i>
</div>
<div class="item">
<div class="menu">
<i class="material-icons">menu</i>
<div class="links">
<a href="#section-1" color="rgb(107, 194, 175)"><span class="material-icons">record_voice_over</span></a>
<a href="#section-2" color="rgb(170, 28, 201)"><span class="material-icons">stars</span></a>
<a href="#section-3" color="rgb(69, 18, 211)"><span class="material-icons">radio</span></a>
<a href="#section-4" color="rgb(69, 137, 251)"><span class="material-icons selected">assessment</span></a>
<a href="#section-5" color="rgb(16, 250, 73)"><span class="material-icons">games</span></a>
<a href="#section-6" color="rgb(228, 193, 26)"><span class="material-icons">album</span></a>
<a href="#section-7" color="rgb(231, 60, 35)"><span class="material-icons">favorite_border</span></a>
<a href="#section-8" color="rgb(198, 92, 91)"><span class="material-icons">fingerprint</span></a>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="activesection" address="#section-1">
<h2>Jabberwocky</h2>
<p>BY LEWIS CARROLL</p>
<div class="poetry">
’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.
“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”
He took his vorpal sword in hand;
Long time the manxome foe he sought—
So rested he by the Tumtum tree
And stood awhile in thought.
And, as in uffish thought he stood,
The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
And burbled as it came!
One, two! One, two! And through and through
The vorpal blade went snicker-snack!
He left it dead, and with its head
He went galumphing back.
“And hast thou slain the Jabberwock?
Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!”
He chortled in his joy.
’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.</div>
</section>
<section address="#section-2">
<h2>[little tree]</h2>
<p>BY E. E. CUMMINGS</p>
<div class="poetry">
little tree
little silent Christmas tree
you are so little
you are more like a flower
who found you in the green forest
and were you very sorry to come away?
see i will comfort you
because you smell so sweetly
i will kiss your cool bark
and hug you safe and tight
just as your mother would,
only don't be afraid
look the spangles
that sleep all the year in a dark box
dreaming of being taken out and allowed to shine,
the balls the chains red and gold the fluffy threads,
put up your little arms
and i'll give them all to you to hold
every finger shall have its ring
and there won't be a single place dark or unhappy
then when you're quite dressed
you'll stand in the window for everyone to see
and how they'll stare!
oh but you'll be very proud
and my little sister and i will take hands
and looking up at our beautiful tree
we'll dance and sing
"Noel Noel"</div>
</section>
<section address="#section-3">
<h2>The Road Not Taken</h2>
<p>BY ROBERT FROST</p>
<div class="poetry">
Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;
Then took the other, as just as fair,
And having perhaps the better claim,
Because it was grassy and wanted wear;
Though as for that the passing there
Had worn them really about the same,
And both that morning equally lay
In leaves no step had trodden black.
Oh, I kept the first for another day!
Yet knowing how way leads on to way,
I doubted if I should ever come back.
I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.</div>
</section>
<section address="#section-4">
<h2>April Is a Dog's Dream</h2>
<p>BY MARILYN SINGER</p>
<div class="poetry centered">
april is a dog's dream
the soft grass is growing
the sweet breeze is blowing
the air all full of singing feels just right
so no excuses now
we're going to the park
to chase and charge and chew
and I will make you see
what spring is all about</div>
</section>
<section address="#section-5">
<h2>Gathering Leaves</h2>
<p>BY ROBERT FROST</p>
<div class="poetry centered">
Spades take up leaves
No better than spoons,
And bags full of leaves
Are light as balloons.
I make a great noise
Of rustling all day
Like rabbit and deer
Running away.
But the mountains I raise
Elude my embrace,
Flowing over my arms
And into my face.
I may load and unload
Again and again
Till I fill the whole shed,
And what have I then?
Next to nothing for weight,
And since they grew duller
From contact with earth,
Next to nothing for color.
Next to nothing for use,
But a crop is a crop,
And who’s to say where
The harvest shall stop?</div>
</section>
<section address="#section-6">
<h2>Ritmo/Rhythm</h2>
<p>BY MARGARITA ENGLE</p>
<div class="poetry centered">
Mad has decided to catch a vulture,
the biggest bird she can find.
She is so determined, and so inventive,
that by stringing together a rickety trap
of ropes and sticks, she creates
a puzzling structure that just might
be clever enough to trick a buzzard,
once the trap’s baited with leftover pork
from supper.
Mad and I used to do everything together,
but now I need a project all my own,
so I roam the green fields,
finding bones.
The skull of a wild boar.
The jawbone of a mule.
Older cousins show me
how to shake the mule’s quijada,
to make the blunt teeth
rattle.
Guitars.
Drums.
Gourds.
Sticks.
A cow bell.
A washboard.
Pretty soon, we have
a whole orchestra.
On Cuban farms, even death
can turn into
music.</div>
</section>
<section address="#section-7">
<h2>Snow</h2>
<p>BY LOUIS MACNEICE</p>
<div class="poetry centered">
The room was suddenly rich and the great bay-window was
Spawning snow and pink roses against it
Soundlessly collateral and incompatible:
World is suddener than we fancy it.
World is crazier and more of it than we think,
Incorrigibly plural. I peel and portion
A tangerine and spit the pips and feel
The drunkenness of things being various.
And the fire flames with a bubbling sound for world
Is more spiteful and gay than one supposes—
On the tongue on the eyes on the ears in the palms of one's hands—
There is more than glass between the snow and the huge roses.</div>
</section>
<section address="#section-8">
<h2>Did you get this far? Wow!</h2>
<p>THANKS!</p>
<div class="poetry centered">
Just wanted to say thanks
for really giving this a look.
Please PLEASE say "Hi" or something
in the comments. Would love to
know someone has actually seen this.</div>
</section>
</main>
</body>
:root {
--bgcolor: rgb(69, 137, 251);
--menux: 50px;
--menuy: 50px;
}
html,
html *,
html *::before,
html *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 0;
background-color: var(--bgcolor);
color: #fff;
font-family: "Roboto", sans-serif;
transition: all 1s ease;
}
a:link,
a:visited,
a:hover,
a:active {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background: var(--bgcolor);
transition: all 4s ease;
}
.headercontent {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
height: calc(100% - 30px);
width: calc(100% - 60px);
margin: 15px 30px;
}
.item {
position: relative;
border-radius: 50%;
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
}
.item:not(.activeitem):hover {
background: rgba(255, 255, 255, 0.2);
}
section {
width: calc(100% - 5rem);
margin: 100px auto 0 auto;
display: none;
overflow: hidden;
}
section.activesection {
display: block;
padding-bottom: 50px;
}
.poetry {
font-family: "Shadows Into Light", cursive;
font-size: 1.5em;
display: block;
white-space: pre;
}
.menu {
position: absolute;
border-radius: 50%;
top: 11px;
left: 11px;
transition: all 0.5s ease;
border: 0px solid rgba(0, 0, 0, 0);
border-width: 0px;
border-color: rgba(0, 0, 0, 0);
}
.menu > .material-icons {
z-index: 9;
}
.links {
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
width: 0;
height: 0;
transition: all 0.5s ease;
opacity: 0;
}
.links a {
position: absolute;
top: 0;
left: -25px;
padding-top: 65px;
transform-origin: top center;
pointer-events: none;
transition: all 0.5s ease;
}
.links a span {
font-size: 10px;
}
.active .links a span {
font-size: 50px;
}
.active .links a {
pointer-events: all !important;
}
.links a:nth-child(1) {
transform: rotate(45deg);
}
.links a:nth-child(1):hover,
.links a:nth-child(1).selected {
color: rgb(107, 194, 175);
}
.links a:nth-child(2) {
transform: rotate(90deg);
}
.links a:nth-child(2):hover,
.links a:nth-child(2).selected {
color: rgb(170, 28, 201);
}
.links a:nth-child(3) {
transform: rotate(135deg);
}
.links a:nth-child(3):hover,
.links a:nth-child(3).selected {
color: rgb(69, 18, 211);
}
.links a:nth-child(4) {
transform: rotate(180deg);
}
.links a:nth-child(4):hover,
.links a:nth-child(4).selected {
color: rgb(69, 137, 251);
}
.links a:nth-child(5) {
transform: rotate(225deg);
}
.links a:nth-child(5):hover,
.links a:nth-child(5).selected {
color: rgb(16, 250, 73);
}
.links a:nth-child(6) {
transform: rotate(270deg);
}
.links a:nth-child(6):hover,
.links a:nth-child(6).selected {
color: rgb(228, 193, 26);
}
.links a:nth-child(7) {
transform: rotate(310deg);
}
.links a:nth-child(7):hover,
.links a:nth-child(7).selected {
color: rgb(231, 60, 35);
}
.links a:nth-child(8) {
transform: rotate(0deg);
}
.links a:nth-child(8):hover,
.links a:nth-child(8).selected {
color: rgb(198, 92, 91);
}
.active {
text-shadow: -2px -2px 2px rgba(0, 0, 0, 0.24);
position: absolute;
border-width: 100px;
border-color: rgba(0, 0, 0, 1);
transform: translateX(var(--menux)) translateY(var(--menuy)) rotate(360deg);
background: var(--bgcolor);
box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.2),
inset 2px 2px 2px rgba(255, 255, 255, 0.3), -2px -2px 2px rgba(0, 0, 0, 0.2),
2px 2px 2px rgba(255, 255, 255, 0.3), 0 0 90px 125px var(--bgcolor);
}
.active > i {
font-size: 3rem;
padding: 1rem;
}
.active .links {
animation: rotate 20s linear infinite;
font-size: 40px;
opacity: 1;
}
@keyframes rotate {
to {
transform: rotate(-360deg);
}
}
@keyframes frotate {
to {
transform: rotate(360deg);
}
}
let autofiremenu = true;
function toggleMenu($menu) {
console.log("tok");
let osl = $menu.offset().left;
let ost = $menu.offset().top - window.pageYOffset;
if ($menu.hasClass("active")) {
$menu.removeClass("active");
$menu.closest(".item").removeClass("activeitem");
setTimeout(function () {
$menu.find("i").text("menu");
}, 250);
} else {
var x = ($(window).width() / 2) * -1;
var y = $(window).height() / 3;
x = x - 100;
y = y - 100;
document.querySelector(":root").style.setProperty("--menux", x + "px");
document.querySelector(":root").style.setProperty("--menuy", y + "px");
$menu.addClass("active");
$menu.closest(".item").addClass("activeitem");
setTimeout(function () {
$menu.find("i").text("close");
}, 250);
}
}
function loadActions() {
$("body")
.off("click", ".menu > i")
.on("click", ".menu > i", function () {
toggleMenu($(this).closest(".menu"));
})
.off("click", ".links a")
.on("click", ".links a", function (e) {
e.preventDefault();
e.stopPropagation();
$(".selected").removeClass("selected");
$(this).addClass("selected");
var thiscolor = $(this).attr("color");
document.querySelector(":root").style.setProperty("--bgcolor", thiscolor);
var thisline = $(this).attr("href");
$("section.activesection").removeClass("activesection");
$('section[address="' + thisline + '"]').addClass("activesection");
});
}
$(function () {
loadActions();
if (autofiremenu == true) {
setTimeout(function () {
toggleMenu($(".menu"));
}, 1500);
}
});
