Skip to content

Commit 00285e8

Browse files
sswietoniowskisswietoniowski
committed
feat: solve 2nd stage of the Hyperskill project "Open Space"
1 parent c517803 commit 00285e8

File tree

3 files changed

+114
-0
lines changed

3 files changed

+114
-0
lines changed

‎hyperskill/06_open_space/02/.gitkeep

Whitespace-only changes.

‎hyperskill/06_open_space/02/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Open Space</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="space">
10+
<div class="planet-area">
11+
<img class="planet" alt="" src="https://stepik.org/media/attachments/lesson/452681/mars.png"/>
12+
<img class="rocket" alt="" src="https://stepik.org/media/attachments/lesson/452681/rocket.png"/>
13+
</div>
14+
<div class="control-panel">
15+
<input type="text" placeholder="Enter password...">
16+
<input type="button" value="ok">
17+
<div class="check-buttons">
18+
<input type="button" value=" ">
19+
<input type="button" value=" ">
20+
<input type="button" value=" ">
21+
<input type="button" value=" ">
22+
<input type="button" value=" ">
23+
<input type="button" value=" ">
24+
</div>
25+
<div class="levers">
26+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
27+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
28+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
29+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
30+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
31+
</div>
32+
<input type="button" class="launch-button" value="launch">
33+
</div>
34+
</div>
35+
</body>
36+
</html>

‎hyperskill/06_open_space/02/style.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.space {
2+
position: relative;
3+
height: 100vh;
4+
width: 100vw;
5+
background: url("https://stepik.org/media/attachments/lesson/452681/space.png") repeat center center;
6+
z-index: 1;
7+
}
8+
9+
.planet-area {
10+
position: absolute;
11+
height: 30vmin;
12+
width: 30vmin;
13+
bottom: 0;
14+
left: 0;
15+
}
16+
17+
.planet {
18+
position: absolute;
19+
bottom: 0;
20+
left: 0;
21+
z-index: 3;
22+
}
23+
24+
.rocket {
25+
position: absolute;
26+
bottom: 110%;
27+
left: 110%;
28+
transform: rotate(35deg) scale(0.3);
29+
z-index: 2;
30+
}
31+
32+
.control-panel {
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: center;
36+
align-items: center;
37+
position: absolute;
38+
top: 60vh;
39+
right: 20vw;
40+
background: black;
41+
padding: 20px;
42+
}
43+
44+
.password {
45+
display: flex;
46+
flex-direction: row;
47+
justify-content: space-evenly;
48+
align-content: center;
49+
}
50+
51+
.check-buttons {
52+
display: flex;
53+
flex-direction: row;
54+
justify-content: center;
55+
align-items: center;
56+
margin-top: 20px;
57+
margin-bottom: 20px;
58+
}
59+
60+
.levers {
61+
display: flex;
62+
flex-direction: row;
63+
justify-content: center;
64+
align-items: center;
65+
width: auto;
66+
flex-wrap: wrap;
67+
}
68+
69+
input[type=range][orient=vertical] {
70+
appearance: slider-vertical;
71+
width: 8px;
72+
height: 64px;
73+
padding: 0 5px;
74+
}
75+
76+
.launch-button {
77+
background: red;
78+
}

0 commit comments

Comments
 (0)