commit a54644eb6c4c063886f2928e10d2bdac52dff506 Author: Rushil Umaretiya Date: Wed Feb 14 18:00:08 2024 -0500 thank you maya diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..274c3c2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# Ignore compiled Sass files +*.css +*.css.map + +# Ignore Sass cache files +.sass-cache/ \ No newline at end of file diff --git a/img/maya.png b/img/maya.png new file mode 100644 index 0000000..479938b Binary files /dev/null and b/img/maya.png differ diff --git a/img/resting.png b/img/resting.png new file mode 100644 index 0000000..539d47e Binary files /dev/null and b/img/resting.png differ diff --git a/img/sleeping.png b/img/sleeping.png new file mode 100644 index 0000000..85d2e39 Binary files /dev/null and b/img/sleeping.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..791b59d --- /dev/null +++ b/index.html @@ -0,0 +1,219 @@ + + + + + + maya + + + +
This is best viewed on a mobile device.
+ maya +
+
+ + + +
+
+

thank you.

+
+
+
+
+

maya. maya. maya.

+

by: rushil

+
+
+
+

Maya, maya, maya.

+

Welcome home,

+

it's so nice to meet you.

+

This is our family,

+

feel free to roam.

+
+
+

Maya, maya, maya.

+

Get off the sofa!

+

Don't feed her too much!

+

What type of dog is she?

+

Duck-tolling, nova-scotia?

+
+
+

Maya, maya, maya.

+

You're so well-trained and good-mannered.

+

It's like you've been here for years,

+

blending into our world without a single barrier.

+

You've even got Dada enamored.

+
+
+

Maya, maya, maya.

+

Jump around, such a lively soul!

+

Fetch, wrestle, run.

+

Even when you dream,

+

still trying to catch that mole.

+
+
+

Maya, maya, maya.

+

Everyone got busy or mad or sad!

+

You just keep a smile on your face,

+

give your tail a little wag.

+

To have you, we're so glad.

+
+
+

Maya, maya, maya.

+

You fill my memories with fun times.

+

Being there with our family,

+

laughing long into the night.

+

You'll always be there when I close my eyes.

+
+
+

And here we are,

+

as my tears blend into the rain.

+

I say,

+

“Maya, maya, maya,

+

Till I see you again”

+
+
+
+
+ + + +
+
+ + + + + + +
+
+ + + +
+
+
+
+ image of maya's final resting place +
+

maya ace-patel

+

forever - 2024

+
+
+
+

shh... she’s sleeping!

+ maya sleeping +
+ + + diff --git a/styles.sass b/styles.sass new file mode 100644 index 0000000..ab7eaf0 --- /dev/null +++ b/styles.sass @@ -0,0 +1,211 @@ +$mobile-breakpoint: 960px +$background: #f5f5f5 +$brown: #C7AEA1 +$darkbrown: #aa8571 +$orange: #EFB82B + +@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Cedarville+Cursive&display=swap') + +$serif: 'Averia Serif Libre', serif +$cursive: 'Cedarville Cursive', cursive + +* + margin: 0 + padding: 0 + box-sizing: border-box + +.hide + display: none + +body + background: lighten($brown, 10%) + overflow-x: hidden + +.mobile-helper + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% + background-color: $background + color: black + display: flex + align-items: center + justify-content: center + font-size: 24px + z-index: 9999 + font-family: $serif + + @media (max-width: $mobile-breakpoint) + display: none + +@keyframes title-in + to + stroke-dashoffset: 0 + +@keyframes title-wrapper-in + to + height: 30svh + +@keyframes hero-in + to + opacity: 1 + +.hero-img + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% + object-fit: cover + z-index: -1 + opacity: 0 + + animation: hero-in 5s ease-in-out forwards + animation-delay: 5s + +.hero + z-index: 1 + min-height: 115svh + background: transparent + color: black + display: flex + flex-direction: column + align-items: center + justify-content: space-between + + .title-wrapper + height: 100svh + width: 100% + background: linear-gradient(180deg, $darkbrown 0%, $brown 40%, transparent 100%) + display: flex + align-items: center + justify-content: center + animation: title-wrapper-in 4s ease-in-out forwards + animation-delay: 5s + + svg + width: 70svw + + path + stroke-dasharray: 501 + stroke-dashoffset: 501 + animation: title-in 10s ease-out forwards + animation-delay: 2s + + + .subtitle + width: 100% + height: 20svh + display: flex + align-items: center + justify-content: center + background: linear-gradient(180deg, transparent 0%, $background 50%) + + h2 + font-family: $cursive + font-size: 4rem + font-weight: 300 + text-align: center + + +.poem + width: 100% + display: flex + flex-direction: column + align-items: center + justify-content: center + background: $background + font-family: $serif + + .poem-title + width: 100% + padding: 2rem + + h1 + font-size: 2rem + font-weight: 700 + h2 + font-size: 1.2rem + font-weight: 700 + + .poem-text + width: 100% + + .poem-slide + font-size: 1.4rem + font-weight: 400 + text-align: right + min-height: 50svh + + p + line-height: 2.5rem + padding: 1rem + + .poem-controls + width: 100% + height: 10svh + + display: flex + align-items: center + justify-content: center + + div + width: 50px + height: 50px + background: $orange + margin: 0 2rem + cursor: pointer + display: flex + align-items: center + justify-content: center + border-radius: 50% + box-shadow: -4px 4px 0px #000000 + + svg + height: 45% + +.memorial + width: 100% + background: $background + display: flex + flex-direction: column + align-items: center + justify-content: center + + + img + margin-top: 3rem + width: 90% + height: 90% + object-fit: cover + + .name + h1 + margin-top: 1rem + font-size: 2rem + font-weight: 400 + text-align: center + font-family: $serif + h2 + font-size: 1.2rem + text-align: center + font-weight: 300 + font-family: $cursive + +.footer + background: $background + width: 100% + display: flex + flex-direction: column + + p + width: 100% + text-align: left + margin-top: 3rem + font-family: $cursive + padding-left: 1rem + font-size: 1rem + + img + width: 100% \ No newline at end of file