Skip to content

Commit f80428b

Browse files
sswietoniowskisswietoniowski
committed
feat: solve 3rd stage of the Hyperskill project "Open Space"
1 parent 00285e8 commit f80428b

File tree

3 files changed

+140
-0
lines changed

3 files changed

+140
-0
lines changed

‎hyperskill/06_open_space/03/.gitkeep

Whitespace-only changes.

‎hyperskill/06_open_space/03/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<div class="control-panel__inner">
16+
<input type="password" class="password-button" placeholder="Enter password to unlock">
17+
<input type="button" value="ok" class="ok-button">
18+
<div class="check-buttons">
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+
<input type="button" value=" ">
25+
</div>
26+
<div class="levers">
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+
<input type="range" orient="vertical" class="lever" min="0" max="100" value="50">
32+
</div>
33+
<input type="button" class="launch-button" value="Launch">
34+
</div>
35+
</div>
36+
</div>
37+
</body>
38+
</html>

‎hyperskill/06_open_space/03/style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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+
position: absolute;
34+
top: 50vh;
35+
right: 20vw;
36+
padding: 20px;
37+
background: repeating-linear-gradient(
38+
45deg,
39+
yellow,
40+
yellow 10px,
41+
black 10px,
42+
black 20px
43+
);
44+
}
45+
46+
.control-panel__inner {
47+
padding: 20px;
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: center;
51+
align-items: center;
52+
position: relative;
53+
background: black;
54+
}
55+
56+
.password-button {
57+
color: white;
58+
background: black;
59+
border: yellow 2px solid;
60+
border-radius: 5px;
61+
padding-right: 20px;
62+
}
63+
64+
.ok-button {
65+
color: black;
66+
background: yellow;
67+
border-radius: 5px;
68+
}
69+
70+
.check-buttons {
71+
display: flex;
72+
flex-direction: row;
73+
justify-content: center;
74+
align-items: center;
75+
margin-top: 20px;
76+
margin-bottom: 20px;
77+
}
78+
79+
.levers {
80+
display: flex;
81+
flex-direction: row;
82+
justify-content: center;
83+
align-items: center;
84+
width: auto;
85+
flex-wrap: wrap;
86+
}
87+
88+
input[type=range][orient=vertical] {
89+
appearance: slider-vertical;
90+
width: 8px;
91+
height: 64px;
92+
padding: 0 5px;
93+
}
94+
95+
.launch-button {
96+
color: white;
97+
background: red;
98+
border: white 2px solid;
99+
border-radius: 50%;
100+
padding: 20px;
101+
margin-top: 20px;
102+
}

0 commit comments

Comments
 (0)