Skip to content

Commit b077a74

Browse files
dev-shettydev-shetty
committed
Adds Session Graph - ICodeThis Challenge
1 parent 49d90f0 commit b077a74

File tree

3 files changed

+148
-4
lines changed

3 files changed

+148
-4
lines changed

‎README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# CSS Is Fun
22

3-
### Yes! You heard it right CSS is awesome.
3+
### Yes! You heard it right CSS is awesome.
44

55
That's great to hear! CSS is a powerful tool for designing and styling web pages this repository also contains UI snippets which are pre-built CSS code blocks that can be easily integrated into a website to add style and functionality.
66

@@ -41,9 +41,10 @@ To use these CSS animations and effects in your Local System , simply download o
4141
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="300"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
4242
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87" alt="Image Carousel II" width="400" height="300"> | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) |
4343
| Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/b4a4bc20-d43b-4bc0-b86d-ae89ae84ff42" alt="Color Wheel" width="400" height="400"> | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Color%20Wheel) |
44-
| Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | <img src="https://res.cloudinary.com/duwcigilo/image/upload/v1684336253/Loading_image_ig5hh7.jpg" alt="Loading Page" width="400" height="300"> | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Loading%20Page) |
45-
| Video Player | [Go Live](https://codepen.io/ahmedelmsery/pen/zYmmxNw) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/4fa44080-b6cf-4a5a-b0eb-53012b1e39a7" alt="Video Player" width="400" height="300"> | [Code - Video Player](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Video%20Player) |
46-
| Bar Chart | [Go Live](https://codepen.io/ahmedelmsery/pen/vYVQGLP) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/700f6a4f-b376-42cd-89fb-d40ace55acea" alt="Bar Chart" width="400" height="300"> | [Code - Bar Chart](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Chart/BarChart) |
44+
| Video Player | [Go Live](https://codepen.io/ahmedelmsery/pen/zYmmxNw) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/4fa44080-b6cf-4a5a-b0eb-53012b1e39a7" alt="Video Player" width="400" height="300"> | [Code - Video Player](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Video%20Player) |
45+
| Bar Chart | [Go Live](https://codepen.io/ahmedelmsery/pen/vYVQGLP) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/700f6a4f-b376-42cd-89fb-d40ace55acea" alt="Bar Chart" width="400" height="300"> | [Code - Bar Chart](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Chart/BarChart) |
46+
| Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | <img src="https://res.cloudinary.com/duwcigilo/image/upload/v1684336253/Loading_image_ig5hh7.jpg" alt="Loading Page" width="400" height="300"> | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun/Loading%20Page) |
47+
| Session Graph | [Go Live](https://codepen.io/ahmedelmsery/pen/qBQdZeJ) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/61b32539-f2d0-4c29-800f-03657d5af192" alt="Session Graph" width="400" height="300"> | [Code - Session Graph](https://github.com/Deveesh-Shetty/CSS-Is-Fun/Session%20Graph) |
4748

4849
<br>
4950

‎Session Graph/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+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css">
8+
<title>Session Graph</title>
9+
</head>
10+
<body>
11+
<div class="session-tab">
12+
<select name="activity" id="activity">
13+
<option value="last-7-days" selected>Last 7 Days</option>
14+
</select>
15+
<div class="pie-chart">
16+
<h2>Session by Device</p>
17+
<div data-title="desktop" data-value="49.4"></div>
18+
<div data-title="mobile" data-value="31.6"></div>
19+
<div data-title="desktop" data-value="19"></div>
20+
</div>
21+
<div class="data-label">
22+
<div>
23+
<div class="dot" data-clr="blue">Desktop</div>
24+
<p>49.4%</p>
25+
</div>
26+
<div>
27+
<div class="dot" data-clr="red">Mobile</div>
28+
<p>31.6%</p>
29+
</div><div>
30+
<div class="dot" data-clr="orange">Tablet</div>
31+
<p>19%</p>
32+
</div>
33+
</div>
34+
</div>
35+
</body>
36+
</html>

‎Session Graph/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--clr-1: #1f2432;
9+
--clr-2: #191e2c;
10+
--clr-3: #ddd;
11+
}
12+
13+
html {
14+
min-height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
body {
21+
background-color: var(--clr-1);
22+
color: var(--clr-3);
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
select {
29+
background-color: var(--clr-1);
30+
outline: none;
31+
color: var(--clr-3);
32+
border: none;
33+
padding: 0.5rem 1rem;
34+
width: 10rem;
35+
}
36+
37+
.session-tab {
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
justify-content: center;
42+
background-color: var(--clr-2);
43+
width: 25rem;
44+
border: 1px solid #334155;
45+
padding: 1rem;
46+
box-shadow: 0 0 0 8px var(--clr-2);
47+
}
48+
49+
.data-label {
50+
display: flex;
51+
width: 100%;
52+
padding-inline: 1rem;
53+
justify-content: space-between;
54+
}
55+
56+
.dot {
57+
position: relative;
58+
font-size: 0.85rem;
59+
}
60+
61+
.dot::before {
62+
content: "";
63+
position: absolute;
64+
left: -0.6rem;
65+
top: 50%;
66+
bottom: 0;
67+
width: 0.5rem;
68+
aspect-ratio: 1;
69+
border-radius: 50%;
70+
transform: translateY(-50%);
71+
}
72+
73+
.dot[data-clr="red"]::before {
74+
background-color: red;
75+
}
76+
.dot[data-clr="blue"]::before {
77+
background-color: blue;
78+
}
79+
.dot[data-clr="orange"]::before {
80+
background-color: orange;
81+
}
82+
83+
.pie-chart {
84+
width: 75%;
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
aspect-ratio: 1;
89+
margin-block: 1.5rem;
90+
position: relative;
91+
border-radius: 50%;
92+
background: conic-gradient(blue 0% 49.4%, red 49.4% 81%, orange 0);
93+
}
94+
95+
.pie-chart::after {
96+
content: "";
97+
position: absolute;
98+
inset: 1rem;
99+
border-radius: 50%;
100+
background-color: var(--clr-2);
101+
z-index: 5;
102+
}
103+
104+
.pie-chart > h2 {
105+
position: relative;
106+
z-index: 10;
107+
}

0 commit comments

Comments
 (0)