forked from w4rner/ninety-five
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
221 lines (205 loc) · 7.41 KB
/
index.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!-- Keyframes for smooth background color shifting. I read this pretty useful page to help me use keyframes animation https://stackoverflow.com/questions/24363205/css-background-color-keyframes-animation -->
<!-- I was inspired from this cool webpage to build the button below. Specifically the number 3 https://dev.to/webdeasy/top-20-css-buttons-animations-f41 -->
<!-- Sliding effect inspired from https://codepen.io/V17h3m/pen/gOJJKvB Great thanks to @V17h3m at Codepen for provifing this super-cool css code. However, I tried to modify and re-write the code as much as possible while ensuring I understand each line of code-->
<!-- Since I will not be in the class for the second week, I will try to explain the full code line-by-line in the end of my code-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage - Bart Simpson Skating</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: linear-gradient(145deg, rgba(255, 255, 220, 1), rgba(255, 255, 220, 0) 66%),
linear-gradient(220deg, rgba(30, 45, 70, 0.75), rgba(30, 45, 70, 0) 70%);
animation: bgChange 10s linear;
animation-fill-mode: forwards;
}
html::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, #707070 33%, #ffffff33 100%);
z-index: -1;
}
#skater {
top: 50%;
transform: translateY(-50%);
animation: skate 5s linear forwards;
width: 300px;
height: 450px;
position: absolute;
background: url('media/bart-main-page.png') no-repeat center center;
background-size: contain;
}
@keyframes skate {
0% {
left: -100%;
}
100% {
left: calc(100% - 300px);
}
}
@keyframes bgChange {
0% {
background-color: #ff9999;
}
25% {
background-color: #99ff99;
}
50% {
background-color: #9999ff;
}
75% {
background-color: #ffff99;
}
100% {
background-color: #ffff99;
}
}
.button-holder {
bottom: 20px;
left: 50%;
position: fixed;
transform: translateX(-50%);
z-index: 10;
}
.btn {
display: inline-block;
margin: 20px;
position: relative;
}
.btn a {
text-shadow: 0px 1px 0px #000;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
filter: dropshadow(color=#000, offx=0px, offy=1px);
box-shadow: inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
border-radius: 5px;
color: white;
display: block;
padding: 20px 40px;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 36px;
text-align: center;
text-decoration: none;
background-color: #FFA12B;
position: relative;
}
.btn a:active {
top: 10px;
background-color: #F78900;
box-shadow: inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}
.btn:after {
content: "";
height: 100%;
width: 100%;
padding: 4px;
position: absolute;
bottom: -15px;
left: -4px;
background-color: #2B1800;
border-radius: 5px;
z-index: -1;
}
.bg-text {
top: 5%;
left: 50%;
font-family: 'Comfortaa', cursive;
font-size: 8vw;
font-weight: 900;
color: white;
white-space: nowrap;
pointer-events: none;
position: absolute;
transform: translateX(-50%);
}
.speech-bubble {
position: absolute;
top: 35%;
left: -10%;
width: 180px;
padding: 15px;
background: linear-gradient(145deg, #fff, #f0f0f0);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: translateX(-50%);
opacity: 0;
animation: popUp 1s forwards 5s; /* 5s delay to sync skate animation */
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff transparent;
transform: translateX(-50%);
}
.speech-bubble p {
margin: 0;
font-family: 'Comfortaa', cursive;
font-size: 14px;
font-weight: 700;
color: #333;
text-align: center;
}
@keyframes popUp {
0% {
opacity: 0;
transform: translate(-50%, 20px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
</style>
</head>
<body>
<div class="bg-text">BART SIMPSON</div>
<div id="skater">
<div class="speech-bubble"><p>Hey there! Do you know me well enough?</p></div>
</div>
<div class="button-holder">
<div ontouchstart="">
<div class="btn">
<a href="menu.html">Learn More</a>
</div>
</div>
</div>
</body>
</html>
<!--
-All elements (*), including their ::before and ::after pseudo-elements, use border-box sizing, ensuring padding and border are included in the element's
total width and height.
-The html element covers the entir view-port height and hides overflow to prevent scrolling
-The background has been made up of two linear gradients which creates a leyered structure.
-Keyframe animation (bgChange) smoothly changes the background color over 10 seconds. I narrowed down the colot pallete as requested
-keyfrme animation (skate) moves the image horizontally from left to right side.When it arrives at the right side of the page, it stops moving and the background
color change stops and a speech bubble pops out. Stops at the right edge minus the width of the image
-When the button is active (clicked), it changes position and background color which kind of creates a pressed effect. The button is designed to create maximally
three dimensional effect
-A pseudo-element (::after) adds shadow beneath the button for augmented depth
-The BG text is styled with a large, bold font to stand out against the background and moving animations
-White text color and a slight opacity make the text readble
-The button leads to the menu.html file which also directs the users to other html files
-->