Skip to content

Commit

Permalink
page-5
Browse files Browse the repository at this point in the history
  • Loading branch information
@jack-vo
jack-vo committed Jun 15, 2024
1 parent a095cd4 commit c7dd26f
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 36 deletions.
9 changes: 8 additions & 1 deletion blue-riding-hood/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,16 @@ body {
.container {
max-width: 1200px;
min-height: 700px;
margin: 50px auto;
margin: 20px auto;
}
.page {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 80px;
padding-bottom: 80px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
box-shadow: 0px -1px 49px -1px gray;
position: relative;
Expand Down
6 changes: 1 addition & 5 deletions blue-riding-hood/page-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blue riding hood</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link
Expand All @@ -12,11 +13,6 @@
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
.page-1 {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 80px;
padding-bottom: 80px;
gap: 100px;
}

Expand Down
6 changes: 1 addition & 5 deletions blue-riding-hood/page-2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta name="robots" content="noindex" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blue riding hood</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link
Expand All @@ -12,11 +13,6 @@
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
.page-2 {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 80px;
padding-bottom: 80px;
gap: 100px;
}

Expand Down
12 changes: 1 addition & 11 deletions blue-riding-hood/page-3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,6 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
.page-3 {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 80px;
padding-bottom: 80px;
}

.room {
position: relative;
}
Expand Down Expand Up @@ -74,9 +66,7 @@
position: absolute;
left: -300px;
bottom: 0;
animation-name: move-from-left;
animation-duration: 3s;
animation-fill-mode: forwards;
animation: move-from-left 3s forwards;
animation-delay: 2s;
}

Expand Down
143 changes: 129 additions & 14 deletions blue-riding-hood/page-5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,11 @@
.bomb-1 {
bottom: 130px;
left: 300px;
animation-name: bomb-1;
animation-duration: 3s;
animation: ani-bomb-1 3s forwards infinite;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}

@keyframes bomb-1 {
@keyframes ani-bomb-1 {
0% {
left: 300px;
}
Expand Down Expand Up @@ -73,14 +70,11 @@
.number-7 {
left: 350px;
bottom: 150px;
animation-name: number-7;
animation-duration: 4s;
animation: ani-number-7 4s forwards infinite;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}

@keyframes number-7 {
@keyframes ani-number-7 {
0% {
left: 350px;
bottom: 150px;
Expand All @@ -99,15 +93,122 @@
}
}

.number-5 {
text-decoration: none;
color: black;
left: 290px;
bottom: 200px;
animation: ani-number-5 3s forwards infinite;
animation-delay: 2s;
}

@keyframes ani-number-5 {
0% {
left: 300px;
bottom: 200px;
opacity: 1;
}
30% {
left: 500px;
bottom: 300px;
opacity: 0;
}
60% {
left: 700px;
bottom: 200px;
opacity: 0.5;
}
80% {
opacity: 0;
}
100% {
left: 300px;
bottom: 200px;
opacity: 1;
}
}

.bomb-2 {
bottom: 10px;
left: 200px;
opacity: 0;
animation: ani-bomb-2 6s forwards infinite;
animation-delay: 2s;
}

@keyframes ani-bomb-2 {
0% {
bottom: 100px;
left: 200px;
opacity: 0;
}
20% {
bottom: 300px;
left: 300px;
opacity: 1;
}
40% {
bottom: 100px;
left: 500px;
opacity: 0.2;
transform: scale(1.5);
}
60% {
bottom: 300px;
left: 800px;
opacity: 1;
transform: scale(1);
}
80% {
bottom: 100px;
left: 800px;
transform: scale(2);
}
100% {
transform: scale(1);
bottom: 100px;
left: 200px;
opacity: 1;
}
}

.number-3 {
left: 548px;
bottom: 232px;
animation: ani-number-3 3s forwards infinite;
animation-delay: 2s;
}

@keyframes ani-number-3 {
0% {
opacity: 1;
transform: scale(1);
}
25% {
opacity: 0;
transform: scale(2);
}
50% {
opacity: 1;
transform: scale(1);
}
75% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.blue-riding-hood-img {
width: 140px;
position: absolute;
z-index: 3;
left: 330px;
bottom: -250px;
animation-name: move-from-bottom;
animation-duration: 3s;
animation-fill-mode: forwards;
animation: move-from-bottom 3s forwards;
animation-delay: 2s;
}

Expand Down Expand Up @@ -138,11 +239,25 @@
<div>What should Blue Riding Hood press to open the door?</div>
</div>
<div class="door">
<a class="number number-7 lobster-regular">7</a>
<a
class="number number-7 lobster-regular"
onclick="alert('Oops, wrong answer! Try again!')"
>7</a
>
<a
class="number number-3 lobster-regular"
onclick="alert('Oops, wrong answer! Try again!')"
>3</a
>
<a class="number number-5 lobster-regular" href="page-6.html">5</a>
<a class="bomb bomb-1" href="bomb-explode-the-end.html">
<img
src="https://static.vecteezy.com/system/resources/thumbnails/021/125/685/small_2x/bomb-flat-icon-png.png" />
</a>
<a class="bomb bomb-2" href="bomb-explode-the-end.html">
<img
src="https://static.vecteezy.com/system/resources/thumbnails/021/125/685/small_2x/bomb-flat-icon-png.png" />
</a>
<img
class="door-img"
src="https://img.freepik.com/free-vector/abandoned-dungeon-medieval-castle-night-interior-with-moonlight-fall-wood-arched-door-barred-window-shadow-cracked-stone-wall-with-spiderweb-dilapidated-palace-cartoon-vector-illustration_107791-7764.jpg?t=st=1718321535~exp=1718325135~hmac=6521aff0ab463f98b2414c5859e708ae12e0eecb4ed1742f04cce9b99eeb7197&w=1380" />
Expand Down

0 comments on commit c7dd26f

Please sign in to comment.