-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.html
112 lines (97 loc) · 5.63 KB
/
intro.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bob's Origin Story</title>
<link rel="stylesheet" href="styles_intro.css">
<!-- Varela Round -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DynaPuff:[email protected]&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Fuzzy+Bubbles:wght@400;700&family=Rubik+Bubbles&family=Sniglet:wght@400;800&family=Varela+Round&display=swap" rel="stylesheet">
<!-- Montserrat -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poetsen+One&display=swap" rel="stylesheet">
<!-- Monofett -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Monofett&display=swap" rel="stylesheet">
<!-- DynaPuff -->
<link href="https://fonts.googleapis.com/css2?family=DynaPuff:[email protected]&family=Rubik+Bubbles&family=Sniglet:wght@400;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="storybook">
<input type="radio" name="page" id="page1" checked>
<input type="radio" name="page" id="page2">
<input type="radio" name="page" id="page3">
<input type="radio" name="page" id="page4">
<input type="radio" name="page" id="page5">
<input type="radio" name="page" id="page6">
<div class="pages">
<div class="page" id="content1">
<h1>meet bob!</h1>
<div class="Bob">
<img src="assets/blob_h1.png" alt="Bob" class="Bob">
</div>
<div class="text-box w_header">
<span style="font-size: x-large;">This is <strong>Bob</strong>.</span>
</div>
<label for="page2" class="next-button">→Let's Go!</label>
</div>
<div class="page" id="content2">
<h1>bob says hi!</h1>
<div class="Bob">
<img src="assets/blob_state_5.png" alt="Bob" class="Bob wiggle">
</div>
<div class="text-box w_header">
<span>Hello! My name is Bob (your friendly neighborhood Blob) and I love making friends!</span>
</div>
<label for="page3" class="next-button">→Hi Bob! Nice to meet you!</label>
</div>
<div class="page" id="content3">
<h1></h1>
<div class="Bob">
<img src="assets/blob_h3.png" alt="Bob" class="Bob bounce">
</div>
<div class="text-box">
<span>Nice to meet you too! I am on a mission to make new friends, and I’m currently on the lookout for for a buddy to join me on my next adventure to… <b>The Sea of Emotions!</b> What do you say?</span>
</div>
<label for="page4" class="next-button_2">→Sounds fun! Let’s go!</label>
<label for="page4" class="next-button">→Wait… what’s <strong>The Sea of Emotions?</strong></label>
</div>
<div class="page" id="content4">
<h1></h1>
<div class="Bob">
<img src="assets/blob_h3.png" alt="Bob" class="Bob bounce2" style="align-self: left;">
</div>
<img src="assets/treasure_map.png" alt="Treasure Map" class="treasure_map">
<div class="text-box">
<span>Sure thing! Here’s what you need to know: <br> <br> <strong> The Sea of Emotions </strong> is a magical realm made up of five Islands. Legend has it that each Island is the home to a special and unique <strong>Emotion.</strong> <br><br> Everytime we encounter a new Emotion, we have the opportunity to gain new <strong>experiences</strong>, a <strong>deeper understanding</strong>, and even a little <strong>gift</strong>! <br><br> <strong>My hope is to understand and become friends with each of the Emotions!</strong></span>
</div>
<label for="page5" class="next-button">→</label>
</div>
<div class="page" id="content5">
<h1></h1>
<div class="Bob">
<img src="assets/blob_h2.png" alt="Bob" class="Bob pulse">
</div>
<div class="text-box">
<span>Here’s where you come in: <br><br> In order to develop a strong friendship with each of the <strong>Emotions</strong>, I will need <strong>your help</strong> to complete important tasks and learn more about each of the Emotions. <br><br> <strong>Are you up for the challenge?</strong></span>
</div>
<label for="page6" class="next-button">→Of course!</label>
</div>
<div class="page" id="content6">
<h1></h1>
<div class="Bob">
<img src="assets/blob_h1.png" alt="Bob" class="Bob bounce">
</div>
<div class="text-box">
<span style="font-size: x-large;"><strong>Then we’re off!</strong></span>
</div>
<a href="map/index.html" class="start-button">→Start Journey!</a>
</div>
</div>
</div>
</body>
</html>