Skip to content

Commit 8d61334

Browse files
solygambassolygambas
authored
add glass dashboard
1 parent 82c07ee commit 8d61334

File tree

7 files changed

+333
-0
lines changed

7 files changed

+333
-0
lines changed

Diff for: ‎55-glass dashboard/images/controller.png

6.67 KB
Loading

Diff for: ‎55-glass dashboard/images/library.png

1.39 KB
Loading

Diff for: ‎55-glass dashboard/images/steam.png

2.41 KB
Loading

Diff for: ‎55-glass dashboard/images/twitch.png

1.53 KB
Loading

Diff for: ‎55-glass dashboard/images/upcoming.png

1.97 KB
Loading

Diff for: ‎55-glass dashboard/index.html

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!-- Build Glass Website with HTML and CSS Tutorial by Simo Edwin - Dev Ed (2021)
2+
see: https://www.youtube.com/watch?v=O7WbVj5apxU -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<title>Glass Dashboard</title>
10+
<link rel="preconnect" href="https://fonts.gstatic.com" />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<link rel="stylesheet" href="./style.css" />
16+
</head>
17+
<body>
18+
<main class="content">
19+
<section class="container">
20+
<div class="dashboard">
21+
<div class="user">
22+
<img
23+
src="https://randomuser.me/api/portraits/women/44.jpg"
24+
alt=""
25+
/>
26+
<h3>Dagny Taggart</h3>
27+
<p>Pro Member</p>
28+
</div>
29+
<div class="links">
30+
<div class="link">
31+
<img src="./images/twitch.png" alt="" />
32+
<h2>Streams</h2>
33+
</div>
34+
<div class="link">
35+
<img src="./images/steam.png" alt="" />
36+
<h2>Games</h2>
37+
</div>
38+
<div class="link">
39+
<img src="./images/upcoming.png" alt="" />
40+
<h2>New</h2>
41+
</div>
42+
<div class="link">
43+
<img src="./images/library.png" alt="" />
44+
<h2>Library</h2>
45+
</div>
46+
</div>
47+
<div class="pro">
48+
<h2>Join pro for more games.</h2>
49+
<img src="./images/controller.png" alt="" />
50+
</div>
51+
</div>
52+
<div class="games">
53+
<div class="status">
54+
<h1>Active Games</h1>
55+
<input type="text" />
56+
</div>
57+
<div class="cards">
58+
<div class="card">
59+
<img src="https://source.unsplash.com/random/300x300" alt="" />
60+
<div class="card-info">
61+
<h2>Assassin's Creed Valhalla</h2>
62+
<p>PS5 Version</p>
63+
<div class="progress"></div>
64+
</div>
65+
<h2 class="percentage">60%</h2>
66+
</div>
67+
<div class="card">
68+
<img src="https://source.unsplash.com/random/301x301" alt="" />
69+
<div class="card-info">
70+
<h2>Sackboy: A Big Adventure</h2>
71+
<p>PS5 Version</p>
72+
<div class="progress"></div>
73+
</div>
74+
<h2 class="percentage">60%</h2>
75+
</div>
76+
<div class="card">
77+
<img src="https://source.unsplash.com/random/302x302" alt="" />
78+
<div class="card-info">
79+
<h2>Marvel's Spider-Man: Miles Morales</h2>
80+
<p>PS5 Version</p>
81+
<div class="progress"></div>
82+
</div>
83+
<h2 class="percentage">60%</h2>
84+
</div>
85+
</div>
86+
</div>
87+
</section>
88+
</main>
89+
<div class="circle1"></div>
90+
<div class="circle2"></div>
91+
</body>
92+
</html>

Diff for: ‎55-glass dashboard/style.css

+241
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
--main-bg-color: #65dfc9;
6+
--secondary-bg-color: #6cdbeb;
7+
}
8+
9+
.content {
10+
font-family: "Poppins", sans-serif;
11+
min-height: 100vh;
12+
background: var(--main-bg-color);
13+
background: linear-gradient(
14+
to right top,
15+
var(--main-bg-color),
16+
var(--secondary-bg-color)
17+
);
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
.container {
24+
background-color: white;
25+
background: linear-gradient(
26+
to right bottom,
27+
rgba(255, 255, 255, 0.7),
28+
rgba(255, 255, 255, 0.3)
29+
);
30+
min-height: 80vh;
31+
width: 100%;
32+
border-radius: 2rem;
33+
z-index: 2;
34+
backdrop-filter: blur(2rem);
35+
-webkit-backdrop-filter: blur(2rem);
36+
display: flex;
37+
}
38+
39+
.dashboard {
40+
flex: 1;
41+
display: flex;
42+
flex-direction: column;
43+
align-items: center;
44+
justify-content: flex-start;
45+
text-align: center;
46+
background: linear-gradient(
47+
to right bottom,
48+
rgba(255, 255, 255, 0.7),
49+
rgba(255, 255, 255, 0.3)
50+
);
51+
border-radius: 2rem;
52+
}
53+
.link {
54+
display: flex;
55+
padding: 1rem;
56+
margin: 2rem 0rem;
57+
align-items: center;
58+
}
59+
.user,
60+
.link h2,
61+
.pro,
62+
.progress {
63+
display: none;
64+
}
65+
66+
.games {
67+
flex: 3;
68+
margin: 1rem;
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: space-evenly;
72+
}
73+
74+
.status {
75+
margin-bottom: 1rem;
76+
}
77+
78+
.status input {
79+
background: linear-gradient(
80+
to right bottom,
81+
rgba(255, 255, 255, 0.7),
82+
rgba(255, 255, 255, 0.3)
83+
);
84+
border: none;
85+
width: 50%;
86+
padding: 0.5rem;
87+
border-radius: 2rem;
88+
}
89+
90+
.card {
91+
display: flex;
92+
flex-direction: column;
93+
background: linear-gradient(
94+
to left top,
95+
rgba(255, 255, 255, 0.8),
96+
rgba(255, 255, 255, 0.5)
97+
);
98+
border-radius: 1rem;
99+
margin: 2rem 0rem;
100+
padding: 2rem;
101+
box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
102+
justify-content: space-between;
103+
}
104+
.card img {
105+
width: 105px;
106+
height: 105px;
107+
border-radius: 1rem;
108+
}
109+
.card-info {
110+
display: flex;
111+
flex-direction: column;
112+
justify-content: space-between;
113+
}
114+
115+
.percentage {
116+
font-weight: bold;
117+
background: linear-gradient(
118+
to right top,
119+
var(--main-bg-color),
120+
var(--secondary-bg-color)
121+
);
122+
-webkit-background-clip: text;
123+
-webkit-text-fill-color: transparent;
124+
}
125+
126+
h1 {
127+
color: #426696;
128+
font-weight: 600;
129+
font-size: 2rem;
130+
opacity: 0.8;
131+
}
132+
h2,
133+
p {
134+
color: #658ec6;
135+
font-weight: 500;
136+
opacity: 0.8;
137+
}
138+
139+
h3 {
140+
color: #426696;
141+
font-weight: 600;
142+
opacity: 0.8;
143+
}
144+
145+
@media screen and (min-width: 1024px) {
146+
.container {
147+
width: 80%;
148+
}
149+
.circle1,
150+
.circle2 {
151+
background: white;
152+
background: linear-gradient(
153+
to right bottom,
154+
rgba(255, 255, 255, 0.8),
155+
rgba(255, 255, 255, 0.3)
156+
);
157+
height: 20rem;
158+
width: 20rem;
159+
position: absolute;
160+
border-radius: 50%;
161+
}
162+
.circle1 {
163+
top: 5%;
164+
right: 15%;
165+
}
166+
.circle2 {
167+
bottom: 5%;
168+
left: 25%;
169+
}
170+
.dashboard {
171+
justify-content: space-evenly;
172+
}
173+
.user {
174+
display: block;
175+
}
176+
.user img {
177+
border-radius: 50%;
178+
}
179+
.link {
180+
padding: 1rem 5rem;
181+
}
182+
.link h2 {
183+
display: block;
184+
padding: 0 2rem;
185+
}
186+
.pro {
187+
display: block;
188+
background: linear-gradient(
189+
to right top,
190+
var(--main-bg-color),
191+
var(--secondary-bg-color)
192+
);
193+
border-radius: 2rem;
194+
color: white;
195+
padding: 1rem;
196+
position: relative;
197+
}
198+
.pro img {
199+
position: absolute;
200+
top: -10%;
201+
right: 10%;
202+
}
203+
.pro h2 {
204+
width: 40%;
205+
color: white;
206+
font-weight: 600;
207+
}
208+
.games {
209+
margin: 5rem;
210+
}
211+
h1 {
212+
font-size: 3rem;
213+
}
214+
.status {
215+
margin-bottom: 3rem;
216+
}
217+
.card {
218+
flex-direction: row;
219+
}
220+
.progress {
221+
display: block;
222+
background: linear-gradient(
223+
to right top,
224+
var(--main-bg-color),
225+
var(--secondary-bg-color)
226+
);
227+
width: 100%;
228+
height: 25%;
229+
border-radius: 1rem;
230+
position: relative;
231+
overflow: hidden;
232+
}
233+
.progress::after {
234+
content: "";
235+
width: 100%;
236+
height: 100%;
237+
background: rgb(236, 236, 236);
238+
position: absolute;
239+
left: 60%;
240+
}
241+
}

0 commit comments

Comments
 (0)