From 8a61a8176b5575d2a397d24d979f79dd096a1ba8 Mon Sep 17 00:00:00 2001 From: JavierAmadorFrisa <111901472+JavierAmadorFrisa@users.noreply.github.com> Date: Sat, 23 Mar 2024 21:17:41 -0600 Subject: [PATCH 1/6] feat (index.html): Changes in labels --- LilL_Monsters_Site/css/style.css | 2 +- LilL_Monsters_Site/index.html | 6 +++--- LilL_Monsters_Site/js/script.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/LilL_Monsters_Site/css/style.css b/LilL_Monsters_Site/css/style.css index 9f8bb19..c1e4edf 100644 --- a/LilL_Monsters_Site/css/style.css +++ b/LilL_Monsters_Site/css/style.css @@ -70,7 +70,7 @@ html { .site-header .header-subtitle { animation: clear 1s 0.7s forwards; transform: translateY(10rem); - opacity: 0; + opacity: 0.30; } .site-header .header-cue { diff --git a/LilL_Monsters_Site/index.html b/LilL_Monsters_Site/index.html index 28a9ad4..87678e2 100644 --- a/LilL_Monsters_Site/index.html +++ b/LilL_Monsters_Site/index.html @@ -66,12 +66,12 @@

- Meet The Monsters + Meet The Monsters:)

With a wide range of backgrounds, skills, and personality, the LiL Monsters are a team to reckon with. There’s little they can’t achieve - when they put their monster minds together. + when they put their monster minds together. This is great!

@@ -85,7 +85,7 @@

src="images/monster01_tn.svg" alt="Monster Image 01" /> -

Mingle
+
Mingle!!!!
diff --git a/LilL_Monsters_Site/js/script.js b/LilL_Monsters_Site/js/script.js index e1cc6cb..21b2e6f 100644 --- a/LilL_Monsters_Site/js/script.js +++ b/LilL_Monsters_Site/js/script.js @@ -105,7 +105,7 @@ $(function () { new ScrollMagic.Scene({ triggerElement: '#types', triggerHook: 0, - duration: 300, + duration: 305, }) .setPin('#types') .setTween(typesTween) From 673ba45c3dc1f60e4d31c6f03076acbf7469148a Mon Sep 17 00:00:00 2001 From: JavierAmadorFrisa <111901472+JavierAmadorFrisa@users.noreply.github.com> Date: Sat, 23 Mar 2024 21:23:56 -0600 Subject: [PATCH 2/6] another change --- LilL_Monsters_Site/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LilL_Monsters_Site/index.html b/LilL_Monsters_Site/index.html index 87678e2..620387d 100644 --- a/LilL_Monsters_Site/index.html +++ b/LilL_Monsters_Site/index.html @@ -85,7 +85,7 @@

src="images/monster01_tn.svg" alt="Monster Image 01" /> -

Mingle!!!!
+
Mingle the Monster
From 9e0e45540b2fe2e1f38dda49fde8f4d1c753dcb6 Mon Sep 17 00:00:00 2001 From: JavierAmadorFrisa <111901472+JavierAmadorFrisa@users.noreply.github.com> Date: Sat, 23 Mar 2024 22:23:13 -0600 Subject: [PATCH 3/6] feat: broken code --- LilL_Monsters_Site/css/style.css | 137 ------------- LilL_Monsters_Site/index.html | 326 ------------------------------- 2 files changed, 463 deletions(-) diff --git a/LilL_Monsters_Site/css/style.css b/LilL_Monsters_Site/css/style.css index c1e4edf..e69de29 100644 --- a/LilL_Monsters_Site/css/style.css +++ b/LilL_Monsters_Site/css/style.css @@ -1,137 +0,0 @@ -html { - scroll-behavior: smooth !important; -} - -.site-nav { - z-index: 20; -} - -.site-nav.in-body { - background: rgb(99, 64, 145, 0.9); - animation: clear 1.25s forwards; - opacity: 0; -} - -.site-header { - position: relative; - height: 100vh; - background: linear-gradient(180deg, rgb(103, 66, 150), rgb(54, 28, 88)); - overflow: hidden; -} - -.site-header::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 5; - background-image: url(../images/hero.svg); - background-repeat: no-repeat; - background-size: cover; - background-position: bottom; - opacity: 0; - transform: translateY(300px) scale(1.2); - animation: clear 0.5s forwards; -} - -.site-nav .nav-link { - position: relative; - padding-bottom: 2px; -} - -.site-nav .nav-link::before { - content: ''; - position: absolute; - width: 100%; - max-width: 100px; - height: 38px; - bottom: 0; - left: 0; - background-color: rgba(266, 207, 31, 0); - transform: scaleX(0); - transition: all 0.5s cubic-bezier(0.03, 0.78, 0.4, 1.39); - opacity: 0; -} - -.site-nav .nav-link:hover::before { - background-color: rgba(266, 207, 31, 0.2); - transform: scaleX(1); - opacity: 1; -} - -.site-header .header-title { - animation: clear 0.8s 0.4s forwards; - transform: translateY(10rem); - opacity: 0; -} - -.site-header .header-subtitle { - animation: clear 1s 0.7s forwards; - transform: translateY(10rem); - opacity: 0.30; -} - -.site-header .header-cue { - position: absolute; - bottom: 0; - animation: clear 0.5s 1.5s forwards; - transform: translateY(2rem); - z-index: 10; - overflow: hidden; -} - -.site-header .header-cue-icon { - animation: slide-down 0.5s 1.8s forwards, pulse 2s 4s ease-in-out infinite; - transform: translateY(-2rem); - opacity: 1; -} - -.appear { - animation: clear 1s 0.5s forwards; - opacity: 0; - transform: scale(0.9); -} - -#friend { - z-index: 15; - overflow: hidden; -} - -@keyframes clear { - to { - opacity: 1; - transform: none; - } -} - -@keyframes slide-down { - from { - transform: translateY(-2rem); - opacity: 0; - } - - to { - transform: none; - opacity: 1; - } -} - -@keyframes pulse { - 0% { - opacity: 1; - transform: none; - transform: scale(1); - } - - 50% { - opacity: 0.5; - transform: scale(0.8); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} diff --git a/LilL_Monsters_Site/index.html b/LilL_Monsters_Site/index.html index 620387d..e69de29 100644 --- a/LilL_Monsters_Site/index.html +++ b/LilL_Monsters_Site/index.html @@ -1,326 +0,0 @@ - - - - - - - - - CSS: Scrolling & Parallax - - - - - -
-
-
-
-

- LiL Monsters -

-

- The LiL Monsters are a mighty crew of characters who are exuberant - about education.
The LiL Monsters are passionate about - sharing their love for learning, too! -

-
-
-
- -
-
-
- -
-
-

- Meet The Monsters:) -

-

- With a wide range of backgrounds, skills, and personality, the LiL - Monsters are a team to reckon with. There’s little they can’t achieve - when they put their monster minds together. This is great! -

-
- -
-
-
- Monster Image 01 -
Mingle the Monster
-
- -
- Monster Image 02 -
Yodel
-
- -
- Monster Image 03 -
Squido
-
- -
- Monster Image 04 -
Spook
-
- -
- Monster Image 05 -
Melville
-
- -
- Monster Image 06 -
Filo
-
- -
- Monster Image 07 -
Blade
-
- -
- Monster Image 08 -
Timber
-
- -
- Monster Image 09 -
Skedaddle
-
- -
- Monster Image 10 -
Smiley
-
- -
- Monster Image 11 -
Frex
-
- -
- Monster Image 12 -
Drift
-
-
-
-
- -
-
-
-
- Floater Image -
-
-

- You've Got a Friend -

-

- When you hang with monsters, you've got the best friends in the - world. Feeling down? They'll make your spirits soar. Stomach - rumbling? They'll whip you up a satisfying snack. Crave adventure? - They'll explore the world with you. You're one lucky individual! -

-
-
-
-
- -
-
-

- Monster Types -

-
-
-
-
- Icon 01 -

Horns

-

- Horns on monsters likely originated as a means for self-defense. - However, nowadays they're more commonly used for such routine - tasks as opening cans, digging in the garden,and flipping burgers - on the grill. -

-
-
- Icon 02 -

Tentacles

-

- Monsters with tentacles can mop the floor, cook dinner, and type a - winning proposal, all while sipping a steaming hot latte. Their - multitasking ability is a talent many aspire to, but most will - never achieve. -

-
-
- Icon 03 -

Periscope Eyes

-

- Periscope-eyed monsters can watch a football game in the family - room, while "keeping an eye" on what's simmering on the stove. - Many are also astute detectives who find satisfying work in law - enforcement. -

-
-
-
-
- -
-
-
-
-
- Photo Sample -
-

Boo!

-

Hire Spook, and her monster pals, to scare the pants off your family and friends any time of the year. Though - she has a heart of gold and would never hurt a living soul, she's full of mischief and loves to haunt. - After all, who doesn't love a good adrenaline rush?

-
-
-
-
-
- Photo Sample -
-

So sweet!

-

Satisfy your sweet tooth with a decadent dessert from Topsy Turvy Cake Design. Their monster bakers will - enliven your taste buds with award-winning creations including Upside Down/Inside Out cake and Hornets' - Nest muffins.

-
-
-
-
-
- Photo Sample -
-

Simply magical!

-

Bet you didn't know monsters are talented illusionists. They'll even conjure up a tantalizing 12-course meal - and wolf it down before your very eyes. And if you ask nicely, they'll happily share it with you. Just - don't expect it to be very filling.

-
-
-
-
-
- - - - - - - - - From 4c37fd1c4a9548e80b1d7ee8713e7ea9c8b8b405 Mon Sep 17 00:00:00 2001 From: JavierAmadorFrisa <111901472+JavierAmadorFrisa@users.noreply.github.com> Date: Sat, 23 Mar 2024 22:25:25 -0600 Subject: [PATCH 4/6] Revert "feat: broken code" This reverts commit 9e0e45540b2fe2e1f38dda49fde8f4d1c753dcb6. --- LilL_Monsters_Site/css/style.css | 137 +++++++++++++ LilL_Monsters_Site/index.html | 326 +++++++++++++++++++++++++++++++ 2 files changed, 463 insertions(+) diff --git a/LilL_Monsters_Site/css/style.css b/LilL_Monsters_Site/css/style.css index e69de29..c1e4edf 100644 --- a/LilL_Monsters_Site/css/style.css +++ b/LilL_Monsters_Site/css/style.css @@ -0,0 +1,137 @@ +html { + scroll-behavior: smooth !important; +} + +.site-nav { + z-index: 20; +} + +.site-nav.in-body { + background: rgb(99, 64, 145, 0.9); + animation: clear 1.25s forwards; + opacity: 0; +} + +.site-header { + position: relative; + height: 100vh; + background: linear-gradient(180deg, rgb(103, 66, 150), rgb(54, 28, 88)); + overflow: hidden; +} + +.site-header::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 5; + background-image: url(../images/hero.svg); + background-repeat: no-repeat; + background-size: cover; + background-position: bottom; + opacity: 0; + transform: translateY(300px) scale(1.2); + animation: clear 0.5s forwards; +} + +.site-nav .nav-link { + position: relative; + padding-bottom: 2px; +} + +.site-nav .nav-link::before { + content: ''; + position: absolute; + width: 100%; + max-width: 100px; + height: 38px; + bottom: 0; + left: 0; + background-color: rgba(266, 207, 31, 0); + transform: scaleX(0); + transition: all 0.5s cubic-bezier(0.03, 0.78, 0.4, 1.39); + opacity: 0; +} + +.site-nav .nav-link:hover::before { + background-color: rgba(266, 207, 31, 0.2); + transform: scaleX(1); + opacity: 1; +} + +.site-header .header-title { + animation: clear 0.8s 0.4s forwards; + transform: translateY(10rem); + opacity: 0; +} + +.site-header .header-subtitle { + animation: clear 1s 0.7s forwards; + transform: translateY(10rem); + opacity: 0.30; +} + +.site-header .header-cue { + position: absolute; + bottom: 0; + animation: clear 0.5s 1.5s forwards; + transform: translateY(2rem); + z-index: 10; + overflow: hidden; +} + +.site-header .header-cue-icon { + animation: slide-down 0.5s 1.8s forwards, pulse 2s 4s ease-in-out infinite; + transform: translateY(-2rem); + opacity: 1; +} + +.appear { + animation: clear 1s 0.5s forwards; + opacity: 0; + transform: scale(0.9); +} + +#friend { + z-index: 15; + overflow: hidden; +} + +@keyframes clear { + to { + opacity: 1; + transform: none; + } +} + +@keyframes slide-down { + from { + transform: translateY(-2rem); + opacity: 0; + } + + to { + transform: none; + opacity: 1; + } +} + +@keyframes pulse { + 0% { + opacity: 1; + transform: none; + transform: scale(1); + } + + 50% { + opacity: 0.5; + transform: scale(0.8); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} diff --git a/LilL_Monsters_Site/index.html b/LilL_Monsters_Site/index.html index e69de29..620387d 100644 --- a/LilL_Monsters_Site/index.html +++ b/LilL_Monsters_Site/index.html @@ -0,0 +1,326 @@ + + + + + + + + + CSS: Scrolling & Parallax + + + + + +
+
+
+
+

+ LiL Monsters +

+

+ The LiL Monsters are a mighty crew of characters who are exuberant + about education.
The LiL Monsters are passionate about + sharing their love for learning, too! +

+
+
+
+ +
+
+
+ +
+
+

+ Meet The Monsters:) +

+

+ With a wide range of backgrounds, skills, and personality, the LiL + Monsters are a team to reckon with. There’s little they can’t achieve + when they put their monster minds together. This is great! +

+
+ +
+
+
+ Monster Image 01 +
Mingle the Monster
+
+ +
+ Monster Image 02 +
Yodel
+
+ +
+ Monster Image 03 +
Squido
+
+ +
+ Monster Image 04 +
Spook
+
+ +
+ Monster Image 05 +
Melville
+
+ +
+ Monster Image 06 +
Filo
+
+ +
+ Monster Image 07 +
Blade
+
+ +
+ Monster Image 08 +
Timber
+
+ +
+ Monster Image 09 +
Skedaddle
+
+ +
+ Monster Image 10 +
Smiley
+
+ +
+ Monster Image 11 +
Frex
+
+ +
+ Monster Image 12 +
Drift
+
+
+
+
+ +
+
+
+
+ Floater Image +
+
+

+ You've Got a Friend +

+

+ When you hang with monsters, you've got the best friends in the + world. Feeling down? They'll make your spirits soar. Stomach + rumbling? They'll whip you up a satisfying snack. Crave adventure? + They'll explore the world with you. You're one lucky individual! +

+
+
+
+
+ +
+
+

+ Monster Types +

+
+
+
+
+ Icon 01 +

Horns

+

+ Horns on monsters likely originated as a means for self-defense. + However, nowadays they're more commonly used for such routine + tasks as opening cans, digging in the garden,and flipping burgers + on the grill. +

+
+
+ Icon 02 +

Tentacles

+

+ Monsters with tentacles can mop the floor, cook dinner, and type a + winning proposal, all while sipping a steaming hot latte. Their + multitasking ability is a talent many aspire to, but most will + never achieve. +

+
+
+ Icon 03 +

Periscope Eyes

+

+ Periscope-eyed monsters can watch a football game in the family + room, while "keeping an eye" on what's simmering on the stove. + Many are also astute detectives who find satisfying work in law + enforcement. +

+
+
+
+
+ +
+
+
+
+
+ Photo Sample +
+

Boo!

+

Hire Spook, and her monster pals, to scare the pants off your family and friends any time of the year. Though + she has a heart of gold and would never hurt a living soul, she's full of mischief and loves to haunt. + After all, who doesn't love a good adrenaline rush?

+
+
+
+
+
+ Photo Sample +
+

So sweet!

+

Satisfy your sweet tooth with a decadent dessert from Topsy Turvy Cake Design. Their monster bakers will + enliven your taste buds with award-winning creations including Upside Down/Inside Out cake and Hornets' + Nest muffins.

+
+
+
+
+
+ Photo Sample +
+

Simply magical!

+

Bet you didn't know monsters are talented illusionists. They'll even conjure up a tantalizing 12-course meal + and wolf it down before your very eyes. And if you ask nicely, they'll happily share it with you. Just + don't expect it to be very filling.

+
+
+
+
+
+ + + + + + + + + From 511754ae0e5d355530b16cba4e42124afa6ec1b0 Mon Sep 17 00:00:00 2001 From: JavierAmadorFrisa <111901472+JavierAmadorFrisa@users.noreply.github.com> Date: Sat, 23 Mar 2024 22:28:39 -0600 Subject: [PATCH 5/6] cambioss --- LilL_Monsters_Site/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LilL_Monsters_Site/index.html b/LilL_Monsters_Site/index.html index 620387d..4f6dedd 100644 --- a/LilL_Monsters_Site/index.html +++ b/LilL_Monsters_Site/index.html @@ -9,7 +9,7 @@ - CSS: Scrolling & Parallax + CSS: Scrolling & Parallax Cambios! From 418343d396ae25c00bd2907103dc3e86b776dbf7 Mon Sep 17 00:00:00 2001 From: JavierAmadorFrisa <111901472+JavierAmadorFrisa@users.noreply.github.com> Date: Sat, 23 Mar 2024 22:29:51 -0600 Subject: [PATCH 6/6] Buenos cambios --- LilL_Monsters_Site/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LilL_Monsters_Site/index.html b/LilL_Monsters_Site/index.html index 620387d..0955165 100644 --- a/LilL_Monsters_Site/index.html +++ b/LilL_Monsters_Site/index.html @@ -9,7 +9,7 @@ - CSS: Scrolling & Parallax + CSS: Scrolling & Parallax Esto!