Skip to content

Commit 3e7dbff

Browse files
solygambassolygambas
committed
add health dashboard
1 parent 1aa9440 commit 3e7dbff

File tree

3 files changed

+156
-2
lines changed

3 files changed

+156
-2
lines changed

‎80-health dashboard/index.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!-- Based on CSS Grid Layout With Image Span by Brad Traversy (2020)
2+
see: https://www.youtube.com/watch?v=-qOe8lBAChE -->
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+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous"
14+
/>
15+
<link rel="stylesheet" href="style.css" />
16+
<title>Health Dashboard</title>
17+
</head>
18+
<body>
19+
<div class="container">
20+
<div class="bg1">
21+
<h2>16 <span>| 24</span></h2>
22+
<p>Goals Completed</p>
23+
</div>
24+
<div class="bg1">
25+
<h2><i class="fas fa-battery-three-quarters"></i></h2>
26+
<p>Respiration</p>
27+
</div>
28+
29+
<div class="bg2">
30+
<h2><i class="fas fa-running"></i></h2>
31+
<p>Miles</p>
32+
</div>
33+
<div class="bg1">
34+
<h2>37 &deg;C</h2>
35+
<p>Temperature</p>
36+
</div>
37+
<div class="bg1">
38+
<h2><i class="fas fa-bed"></i></h2>
39+
<p>Sleep Keep</p>
40+
</div>
41+
<div class="bg2">
42+
<h2>75 <span>bpm</span></h2>
43+
<p>Heart Rate</p>
44+
</div>
45+
<div class="bg1">
46+
<h2>170 <span>lbs</span></h2>
47+
<p>Weight</p>
48+
</div>
49+
<div class="bg1">
50+
<h2>24 <span>%</span></h2>
51+
<p>Fat Percentage</p>
52+
</div>
53+
<div class="bg2">
54+
<h2>90 <span>mgdl</span></h2>
55+
<p>Blood Glucose</p>
56+
</div>
57+
<div class="bg2">
58+
<h2>2080 <span>kcal</span></h2>
59+
<p>AVG Consumption</p>
60+
</div>
61+
<div class="bg2">
62+
<h2><i class="fas fa-dumbbell"></i></h2>
63+
<p>Workouts</p>
64+
</div>
65+
<div class="bg2">
66+
<h2>61 <span>%</span></h2>
67+
<p>Body Hydration</p>
68+
</div>
69+
</div>
70+
</body>
71+
</html>

‎80-health dashboard/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&display=swap");
2+
3+
:root {
4+
--main-color: #42515c;
5+
--text-color: #ecebf4;
6+
--dark-text-color: #293842;
7+
}
8+
9+
* {
10+
box-sizing: border-box;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body {
16+
background-color: var(--main-color);
17+
color: var(--text-color);
18+
font-family: "Nunito", sans-serif;
19+
min-height: 100vh;
20+
}
21+
22+
h2 {
23+
font-size: 2.75rem;
24+
font-weight: 300;
25+
margin: 0.625rem;
26+
}
27+
28+
h2 span {
29+
font-size: 2rem;
30+
}
31+
32+
p {
33+
font-size: 1.25rem;
34+
}
35+
36+
.container {
37+
display: grid;
38+
grid-template-columns: 1fr 1fr;
39+
gap: 10px;
40+
}
41+
42+
.container > div {
43+
cursor: pointer;
44+
height: 210px;
45+
background-size: cover;
46+
background-attachment: fixed;
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: center;
50+
align-items: center;
51+
text-align: center;
52+
transition: all 0.5s ease-out;
53+
}
54+
55+
.container > div:hover {
56+
opacity: 0.7;
57+
transform: scale(0.98);
58+
}
59+
60+
.bg1 {
61+
background-image: url("https://images.unsplash.com/photo-1599447333424-272c8fa5466f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
62+
text-shadow: 1px 1px 2px var(--main-color);
63+
}
64+
65+
.bg2 {
66+
background-image: url("https://images.unsplash.com/photo-1461468611824-46457c0e11fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
67+
color: var(--dark-text-color);
68+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
69+
}
70+
71+
.container > div:first-of-type,
72+
.container > div:nth-of-type(6),
73+
.container > div:nth-of-type(9),
74+
.container > div:nth-of-type(10) {
75+
grid-column: span 2;
76+
}
77+
78+
@media (min-width: 768px) {
79+
.container {
80+
grid-template-columns: repeat(4, 1fr);
81+
}
82+
}

‎README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# 70 Projects In 70 Days - HTML, CSS & JavaScript
1+
# 80 Projects In 80 Days - HTML, CSS & JavaScript
22

3-
70+ mini web projects using HTML, CSS and JavaScript.
3+
80+ mini web projects using HTML, CSS and JavaScript.
44

55
[See all projects on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at)
66

@@ -85,6 +85,7 @@
8585
| 77 | [Sortable List](https://github.com/solygambas/html-css-fifty-projects/tree/master/77-sortable%20list) | [Live Demo](https://codepen.io/solygambas/full/qBqzEdO) |
8686
| 78 | [Speak Number Guessing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/78-speak%20number%20guessing%20game) | [Live Demo](https://codepen.io/solygambas/full/jOVjEre) |
8787
| 79 | [Creative Agency Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/79-creative%20agency%20website) | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj) |
88+
| 80 | [Health Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/80-health%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz) |
8889

8990
This repository is mostly based on 2 courses by Brad Traversy (2020):
9091

0 commit comments

Comments
 (0)