-
Notifications
You must be signed in to change notification settings - Fork 0
/
Project.html
147 lines (145 loc) · 3.55 KB
/
Project.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
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=>, initial-scale=1.0" />
<title>Humpback Whales</title>
<style>
h1 {
text-align: center;
color: #f9f5f0;
font-family: "Franklin Gothic Medium", Arial, sans-serif;
margin-bottom: 36px;
}
h2 {
text-align: center;
color: #f9f5f0;
border: 1px solid #00adb5;
border-radius: 4px;
margin: 10px;
padding: 18px;
font-size: 22px;
font-family: Arial, sans-serif;
}
img {
display: block;
margin: 0 auto;
max-width: 90%;
border-radius: 10px;
}
p {
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.75;
margin: 10px 0 15px;
}
button {
display: block;
margin: 27px auto;
margin-top: 3em;
margin-bottom: 3em;
border: none;
border-radius: 25px;
font-size: 18px;
padding: 16px 36px;
color: white;
background: #00adb5;
box-shadow: 1px 3px 15px rgba(0 0 0 / 0.36);
transition: all 200ms ease-in-out;
}
strong {
color: #00adb5;
}
em {
font-weight: 600;
color: #00adb5;
}
button:hover {
opacity: 0.7;
cursor: pointer;
}
.humpback-whales {
background-image: linear-gradient(
109.6deg,
rgb(120, 212, 234) 11.2%,
rgb(216, 226, 253) 72.1%
);
box-shadow: 3px 3px 30px rgba(0 0 0 / 0.1);
border-radius: 6px;
width: 40%;
margin: 20px auto;
padding: 20px;
}
.learn-more {
display: block;
color: #00adb5;
text-decoration: none;
font-size: 14px;
font-family: Arial, sans-serif;
}
.learn-more:hover {
text-decoration: underline;
}
.footer {
text-align: center;
margin-bottom: 0;
font-size: 14px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="humpback-whales">
<h1>Whales Are Pretty Cool🐳</h1>
<h2>Particularly Humpback Whales</h2>
<hr />
<img
src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/017/265/original/breaching-humpback-whale-768x512.jpg?1631821439"
alt="Humpback Whale"
/>
<hr />
<span class="info"
><p>
The <em>humpback whale</em> is a species of baleen whale. It is one of
the larger rorqual species, with adults ranging in length from 12–16 m
and weighing around 25–30 t. The humpback has a distinctive body
shape, with long pectoral fins and a knobbly head. <br /></p
></span>
<a
href="https://en.wikipedia.org/wiki/Humpback_whale"
target="_blank"
class="learn-more"
>
📖Learn More on Wikipedia
</a>
<button class="see-button">See Whales Today🐋</button>
<p class="footer">
This page was coded by <strong>Claudia Brown</strong>
</p>
</div>
<script>
function seeWhales() {
age = prompt("What is your age?");
return age >= 18;
}
function whales() {
let name = prompt("What is your name?");
let email = prompt("What is your email?");
if (seeWhales()) {
alert(
"Thank you " +
name +
"!" +
" We sent you an email! Set up your watch today🐳"
);
} else {
alert("Go ask your parents to set up a watch today!🐳");
}
}
let seeButton = document.querySelector(".see-button");
seeButton.addEventListener("click", whales);
</script>
</body>
</html>