-
Notifications
You must be signed in to change notification settings - Fork 14
/
19-position-planet.html
49 lines (40 loc) · 1.53 KB
/
19-position-planet.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
<!--
This webpage contains an image of a planet, an image of a creature, and a div with a greeting. Your job is to make it look
like the creature is sitting on the planet and saying the greeting.
In this first step, use absolute positioning to put the creature on top of the planet somewhere.
In the second step, position the greeting on top of the planet as well.
In the third setp, Now use a z-index property to make sure that the greeting always shows up over the creature, not behind.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Position planet</title>
<style>
#greeting {
background: rgb(255, 255, 0);
border: 2px solid black;
font-family: "Comic Sans MS", fantasy;
padding: 5px;
width: 262px;
position: absolute;
top:39px;
left:135px;
z-index:2;
}
#creature {
position:absolute;
top:64px;
left:49px;
z-index:1;
}
</style>
</head>
<body>
<img id="planet" src="https://www.kasandbox.org/programming-images/space/planet.png" width="300">
<div id="greeting">
<p>Hello! Welcome to position planet!</p>
</div>
<img id="creature" src="https://www.kasandbox.org/programming-images/avatars/mr-pink.png">
</body>
</html>