├── logo.png ├── plus.png ├── mohit108.PNG ├── mohit2.PNG ├── podcast.jpg ├── profile.png ├── profile-1.jpg ├── profile-2.jpg ├── profile-3.jpg ├── profile-4.jpg ├── orders.js ├── index.js ├── README.md ├── script.js ├── index1.html ├── index.html ├── style.css └── style1.css /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/logo.png -------------------------------------------------------------------------------- /plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/plus.png -------------------------------------------------------------------------------- /mohit108.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/mohit108.PNG -------------------------------------------------------------------------------- /mohit2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/mohit2.PNG -------------------------------------------------------------------------------- /podcast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/podcast.jpg -------------------------------------------------------------------------------- /profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile.png -------------------------------------------------------------------------------- /profile-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-1.jpg -------------------------------------------------------------------------------- /profile-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-2.jpg -------------------------------------------------------------------------------- /profile-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-3.jpg -------------------------------------------------------------------------------- /profile-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohittiwari98/responsive-dashboard-and-user-dashboard/HEAD/profile-4.jpg -------------------------------------------------------------------------------- /orders.js: -------------------------------------------------------------------------------- 1 | const Orders = [ 2 | { 3 | productName: 'JavaScript Tutorial', 4 | productNumber: '85743', 5 | paymentStatus: 'Due', 6 | status: 'Pending' 7 | }, 8 | { 9 | productName: 'CSS Full Course', 10 | productNumber: '97245', 11 | paymentStatus: 'Refunded', 12 | status: 'Declined' 13 | }, 14 | { 15 | productName: 'Flex-Box Tutorial', 16 | productNumber: '36452', 17 | paymentStatus: 'Paid', 18 | status: 'Active' 19 | }, 20 | ] 21 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const sideMenu = document.querySelector('aside'); 2 | const menuBtn = document.getElementById('menu-btn'); 3 | const closeBtn = document.getElementById('close-btn'); 4 | 5 | const darkMode = document.querySelector('.dark-mode'); 6 | 7 | menuBtn.addEventListener('click', () => { 8 | sideMenu.style.display = 'block'; 9 | }); 10 | 11 | closeBtn.addEventListener('click', () => { 12 | sideMenu.style.display = 'none'; 13 | }); 14 | 15 | darkMode.addEventListener('click', () => { 16 | document.body.classList.toggle('dark-mode-variables'); 17 | darkMode.querySelector('span:nth-child(1)').classList.toggle('active'); 18 | darkMode.querySelector('span:nth-child(2)').classList.toggle('active'); 19 | }) 20 | 21 | 22 | Orders.forEach(order => { 23 | const tr = document.createElement('tr'); 24 | const trContent = ` 25 | ${order.productName} 26 | ${order.productNumber} 27 | ${order.paymentStatus} 28 | ${order.status} 29 | Details 30 | `; 31 | tr.innerHTML = trContent; 32 | document.querySelector('table tbody').appendChild(tr); 33 | }); 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # responsive-dashboard-and-user-dashboard 2 |
3 | DevOpsShack Banner 4 |
5 | 6 | ## Overview 7 | This project is a responsive user dashboard built using HTML, CSS, and JavaScript. The dashboard provides a clean and intuitive interface for users to view key metrics, manage tasks, or interact with data. It is designed to adapt seamlessly across various devices, including desktops, tablets, and mobile phones. 8 | 9 | ## Features 10 | 11 | - Responsive Design: Adapts to different screen sizes for optimal user experience. 12 | - Interactive Elements: Includes dynamic components such as toggles, modals, or charts powered by JavaScript. 13 | - Modern Styling: Utilizes CSS for a sleek, professional appearance with smooth transitions and hover effects. 14 | - Modular Structure: Organized codebase for easy customization and scalability. 15 | 16 |
17 | DevOpsShack Banner 18 |
19 | 20 | ### Tools and Modules 21 | ![](https://img.shields.io/badge/Programming_Language-HTML-orange.svg) 22 | ![](https://img.shields.io/badge/Programming_Language-CSS-blue.svg) 23 | ![](https://img.shields.io/badge/Programming_Language-JS-yellow.svg) 24 | ![](https://img.shields.io/badge/Application-visualization-lemon.svg) 25 | ![](https://img.shields.io/badge/Status-Complete-green.svg) 26 | ## Folder Structure 27 | ``` 28 | responsive-user-dashboard/ 29 | ├── assets/ 30 | │ ├── images/ # Image assets 31 | │ ├── css/ # CSS files (e.g., styles.css`) 32 | │ └── js/ # JavaScript files (e.g., script.js`) 33 | ├── index.html # Main HTML entry point 34 | └── README.md # Project documentation 35 | ``` 36 | 37 | 38 | ## Browser Compatibility 39 | The dashboard is compatible with modern browsers, including: 40 | - Google Chrome 41 | - Mozilla Firefox 42 | - Safari 43 | - Edge 44 | 45 | For older browsers, some features may require polyfills or fallback styles. 46 | 47 | 48 | 49 | ## License 50 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. 51 | 52 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const ctx = document.querySelector('.activity-chart'); 2 | const ctx2 = document.querySelector('.prog-chart'); 3 | 4 | new Chart(ctx, { 5 | type: 'bar', 6 | data: { 7 | labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 8 | datasets: [{ 9 | label: 'Time', 10 | data: [8, 6, 7, 6, 10, 8, 4], 11 | backgroundColor: '#1e293b', 12 | borderWidth: 3, 13 | borderRadius: 6, 14 | hoverBackgroundColor: '#60a5fa' 15 | }] 16 | }, 17 | options: { 18 | responsive: true, 19 | maintainAspectRatio: false, 20 | scales: { 21 | x: { 22 | border: { 23 | display: true 24 | }, 25 | grid: { 26 | display: true, 27 | color: '#1e293b' 28 | } 29 | }, 30 | y: { 31 | ticks: { 32 | display: false 33 | } 34 | } 35 | }, 36 | plugins: { 37 | legend: { 38 | display: false 39 | } 40 | }, 41 | animation: { 42 | duration: 1000, 43 | easing: 'easeInOutQuad', 44 | } 45 | } 46 | }); 47 | 48 | new Chart(ctx2, { 49 | type: 'line', 50 | data: { 51 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 52 | datasets: [{ 53 | label: 'Class GPA', 54 | data: [6, 10, 8, 14, 6, 7, 4], 55 | borderColor: '#0891b2', 56 | tension: 0.4 57 | }, 58 | { 59 | label: 'Aver GPA', 60 | data: [8, 6, 7, 6, 11, 8, 10], 61 | borderColor: '#ca8a04', 62 | tension: 0.4 63 | } 64 | ] 65 | }, 66 | options: { 67 | responsive: true, 68 | maintainAspectRatio: true, 69 | scales: { 70 | x: { 71 | grid: { 72 | display: false, 73 | } 74 | }, 75 | y: { 76 | ticks: { 77 | display: false 78 | }, 79 | border: { 80 | display: false, 81 | dash: [5, 5] 82 | } 83 | } 84 | }, 85 | plugins: { 86 | legend: { 87 | display: false 88 | } 89 | }, 90 | animation: { 91 | duration: 1000, 92 | easing: 'easeInOutQuad', 93 | } 94 | } 95 | }); 96 | -------------------------------------------------------------------------------- /index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Design | Mohit 10 | 11 | 12 | 13 | 14 |
15 | 16 | 46 | 47 |
48 |
49 |

Your courses

50 |

Weekly Activity

51 |
52 | 53 |
54 |
55 |
56 |
57 |
Data Analysis
58 |

- 3 lessons left

59 |

- 1 project left

60 |
61 | 62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
Machine Learn
71 |

- 2 assignments left

72 |

- 5 tutorials left

73 |
74 | 75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
Python
84 |

- 4 chapters left

85 |

- 8 quizzes left

86 |
87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | 107 |
108 |
109 |

learning Progress

110 |
111 | 1Y 112 | 6M 113 | 3M 114 |
115 |
116 | 117 |
118 |
119 |

3.45

120 |

Current GPA

121 |
122 |
123 |
124 |

4.78

125 |

Class Average GPA

126 |
127 |
128 | 129 | 130 | 131 |
132 | 133 | 157 | 158 | 159 |
160 | 161 |
162 |

You may like it

163 | July 164 |
165 | 166 |
167 |
168 |
Mo
169 | 12 170 |
171 |
172 |
Tu
173 | 13 174 |
175 |
176 |
We
177 | 14 178 |
179 |
180 |
Th
181 | 15 182 |
183 |
184 |
Fr
185 | 16 186 |
187 |
188 |
Sa
189 | 17 190 |
191 |
192 |
Su
193 | 18 194 |
195 |
196 | 197 |
198 |
199 |
200 | 201 |
202 | Data Science 203 |

10:00-11:30

204 |
205 |
206 | 207 |
208 |
209 |
210 | 211 |
212 | Machine Learning 213 |

13:30-15:00

214 |
215 |
216 | 217 |
218 |
219 |
220 | 221 |
222 | Beginner Python 223 |

11:30-13:00

224 |
225 |
226 | 227 |
228 |
229 |
230 | 231 |
232 | Introduction to SQL 233 |

10:00-11:30

234 |
235 |
236 | 237 |
238 |
239 | 240 |
241 | 242 |
243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Responsive-Design|Mohit 9 | 10 | 11 | 12 |
13 | 14 | 91 | 92 | 93 | 94 |
95 |

Analytics

96 | 97 |
98 |
99 |
100 |
101 |

Total Sale's

102 |

$5532

103 |
104 |
105 | 106 | 107 | 108 |
109 |

80%

110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |

Site Visit

118 |

2481

119 |
120 |
121 | 122 | 123 | 124 |
125 |

48%

126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |

Searches

134 |

1147

135 |
136 |
137 | 138 | 139 | 140 |
141 |

21%

142 |
143 |
144 |
145 |
146 |
147 | 148 | 149 | 150 |
151 |

New Users

152 |
153 |
154 | 155 |

Jack

156 |

53 Min Ago

157 |
158 |
159 | 160 |

Amir

161 |

3 Hours Ago

162 |
163 |
164 | 165 |

Ember

166 |

6 Hours Ago

167 |
168 |
169 | 170 |

More

171 |

New User

172 |
173 |
174 |
175 | 176 | 177 | 178 |
179 |

Recent Orders

180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 |
Course NameCourse NumberPaymentStatus
192 | Show All 193 |
194 | 195 | 196 |
197 | 198 | 199 | 200 |
201 | 227 | 228 | 229 | 236 | 237 |
238 |
239 |

Reminders

240 | 241 | notifications_none 242 | 243 |
244 | 245 |
246 |
247 | 248 | volume_up 249 | 250 |
251 |
252 |
253 |

Workshop

254 | 255 | 08:00 AM - 12:00 PM 256 | 257 |
258 | 259 | more_vert 260 | 261 |
262 |
263 | 264 |
265 |
266 | 267 | edit 268 | 269 |
270 |
271 |
272 |

Workshop

273 | 274 | 08:00 AM - 12:00 PM 275 | 276 |
277 | 278 | more_vert 279 | 280 |
281 |
282 | 283 |
284 |
285 | 286 | add 287 | 288 |

Add Reminder

289 |
290 |
291 | 292 |
293 | 294 |
295 | 296 | 297 |
298 | 299 | 300 | 301 | 302 | 303 | 304 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | a{ 11 | text-decoration: none; 12 | color: #f1f3f2; 13 | font-size: 14px; 14 | } 15 | 16 | canvas{ 17 | width: 100% !important; 18 | } 19 | 20 | img{ 21 | object-fit: cover; 22 | } 23 | 24 | body{ 25 | background: #f1f3f2; 26 | } 27 | 28 | .top-container{ 29 | background: #031224; 30 | border-radius: 0 0 30px 30px; 31 | padding-bottom: 10px; 32 | } 33 | 34 | .top-container .nav{ 35 | display: flex; 36 | align-items: center; 37 | justify-content: space-between; 38 | padding: 20px 20px 14px; 39 | border-bottom: 2px solid #1e293b; 40 | } 41 | 42 | .top-container .nav .logo{ 43 | display: flex; 44 | align-items: center; 45 | gap: 6px; 46 | } 47 | 48 | .top-container .nav .logo i{ 49 | color: #f1f3f2; 50 | font-size: 24px; 51 | } 52 | 53 | .top-container .nav .logo a{ 54 | font-size: 16px; 55 | } 56 | 57 | .top-container .nav .nav-links{ 58 | display: flex; 59 | gap: 20px; 60 | } 61 | 62 | .top-container .nav .nav-links a{ 63 | color: #ccc; 64 | transition: all 0.3s ease; 65 | } 66 | 67 | .top-container .nav .nav-links a:hover{ 68 | color: #fff; 69 | } 70 | 71 | .top-container .nav .right-section{ 72 | display: flex; 73 | align-items: center; 74 | gap: 10px; 75 | } 76 | 77 | .top-container .nav .right-section > i{ 78 | color: #f1f3f2; 79 | background: #1e293b; 80 | padding: 12px; 81 | border-radius: 50%; 82 | cursor: pointer; 83 | } 84 | 85 | .top-container .nav .right-section .profile{ 86 | display: flex; 87 | align-items: center; 88 | background: #1e293b; 89 | padding: 0 10px; 90 | border-radius: 50px; 91 | gap: 10px; 92 | } 93 | 94 | .top-container .nav .right-section .profile .info{ 95 | display: flex; 96 | align-items: center; 97 | gap: 10px; 98 | } 99 | 100 | .top-container .nav .right-section .profile .info img{ 101 | width: 32px; 102 | height: 32px; 103 | border-radius: 50%; 104 | border: 1px solid #f1f3f2; 105 | } 106 | 107 | .top-container .nav .right-section .profile .info a{ 108 | font-size: 13px; 109 | } 110 | 111 | .top-container .nav .right-section .profile .info p{ 112 | font-size: 13px; 113 | color: #ccc; 114 | } 115 | 116 | .top-container .nav .right-section .profile > i{ 117 | color: #f1f3f2; 118 | font-size: 22px; 119 | cursor: pointer; 120 | } 121 | 122 | .top-container .status{ 123 | padding: 20px 20px 10px; 124 | } 125 | 126 | .top-container .status .header{ 127 | display: flex; 128 | align-items: center; 129 | width: 100%; 130 | margin-bottom: 20px; 131 | } 132 | 133 | .top-container .status .header h4{ 134 | color: #f1f3f2; 135 | font-weight: 500; 136 | } 137 | 138 | .top-container .status .header h4#big{ 139 | flex: 3; 140 | } 141 | 142 | .top-container .status .header h4#small{ 143 | flex: 1; 144 | padding-left: 90px; 145 | } 146 | 147 | .top-container .status .items-list{ 148 | display: flex; 149 | align-items: center; 150 | gap: 14px; 151 | } 152 | 153 | .top-container .status .items-list .item{ 154 | background: #e0f2fe; 155 | width: 25%; 156 | padding: 20px; 157 | border-radius: 18px; 158 | } 159 | 160 | .top-container .status .items-list .item:nth-child(2){ 161 | background: #fffbeb; 162 | } 163 | 164 | .top-container .status .items-list .item:nth-child(3){ 165 | background: #bfdbfe; 166 | } 167 | 168 | .top-container .status .items-list .item:nth-child(4){ 169 | background: #031224; 170 | padding: 10px; 171 | } 172 | 173 | .top-container .status .items-list .item .info{ 174 | display: flex; 175 | align-items: flex-start; 176 | justify-content: space-between; 177 | margin-bottom: 40px; 178 | } 179 | 180 | .top-container .status .items-list .item .info h5{ 181 | font-size: 16px; 182 | font-weight: 600; 183 | margin-bottom: 10px; 184 | } 185 | 186 | .top-container .status .items-list .item .info p{ 187 | font-size: 12px; 188 | font-weight: 500; 189 | } 190 | 191 | .top-container .status .items-list .item .info > i{ 192 | font-size: 20px; 193 | padding: 10px; 194 | background: #031224; 195 | color: #f1f3f2; 196 | border-radius: 50%; 197 | } 198 | 199 | .top-container .status .items-list .item .progress{ 200 | position: relative; 201 | height: 10px; 202 | background: #b7c0cd; 203 | border-radius: 10px; 204 | } 205 | 206 | .top-container .status .items-list .item .progress .bar{ 207 | width: 92%; 208 | height: 10px; 209 | background: #031224; 210 | border-radius: 10px; 211 | } 212 | 213 | .top-container .status .items-list .item .progress::before{ 214 | content: "92%"; 215 | position: absolute; 216 | top: -40px; 217 | right: 0; 218 | font-size: 22px; 219 | font-weight: 600; 220 | } 221 | 222 | .top-container .status .items-list .item:nth-child(2) .progress{ 223 | background: #d6d3d1; 224 | } 225 | 226 | .top-container .status .items-list .item:nth-child(2) .progress .bar{ 227 | width: 65%; 228 | } 229 | 230 | .top-container .status .items-list .item:nth-child(2) .progress::before{ 231 | content: "65%"; 232 | } 233 | 234 | 235 | .top-container .status .items-list .item:nth-child(3) .progress{ 236 | background: #94a3b8; 237 | } 238 | 239 | .top-container .status .items-list .item:nth-child(3) .progress .bar{ 240 | width: 80%; 241 | } 242 | 243 | .top-container .status .items-list .item:nth-child(3) .progress::before{ 244 | content: "80%"; 245 | } 246 | 247 | .bottom-container{ 248 | display: flex; 249 | gap: 20px; 250 | padding: 30px; 251 | } 252 | 253 | .bottom-container .prog-status, 254 | .bottom-container .popular, 255 | .bottom-container .upcoming{ 256 | background: #fefefe; 257 | padding: 20px; 258 | border-radius: 24px; 259 | } 260 | 261 | .bottom-container .prog-status{ 262 | width: 50%; 263 | } 264 | 265 | .bottom-container .prog-status .header, 266 | .bottom-container .popular .header, 267 | .bottom-container .upcoming .header{ 268 | display: flex; 269 | align-items: center; 270 | justify-content: space-between; 271 | margin-bottom: 20px; 272 | } 273 | 274 | .bottom-container .prog-status .header h4, 275 | .bottom-container .popular .header h4, 276 | .bottom-container .upcoming .header h4{ 277 | font-weight: 600; 278 | } 279 | 280 | .bottom-container .prog-status .header .tabs{ 281 | background: #f3f3f3; 282 | padding: 4px; 283 | border-radius: 20px; 284 | display: flex; 285 | gap: 5px; 286 | } 287 | 288 | .bottom-container .prog-status .header .tabs a{ 289 | padding: 4px 20px; 290 | font-size: 12px; 291 | color: #000; 292 | border-radius: 20px; 293 | font-weight: 600; 294 | } 295 | 296 | .bottom-container .prog-status .header .tabs a.active{ 297 | background: #fff; 298 | } 299 | 300 | .bottom-container .prog-status .details{ 301 | display: flex; 302 | margin-bottom: 30px; 303 | gap: 20px; 304 | } 305 | 306 | .bottom-container .prog-status .details .item h2{ 307 | font-size: 30px; 308 | font-weight: 400; 309 | } 310 | 311 | .bottom-container .prog-status .details .item p{ 312 | font-size: 13px; 313 | color: #9b9b9b; 314 | } 315 | 316 | .bottom-container .prog-status .details .separator{ 317 | width: 2px; 318 | height: 70px; 319 | background: #f3f3f3; 320 | } 321 | 322 | .bottom-container .popular{ 323 | width: 25%; 324 | } 325 | 326 | .bottom-container .popular .header, 327 | .bottom-container .upcoming .header{ 328 | margin-bottom: 40px; 329 | } 330 | 331 | .bottom-container .popular .header a, 332 | .bottom-container .upcoming .header a{ 333 | font-size: 12px; 334 | color: #000; 335 | font-weight: 600; 336 | padding: 4px 8px; 337 | background: #f3f3f3; 338 | border-radius: 20px; 339 | } 340 | 341 | .bottom-container .popular > img{ 342 | width: 100%; 343 | aspect-ratio: 16/9; 344 | border-radius: 20px; 345 | margin-bottom: 20px; 346 | } 347 | 348 | .bottom-container .popular .audio{ 349 | display: flex; 350 | align-items: center; 351 | gap: 10px; 352 | margin-bottom: 20px; 353 | } 354 | 355 | .bottom-container .popular .audio i{ 356 | font-size: 26px; 357 | background: #eff6ff; 358 | padding: 6px; 359 | border-radius: 50%; 360 | } 361 | 362 | .bottom-container .popular .audio a{ 363 | font-size: 15px; 364 | font-weight: 600; 365 | color: #000; 366 | line-height: 18px; 367 | } 368 | 369 | .bottom-container .popular > p{ 370 | font-size: 14px; 371 | font-weight: 500; 372 | margin-bottom: 50px; 373 | } 374 | 375 | .bottom-container .popular .listen{ 376 | display: flex; 377 | align-items: center; 378 | justify-content: space-between; 379 | } 380 | 381 | .bottom-container .popular .listen .author{ 382 | padding: 6px 10px; 383 | background: #f3f3f3; 384 | display: flex; 385 | align-items: center; 386 | gap: 10px; 387 | border-radius: 10px; 388 | } 389 | 390 | .bottom-container .popular .listen .author img{ 391 | width: 40px; 392 | height: 40px; 393 | border-radius: 50%; 394 | } 395 | 396 | .bottom-container .popular .listen .author a{ 397 | font-size: 14px; 398 | color: #000; 399 | } 400 | 401 | .bottom-container .popular .listen .author p{ 402 | font-size: 12px; 403 | color: #9b9b9b; 404 | } 405 | 406 | .bottom-container .popular .listen button{ 407 | border: none; 408 | color: #fff; 409 | background: #031224; 410 | padding: 6px 14px; 411 | border-radius: 10px; 412 | display: flex; 413 | align-items: center; 414 | gap: 6px; 415 | cursor: pointer; 416 | } 417 | 418 | .bottom-container .popular .listen button i{ 419 | font-size: 16px; 420 | } 421 | 422 | .bottom-container .upcoming{ 423 | width: 25%; 424 | } 425 | 426 | .bottom-container .upcoming .dates{ 427 | display: flex; 428 | justify-content: space-between; 429 | margin-bottom: 40px; 430 | } 431 | 432 | .bottom-container .upcoming .dates .item{ 433 | display: flex; 434 | flex-direction: column; 435 | align-items: center; 436 | gap: 6px; 437 | } 438 | 439 | .bottom-container .upcoming .dates .item h5{ 440 | font-weight: 600; 441 | } 442 | 443 | .bottom-container .upcoming .dates .item a{ 444 | color: #000; 445 | font-size: 13px; 446 | padding: 5px 9px; 447 | border-radius: 50%; 448 | font-weight: 600; 449 | transition: all 0.3s ease; 450 | } 451 | 452 | .bottom-container .upcoming .dates .item.active a, 453 | .bottom-container .upcoming .dates .item a:hover{ 454 | color: #fff; 455 | background: #031224; 456 | } 457 | 458 | .bottom-container .upcoming .events{ 459 | display: flex; 460 | flex-direction: column; 461 | gap: 10px; 462 | } 463 | 464 | .bottom-container .upcoming .events .item{ 465 | display: flex; 466 | align-items: center; 467 | justify-content: space-between; 468 | background: #eff6ff; 469 | padding: 10px; 470 | border-radius: 10px; 471 | } 472 | 473 | .bottom-container .upcoming .events .item > i{ 474 | cursor: pointer; 475 | } 476 | 477 | .bottom-container .upcoming .events .item > div{ 478 | display: flex; 479 | align-items: center; 480 | gap: 10px; 481 | } 482 | 483 | .bottom-container .upcoming .events .item > div i{ 484 | font-size: 30px; 485 | } 486 | 487 | .bottom-container .upcoming .events .item .event-info a{ 488 | font-size: 14px; 489 | color: #000; 490 | font-weight: 500; 491 | } 492 | 493 | .bottom-container .upcoming .events .item .event-info p{ 494 | font-size: 13px; 495 | color: #9b9b9b; 496 | } 497 | 498 | @media screen and (max-width: 1300px) { 499 | 500 | .bottom-container .popular .audio a{ 501 | margin-bottom: 20px; 502 | font-size: 12px; 503 | } 504 | 505 | .bottom-container .popular > p{ 506 | margin-bottom: 20px; 507 | font-size: 12px; 508 | } 509 | 510 | .bottom-container .popular .listen{ 511 | flex-direction: column; 512 | gap: 10px; 513 | } 514 | 515 | .bottom-container .popular .listen .author{ 516 | width: 100%; 517 | } 518 | 519 | .bottom-container .popular .listen button{ 520 | width: 100%; 521 | justify-content: center; 522 | } 523 | 524 | .bottom-container .upcoming .events .item{ 525 | padding: 6px 10px; 526 | } 527 | 528 | .bottom-container .upcoming .events .item > div i{ 529 | font-size: 20px; 530 | } 531 | 532 | .bottom-container .upcoming .events .item .event-info a{ 533 | font-size: 13px; 534 | } 535 | 536 | .bottom-container .upcoming .events .item .event-info p{ 537 | font-size: 12px; 538 | } 539 | 540 | } 541 | 542 | @media screen and (max-width: 1080px) { 543 | 544 | .top-container .nav .right-section .profile{ 545 | padding: 5px; 546 | } 547 | 548 | .top-container .nav .right-section .profile .info p, 549 | .top-container .status .header h4#small{ 550 | display: none; 551 | } 552 | 553 | .top-container .status .items-list{ 554 | flex-wrap: wrap; 555 | } 556 | 557 | .top-container .status .items-list .item{ 558 | width: 48%; 559 | } 560 | 561 | .bottom-container{ 562 | flex-wrap: wrap; 563 | } 564 | 565 | .bottom-container .prog-status{ 566 | width: 100%; 567 | } 568 | 569 | .bottom-container .popular, 570 | .bottom-container .upcoming{ 571 | width: 48%; 572 | } 573 | 574 | .bottom-container .popular .audio a{ 575 | font-size: 15px; 576 | } 577 | 578 | .bottom-container .popular > p{ 579 | font-size: 14px; 580 | margin-bottom: 40px; 581 | } 582 | 583 | .bottom-container .popular .listen{ 584 | flex-direction: row; 585 | } 586 | 587 | .bottom-container .popular .listen button{ 588 | width: 50%; 589 | } 590 | 591 | .bottom-container .upcoming .events .item{ 592 | padding: 10px; 593 | } 594 | 595 | .bottom-container .upcoming .events .item > div i{ 596 | font-size: 30px; 597 | } 598 | 599 | .bottom-container .upcoming .events .item .event-info a{ 600 | font-size: 14px; 601 | } 602 | 603 | } 604 | 605 | @media screen and (max-width: 768px) { 606 | 607 | .top-container .nav{ 608 | flex-direction: column; 609 | gap: 15px; 610 | } 611 | 612 | .top-container .status .items-list .item .info h5{ 613 | font-size: 15px; 614 | } 615 | 616 | .bottom-container .popular, 617 | .bottom-container .upcoming{ 618 | width: 100%; 619 | } 620 | 621 | } 622 | -------------------------------------------------------------------------------- /style1.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); 2 | 3 | :root{ 4 | --color-primary: #6C9BCF; 5 | --color-danger: #FF0060; 6 | --color-success: #1B9C85; 7 | --color-warning: #F7D060; 8 | --color-white: #fff; 9 | --color-info-dark: #7d8da1; 10 | --color-dark: #363949; 11 | --color-light: rgba(132, 139, 200, 0.18); 12 | --color-dark-variant: #677483; 13 | --color-background: #f6f6f9; 14 | 15 | --card-border-radius: 2rem; 16 | --border-radius-1: 0.4rem; 17 | --border-radius-2: 1.2rem; 18 | 19 | --card-padding: 1.8rem; 20 | --padding-1: 1.2rem; 21 | 22 | --box-shadow: 0 2rem 3rem var(--color-light); 23 | } 24 | 25 | .dark-mode-variables{ 26 | --color-background: #181a1e; 27 | --color-white: #202528; 28 | --color-dark: #edeffd; 29 | --color-dark-variant: #a3bdcc; 30 | --color-light: rgba(0, 0, 0, 0.4); 31 | --box-shadow: 0 2rem 3rem var(--color-light); 32 | } 33 | 34 | *{ 35 | margin: 0; 36 | padding: 0; 37 | outline: 0; 38 | appearance: 0; 39 | border: 0; 40 | text-decoration: none; 41 | box-sizing: border-box; 42 | } 43 | 44 | html{ 45 | font-size: 14px; 46 | } 47 | 48 | body{ 49 | width: 100vw; 50 | height: 100vh; 51 | font-family: 'Poppins', sans-serif; 52 | font-size: 0.88rem; 53 | user-select: none; 54 | overflow-x: hidden; 55 | color: var(--color-dark); 56 | background-color: var(--color-background); 57 | } 58 | 59 | a{ 60 | color: var(--color-dark); 61 | } 62 | 63 | img{ 64 | display: block; 65 | width: 100%; 66 | object-fit: cover; 67 | } 68 | 69 | h1{ 70 | font-weight: 800; 71 | font-size: 1.8rem; 72 | } 73 | 74 | h2{ 75 | font-weight: 600; 76 | font-size: 1.4rem; 77 | } 78 | 79 | h3{ 80 | font-weight: 500; 81 | font-size: 0.87rem; 82 | } 83 | 84 | small{ 85 | font-size: 0.76rem; 86 | } 87 | 88 | p{ 89 | color: var(--color-dark-variant); 90 | } 91 | 92 | b{ 93 | color: var(--color-dark); 94 | } 95 | 96 | .text-muted{ 97 | color: var(--color-info-dark); 98 | } 99 | 100 | .primary{ 101 | color: var(--color-primary); 102 | } 103 | 104 | .danger{ 105 | color: var(--color-danger); 106 | } 107 | 108 | .success{ 109 | color: var(--color-success); 110 | } 111 | 112 | .warning{ 113 | color: var(--color-warning); 114 | } 115 | 116 | .container{ 117 | display: grid; 118 | width: 96%; 119 | margin: 0 auto; 120 | gap: 1.8rem; 121 | grid-template-columns: 12rem auto 23rem; 122 | } 123 | 124 | aside{ 125 | height: 100vh; 126 | } 127 | 128 | aside .toggle{ 129 | display: flex; 130 | align-items: center; 131 | justify-content: space-between; 132 | margin-top: 1.4rem; 133 | } 134 | 135 | aside .toggle .logo{ 136 | display: flex; 137 | gap: 0.5rem; 138 | } 139 | 140 | aside .toggle .logo img{ 141 | width: 2rem; 142 | height: 2rem; 143 | } 144 | 145 | aside .toggle .close{ 146 | padding-right: 1rem; 147 | display: none; 148 | } 149 | 150 | aside .sidebar{ 151 | display: flex; 152 | flex-direction: column; 153 | background-color: var(--color-white); 154 | box-shadow: var(--box-shadow); 155 | border-radius: 15px; 156 | height: 88vh; 157 | position: relative; 158 | top: 1.5rem; 159 | transition: all 0.3s ease; 160 | } 161 | 162 | aside .sidebar:hover{ 163 | box-shadow: none; 164 | } 165 | 166 | aside .sidebar a{ 167 | display: flex; 168 | align-items: center; 169 | color: var(--color-info-dark); 170 | height: 3.7rem; 171 | gap: 1rem; 172 | position: relative; 173 | margin-left: 2rem; 174 | transition: all 0.3s ease; 175 | } 176 | 177 | aside .sidebar a span{ 178 | font-size: 1.6rem; 179 | transition: all 0.3s ease; 180 | } 181 | 182 | aside .sidebar a:last-child{ 183 | position: absolute; 184 | bottom: 2rem; 185 | width: 100%; 186 | } 187 | 188 | aside .sidebar a.active{ 189 | width: 100%; 190 | color: var(--color-primary); 191 | background-color: var(--color-light); 192 | margin-left: 0; 193 | } 194 | 195 | aside .sidebar a.active::before{ 196 | content: ''; 197 | width: 6px; 198 | height: 18px; 199 | background-color: var(--color-primary); 200 | } 201 | 202 | aside .sidebar a.active span{ 203 | color: var(--color-primary); 204 | margin-left: calc(1rem - 3px); 205 | } 206 | 207 | aside .sidebar a:hover{ 208 | color: var(--color-primary); 209 | } 210 | 211 | aside .sidebar a:hover span{ 212 | margin-left: 0.6rem; 213 | } 214 | 215 | aside .sidebar .message-count{ 216 | background-color: var(--color-danger); 217 | padding: 2px 6px; 218 | color: var(--color-white); 219 | font-size: 11px; 220 | border-radius: var(--border-radius-1); 221 | } 222 | 223 | main{ 224 | margin-top: 1.4rem; 225 | } 226 | 227 | main .analyse{ 228 | display: grid; 229 | grid-template-columns: repeat(3, 1fr); 230 | gap: 1.6rem; 231 | } 232 | 233 | main .analyse > div{ 234 | background-color: var(--color-white); 235 | padding: var(--card-padding); 236 | border-radius: var(--card-border-radius); 237 | margin-top: 1rem; 238 | box-shadow: var(--box-shadow); 239 | cursor: pointer; 240 | transition: all 0.3s ease; 241 | } 242 | 243 | main .analyse > div:hover{ 244 | box-shadow: none; 245 | } 246 | 247 | main .analyse > div .status{ 248 | display: flex; 249 | align-items: center; 250 | justify-content: space-between; 251 | } 252 | 253 | main .analyse h3{ 254 | margin-left: 0.6rem; 255 | font-size: 1rem; 256 | } 257 | 258 | main .analyse .progresss{ 259 | position: relative; 260 | width: 92px; 261 | height: 92px; 262 | border-radius: 50%; 263 | } 264 | 265 | main .analyse svg{ 266 | width: 7rem; 267 | height: 7rem; 268 | } 269 | 270 | main .analyse svg circle{ 271 | fill: none; 272 | stroke-width: 10; 273 | stroke-linecap: round; 274 | transform: translate(5px, 5px); 275 | } 276 | 277 | main .analyse .sales svg circle{ 278 | stroke: var(--color-success); 279 | stroke-dashoffset: -30; 280 | stroke-dasharray: 200; 281 | } 282 | 283 | main .analyse .visits svg circle{ 284 | stroke: var(--color-danger); 285 | stroke-dashoffset: -30; 286 | stroke-dasharray: 200; 287 | } 288 | 289 | main .analyse .searches svg circle{ 290 | stroke: var(--color-primary); 291 | stroke-dashoffset: -30; 292 | stroke-dasharray: 200; 293 | } 294 | 295 | main .analyse .progresss .percentage{ 296 | position: absolute; 297 | top: -3px; 298 | left: -1px; 299 | display: flex; 300 | align-items: center; 301 | justify-content: center; 302 | height: 100%; 303 | width: 100%; 304 | } 305 | 306 | main .new-users{ 307 | margin-top: 1.3rem; 308 | } 309 | 310 | main .new-users .user-list{ 311 | background-color: var(--color-white); 312 | padding: var(--card-padding); 313 | border-radius: var(--card-border-radius); 314 | margin-top: 1rem; 315 | box-shadow: var(--box-shadow); 316 | display: flex; 317 | justify-content: space-around; 318 | flex-wrap: wrap; 319 | gap: 1.4rem; 320 | cursor: pointer; 321 | transition: all 0.3s ease; 322 | } 323 | 324 | main .new-users .user-list:hover{ 325 | box-shadow: none; 326 | } 327 | 328 | main .new-users .user-list .user{ 329 | display: flex; 330 | flex-direction: column; 331 | align-items: center; 332 | justify-content: center; 333 | } 334 | 335 | main .new-users .user-list .user img{ 336 | width: 5rem; 337 | height: 5rem; 338 | margin-bottom: 0.4rem; 339 | border-radius: 50%; 340 | } 341 | 342 | main .recent-orders{ 343 | margin-top: 1.3rem; 344 | } 345 | 346 | main .recent-orders h2{ 347 | margin-bottom: 0.8rem; 348 | } 349 | 350 | main .recent-orders table{ 351 | background-color: var(--color-white); 352 | width: 100%; 353 | padding: var(--card-padding); 354 | text-align: center; 355 | box-shadow: var(--box-shadow); 356 | border-radius: var(--card-border-radius); 357 | transition: all 0.3s ease; 358 | } 359 | 360 | main .recent-orders table:hover{ 361 | box-shadow: none; 362 | } 363 | 364 | main table tbody td{ 365 | height: 2.8rem; 366 | border-bottom: 1px solid var(--color-light); 367 | color: var(--color-dark-variant); 368 | } 369 | 370 | main table tbody tr:last-child td{ 371 | border: none; 372 | } 373 | 374 | main .recent-orders a{ 375 | text-align: center; 376 | display: block; 377 | margin: 1rem auto; 378 | color: var(--color-primary); 379 | } 380 | 381 | .right-section{ 382 | margin-top: 1.4rem; 383 | } 384 | 385 | .right-section .nav{ 386 | display: flex; 387 | justify-content: end; 388 | gap: 2rem; 389 | } 390 | 391 | .right-section .nav button{ 392 | display: none; 393 | } 394 | 395 | .right-section .dark-mode{ 396 | background-color: var(--color-light); 397 | display: flex; 398 | justify-content: space-between; 399 | align-items: center; 400 | height: 1.6rem; 401 | width: 4.2rem; 402 | cursor: pointer; 403 | border-radius: var(--border-radius-1); 404 | } 405 | 406 | .right-section .dark-mode span{ 407 | font-size: 1.2rem; 408 | width: 50%; 409 | height: 100%; 410 | display: flex; 411 | align-items: center; 412 | justify-content: center; 413 | } 414 | 415 | .right-section .dark-mode span.active{ 416 | background-color: var(--color-primary); 417 | color: white; 418 | border-radius: var(--border-radius-1); 419 | } 420 | 421 | .right-section .nav .profile{ 422 | display: flex; 423 | gap: 2rem; 424 | text-align: right; 425 | } 426 | 427 | .right-section .nav .profile .profile-photo{ 428 | width: 2.8rem; 429 | height: 2.8rem; 430 | border-radius: 50%; 431 | overflow: hidden; 432 | } 433 | 434 | .right-section .user-profile{ 435 | display: flex; 436 | justify-content: center; 437 | text-align: center; 438 | margin-top: 1rem; 439 | background-color: var(--color-white); 440 | padding: var(--card-padding); 441 | border-radius: var(--card-border-radius); 442 | box-shadow: var(--box-shadow); 443 | cursor: pointer; 444 | transition: all 0.3s ease; 445 | } 446 | 447 | .right-section .user-profile:hover{ 448 | box-shadow: none; 449 | } 450 | 451 | .right-section .user-profile img{ 452 | width: 11rem; 453 | height: auto; 454 | margin-bottom: 0.8rem; 455 | border-radius: 50%; 456 | } 457 | 458 | .right-section .user-profile h2{ 459 | margin-bottom: 0.2rem; 460 | } 461 | 462 | .right-section .reminders{ 463 | margin-top: 2rem; 464 | } 465 | 466 | .right-section .reminders .header{ 467 | display: flex; 468 | align-items: center; 469 | justify-content: space-between; 470 | margin-bottom: 0.8rem; 471 | } 472 | 473 | .right-section .reminders .header span{ 474 | padding: 10px; 475 | box-shadow: var(--box-shadow); 476 | background-color: var(--color-white); 477 | border-radius: 50%; 478 | } 479 | 480 | .right-section .reminders .notification{ 481 | background-color: var(--color-white); 482 | display: flex; 483 | align-items: center; 484 | gap: 1rem; 485 | margin-bottom: 0.7rem; 486 | padding: 1.4rem var(--card-padding); 487 | border-radius: var(--border-radius-2); 488 | box-shadow: var(--box-shadow); 489 | cursor: pointer; 490 | transition: all 0.3s ease; 491 | } 492 | 493 | .right-section .reminders .notification:hover{ 494 | box-shadow: none; 495 | } 496 | 497 | .right-section .reminders .notification .content{ 498 | display: flex; 499 | justify-content: space-between; 500 | align-items: center; 501 | margin: 0; 502 | width: 100%; 503 | } 504 | 505 | .right-section .reminders .notification .icon{ 506 | padding: 0.6rem; 507 | color: var(--color-white); 508 | background-color: var(--color-success); 509 | border-radius: 20%; 510 | display: flex; 511 | } 512 | 513 | .right-section .reminders .notification.deactive .icon{ 514 | background-color: var(--color-danger); 515 | } 516 | 517 | .right-section .reminders .add-reminder{ 518 | background-color: var(--color-white); 519 | border: 2px dashed var(--color-primary); 520 | color: var(--color-primary); 521 | display: flex; 522 | align-items: center; 523 | justify-content: center; 524 | cursor: pointer; 525 | } 526 | 527 | .right-section .reminders .add-reminder:hover{ 528 | background-color: var(--color-primary); 529 | color: white; 530 | } 531 | 532 | .right-section .reminders .add-reminder div{ 533 | display: flex; 534 | align-items: center; 535 | gap: 0.6rem; 536 | } 537 | 538 | @media screen and (max-width: 1200px) { 539 | .container{ 540 | width: 95%; 541 | grid-template-columns: 7rem auto 23rem; 542 | } 543 | 544 | aside .logo h2{ 545 | display: none; 546 | } 547 | 548 | aside .sidebar h3{ 549 | display: none; 550 | } 551 | 552 | aside .sidebar a{ 553 | width: 5.6rem; 554 | } 555 | 556 | aside .sidebar a:last-child{ 557 | position: relative; 558 | margin-top: 1.8rem; 559 | } 560 | 561 | main .analyse{ 562 | grid-template-columns: 1fr; 563 | gap: 0; 564 | } 565 | 566 | main .new-users .user-list .user{ 567 | flex-basis: 40%; 568 | } 569 | 570 | main .recent-orders { 571 | width: 94%; 572 | position: absolute; 573 | left: 50%; 574 | transform: translateX(-50%); 575 | margin: 2rem 0 0 0.8rem; 576 | } 577 | 578 | main .recent-orders table{ 579 | width: 83vw; 580 | } 581 | 582 | main table thead tr th:last-child, 583 | main table thead tr th:first-child{ 584 | display: none; 585 | } 586 | 587 | main table tbody tr td:last-child, 588 | main table tbody tr td:first-child{ 589 | display: none; 590 | } 591 | 592 | } 593 | 594 | @media screen and (max-width: 768px) { 595 | .container{ 596 | width: 100%; 597 | grid-template-columns: 1fr; 598 | padding: 0 var(--padding-1); 599 | } 600 | 601 | aside{ 602 | position: fixed; 603 | background-color: var(--color-white); 604 | width: 15rem; 605 | z-index: 3; 606 | box-shadow: 1rem 3rem 4rem var(--color-light); 607 | height: 100vh; 608 | left: -100%; 609 | display: none; 610 | animation: showMenu 0.4s ease forwards; 611 | } 612 | 613 | @keyframes showMenu { 614 | to{ 615 | left: 0; 616 | } 617 | } 618 | 619 | aside .logo{ 620 | margin-left: 1rem; 621 | } 622 | 623 | aside .logo h2{ 624 | display: inline; 625 | } 626 | 627 | aside .sidebar h3{ 628 | display: inline; 629 | } 630 | 631 | aside .sidebar a{ 632 | width: 100%; 633 | height: 3.4rem; 634 | } 635 | 636 | aside .sidebar a:last-child{ 637 | position: absolute; 638 | bottom: 5rem; 639 | } 640 | 641 | aside .toggle .close{ 642 | display: inline-block; 643 | cursor: pointer; 644 | } 645 | 646 | main{ 647 | margin-top: 8rem; 648 | padding: 0 1rem; 649 | } 650 | 651 | main .new-users .user-list .user{ 652 | flex-basis: 35%; 653 | } 654 | 655 | main .recent-orders{ 656 | position: relative; 657 | margin: 3rem 0 0 0; 658 | width: 100%; 659 | } 660 | 661 | main .recent-orders table{ 662 | width: 100%; 663 | margin: 0; 664 | } 665 | 666 | .right-section{ 667 | width: 94%; 668 | margin: 0 auto 4rem; 669 | } 670 | 671 | .right-section .nav{ 672 | position: fixed; 673 | top: 0; 674 | left: 0; 675 | align-items: center; 676 | background-color: var(--color-white); 677 | padding: 0 var(--padding-1); 678 | height: 4.6rem; 679 | width: 100%; 680 | z-index: 2; 681 | box-shadow: 0 1rem 1rem var(--color-light); 682 | margin: 0; 683 | } 684 | 685 | .right-section .nav .dark-mode{ 686 | width: 4.4rem; 687 | position: absolute; 688 | left: 66%; 689 | } 690 | 691 | .right-section .profile .info{ 692 | display: none; 693 | } 694 | 695 | .right-section .nav button{ 696 | display: inline-block; 697 | background-color: transparent; 698 | cursor: pointer; 699 | color: var(--color-dark); 700 | position: absolute; 701 | left: 1rem; 702 | } 703 | 704 | .right-section .nav button span{ 705 | font-size: 2rem; 706 | } 707 | 708 | } 709 | --------------------------------------------------------------------------------