├── images ├── logo.png ├── profile-1.jpg ├── profile-3.jpg ├── profile-4.jpg └── profile-2.jpeg ├── README.md ├── LICENSE ├── timetable.html ├── timeTable.js ├── exam.html ├── app.js ├── password.html ├── index.html └── style.css /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ADi7YA26/Student-Dashboard/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/profile-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ADi7YA26/Student-Dashboard/HEAD/images/profile-1.jpg -------------------------------------------------------------------------------- /images/profile-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ADi7YA26/Student-Dashboard/HEAD/images/profile-3.jpg -------------------------------------------------------------------------------- /images/profile-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ADi7YA26/Student-Dashboard/HEAD/images/profile-4.jpg -------------------------------------------------------------------------------- /images/profile-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ADi7YA26/Student-Dashboard/HEAD/images/profile-2.jpeg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Student-Dashboard 2 | A minimal, responsive and dynamic Student Dashboard project made up using HTML, CSS & JavaScript 3 | 4 | ![dashboard](https://user-images.githubusercontent.com/63731449/205628267-fdb8f7e9-f8df-42a4-b0f0-ef81c2e1c577.png) 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Adityapayal26 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /timetable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Student Dashboard 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

UMS

17 |

18 | 40 | 43 |

44 | light_mode 45 | dark_mode 46 |

47 | 48 |

49 | 50 |

51 |

52 |

53 | < 54 |

Today's Timetable

55 | > 56 |

57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |

Time	Room No.	Subject

68 |

69 |

70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /timeTable.js: -------------------------------------------------------------------------------- 1 | const Sunday =[ 2 | { 3 | time: 'Sunday', 4 | roomNumber: 'Holiday', 5 | subject: 'No class Available', 6 | type: '' 7 | } 8 | ] 9 | const Monday =[ 10 | { 11 | time: '09-10 AM', 12 | roomNumber: '38-718', 13 | subject: 'DBMS130', 14 | type: 'Lecture' 15 | }, 16 | { 17 | time: '10-11 AM', 18 | roomNumber: '38-718', 19 | subject: 'MTH166', 20 | type: 'Tutorial' 21 | }, 22 | { 23 | time: '12-01 PM', 24 | roomNumber: '38-718', 25 | subject: 'NS200', 26 | type: 'Lecture' 27 | } 28 | ] 29 | const Tuesday =[ 30 | { 31 | time: '09-10 AM', 32 | roomNumber: '27-304Y', 33 | subject: 'MTH166', 34 | type: 'Tutorial' 35 | }, 36 | { 37 | time: '11-12 AM', 38 | roomNumber: '28-107', 39 | subject: 'CS849', 40 | type: 'Lecture' 41 | }, 42 | { 43 | time: '12-01 PM', 44 | roomNumber: '28-107', 45 | subject: 'CS849', 46 | type: 'Lecture' 47 | }, 48 | { 49 | time: '02-03 PM', 50 | roomNumber: '38-718', 51 | subject: 'NS200', 52 | type: 'Lecture' 53 | } 54 | ] 55 | 56 | const Wednesday =[ 57 | { 58 | time: '10-11 AM', 59 | roomNumber: '33-309', 60 | subject: 'DBMS130', 61 | type: 'Lecture' 62 | }, 63 | { 64 | time: '11-12 AM', 65 | roomNumber: '38-719', 66 | subject: 'CS200', 67 | type: 'Lecture' 68 | } 69 | ] 70 | 71 | const Thursday =[ 72 | { 73 | time: '11-12 AM', 74 | roomNumber: '33-309', 75 | subject: 'MTH166', 76 | type: 'Lecture' 77 | }, 78 | { 79 | time: '01-02 PM', 80 | roomNumber: '38-719', 81 | subject: 'CS849', 82 | type: 'Lecture' 83 | }, 84 | { 85 | time: '02-03 PM', 86 | roomNumber: '38-718', 87 | subject: 'NS200', 88 | type: 'Lecture' 89 | } 90 | ] 91 | 92 | const Friday =[ 93 | { 94 | time: '10-11 AM', 95 | roomNumber: '33-309', 96 | subject: 'MEC103', 97 | type: 'Lecture' 98 | }, 99 | { 100 | time: '11-12 AM', 101 | roomNumber: '33-309', 102 | subject: 'MEC103', 103 | type: 'Lecture' 104 | }, 105 | { 106 | time: '02-03 PM', 107 | roomNumber: '33-601', 108 | subject: 'CS849', 109 | type: 'Tutorial' 110 | }, 111 | 112 | ] 113 | 114 | const Saturday =[ 115 | { 116 | time: '09-10 AM', 117 | roomNumber: '34-604', 118 | subject: 'DBMS130', 119 | type: 'Tutorial' 120 | }, 121 | { 122 | time: '10-11 AM', 123 | roomNumber: '34-604', 124 | subject: 'DBMS130', 125 | type: 'Lecture' 126 | }, 127 | { 128 | time: '01-02 PM', 129 | roomNumber: '33-309', 130 | subject: 'MTH166', 131 | type: 'Lecture' 132 | } 133 | ] -------------------------------------------------------------------------------- /exam.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Student Dashboard 8 | 9 | 10 | 11 | 12 | 25 | 26 | 27 |

28 |

29 |

30 |

UMS

31 |

32 | 54 | 57 |

58 | light_mode 59 | dark_mode 60 |

61 |

62 | 63 |

64 |

65 |

Exam Available

66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |

Date	Time	Subject	Room no.
13 May 2022	09-12 AM	CS200	38-718
16 May 2022	09-12 AM	DBMS130	38-718
18 May 2022	09-12 AM	MTH166	38-718
20 May 2022	09-12 AM	NS200	38-718
23 May 2022	09-12 AM	CS849	38-718

108 |

109 |

110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const sideMenu = document.querySelector("aside"); 3 | const profileBtn = document.querySelector("#profile-btn"); 4 | const themeToggler = document.querySelector(".theme-toggler"); 5 | const nextDay = document.getElementById('nextDay'); 6 | const prevDay = document.getElementById('prevDay'); 7 | 8 | // Profile button toggle for side menu 9 | profileBtn.onclick = function() { 10 | sideMenu.classList.toggle('active'); 11 | } 12 | 13 | // Scroll event to remove side menu and add/remove header active class 14 | window.onscroll = () => { 15 | sideMenu.classList.remove('active'); 16 | if(window.scrollY > 0) { 17 | document.querySelector('header').classList.add('active'); 18 | } else { 19 | document.querySelector('header').classList.remove('active'); 20 | } 21 | } 22 | 23 | // Theme toggle function 24 | const applySavedTheme = () => { 25 | const isDarkMode = localStorage.getItem('dark-theme') === 'true'; 26 | if (isDarkMode) { 27 | document.body.classList.add('dark-theme'); 28 | themeToggler.querySelector('span:nth-child(1)').classList.add('active'); 29 | themeToggler.querySelector('span:nth-child(2)').classList.remove('active'); 30 | } else { 31 | document.body.classList.remove('dark-theme'); 32 | themeToggler.querySelector('span:nth-child(1)').classList.remove('active'); 33 | themeToggler.querySelector('span:nth-child(2)').classList.add('active'); 34 | } 35 | } 36 | 37 | // Set the initial theme based on localStorage 38 | applySavedTheme(); 39 | 40 | // Toggle theme function 41 | themeToggler.onclick = function() { 42 | // Toggle dark theme class on body 43 | document.body.classList.toggle('dark-theme'); 44 | 45 | // Toggle active class on the theme toggler spans 46 | themeToggler.querySelector('span:nth-child(1)').classList.toggle('active'); 47 | themeToggler.querySelector('span:nth-child(2)').classList.toggle('active'); 48 | 49 | // Save the theme preference in localStorage 50 | localStorage.setItem('dark-theme', document.body.classList.contains('dark-theme')); 51 | } 52 | 53 | // Function to set timetable data 54 | let setData = (day) => { 55 | document.querySelector('table tbody').innerHTML = ''; // Clear previous table data 56 | let daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 57 | document.querySelector('.timetable div h2').innerHTML = daylist[day]; 58 | 59 | // Define subjects for each day (you might need to update this with real data) 60 | let daySchedule = []; 61 | switch(day) { 62 | case 0: daySchedule = Sunday; break; 63 | case 1: daySchedule = Monday; break; 64 | case 2: daySchedule = Tuesday; break; 65 | case 3: daySchedule = Wednesday; break; 66 | case 4: daySchedule = Thursday; break; 67 | case 5: daySchedule = Friday; break; 68 | case 6: daySchedule = Saturday; break; 69 | } 70 | 71 | // Append timetable data to table 72 | daySchedule.forEach(sub => { 73 | const tr = document.createElement('tr'); 74 | const trContent = ` 75 | ${sub.time} 76 | ${sub.roomNumber} 77 | ${sub.subject} 78 | ${sub.type} 79 | `; 80 | tr.innerHTML = trContent; 81 | document.querySelector('table tbody').appendChild(tr); 82 | }); 83 | } 84 | 85 | // Get current day and set timetable on page load 86 | let now = new Date(); 87 | let today = now.getDay(); // Get current day (0 - 6) 88 | let day = today; // To prevent today value from changing 89 | 90 | // Function to toggle timetable visibility 91 | function timeTableAll(){ 92 | document.getElementById('timetable').classList.toggle('active'); 93 | setData(today); 94 | document.querySelector('.timetable div h2').innerHTML = "Today's Timetable"; 95 | } 96 | 97 | // Event listeners for next and previous day buttons 98 | nextDay.onclick = function() { 99 | day <= 5 ? day++ : day = 0; // If-else one-liner 100 | setData(day); 101 | } 102 | 103 | prevDay.onclick = function() { 104 | day >= 1 ? day-- : day = 6; // Move to previous day 105 | setData(day); 106 | } 107 | 108 | // Set data on page load 109 | setData(day); 110 | document.querySelector('.timetable div h2').innerHTML = "Today's Timetable"; // Set heading on load 111 | }); 112 | -------------------------------------------------------------------------------- /password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Student Dashboard 8 | 9 | 10 | 11 | 12 | 66 | 67 | 68 | 69 |

70 |

71 |

72 |

UMS

73 |

74 | 96 | 99 |

100 | light_mode 101 | dark_mode 102 |

103 |

104 | 105 |

106 | 127 |

128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Student Dashboard 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

UMS

17 |

18 | 40 |

41 | person 42 |

43 |

44 | light_mode 45 | dark_mode 46 |

47 | 48 |

49 |

50 | 75 | 76 |

77 |

Attendance

78 |

79 |

80 | architecture 81 |

Engineering Graphics

82 |

12/14

83 |

84 | 85 |

86%

86 |

87 | Last 24 Hours 88 |

89 |

90 | functions 91 |

Mathematical Engineering

92 |

27/29

93 |

94 | 95 |

93%

96 |

97 | Last 24 Hours 98 |

99 |

100 | computer 101 |

Computer Architecture

102 |

27/30

103 |

104 | 105 |

81%

106 |

107 | Last 24 Hours 108 |

109 |

110 | dns 111 |

Database Management

112 |

24/25

113 |

114 | 115 |

96%

116 |

117 | Last 24 Hours 118 |

119 |

120 | router 121 |

Network Security

122 |

25/27

123 |

124 | 125 |

92%

126 |

127 | Last 24 Hours 128 |

129 |

130 | 131 |

132 |

133 | < 134 |

Today's Timetable

135 | > 136 |

137 | X 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 |

Time	Room No.	Subject

149 |

150 |

151 | 152 |

153 |

154 |

Announcements

155 |

156 |

157 |

Academic Summer training internship with Live Projects.

158 | 2 Minutes Ago 159 |

160 |

161 |

Co-curricular Global internship oportunity by Student organization.

162 | 10 Minutes Ago 163 |

164 |

165 |

Examination Instructions for Mid Term Examination.

166 | Yesterday 167 |

168 |

169 |

170 | 171 |

172 |

Teachers on leave

173 |

174 |

175 |

176 |

The Professor

177 | Full Day 178 |

179 |

180 |

181 |

182 |

183 |

Lisa Manobal

184 | Half Day 185 |

186 |

187 |

188 |

189 |

190 |

Himanshu Jindal

191 | Full Day 192 |

193 |

194 |

195 | 196 |

197 |

198 | 199 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap'); 2 | 3 | :root{ 4 | --color-primary: #7380ec; 5 | --color-danger: #ff7782; 6 | --color-success: #41f1b6; 7 | --color-warning: #ffbb55; 8 | --color-white: #fff; 9 | --color-info: #7d8da1; 10 | --color-dark: #363949; 11 | --color-light: rgba(132, 139, 200, 0.18); 12 | --color-dark-varient: #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 | --box-shadow: 0 2rem 3rem var(--color-light) 21 | } 22 | 23 | .dark-theme{ 24 | --color-background: #181a1e; 25 | --color-white: #202528; 26 | --color-dark: #edeffd; 27 | --color-dark-varient: #a3bdcc; 28 | --color-light: rgba(0,0,0,0.4); 29 | --box-shadow: 0 2rem 3rem var(--color-light) 30 | } 31 | 32 | 33 | *{ 34 | margin:0; 35 | padding: 0; 36 | text-decoration: none; 37 | list-style: none; 38 | box-sizing: border-box; 39 | } 40 | 41 | html{ 42 | font-size: 14px; 43 | scroll-behavior: smooth; 44 | } 45 | body{ 46 | font-family: 'Poppins', sans-serif; 47 | font-size: .88rem; 48 | background: var(--color-background); 49 | user-select: none; 50 | overflow-x: hidden; 51 | color: var(--color-dark); 52 | } 53 | *{ 54 | color: var(--color-dark); 55 | } 56 | img{ 57 | display: block; 58 | width: 100%; 59 | } 60 | h1{ 61 | font-weight: 800; 62 | font-size: 1.8rem; 63 | } 64 | h2{font-size: 1.4rem;} 65 | h3{font-size: .87rem;} 66 | h4{font-size: .8rem;} 67 | h5{font-size: .77rem;} 68 | small{font-size: .75rem;} 69 | 70 | .text-muted{color: var(--color-info);} 71 | p{color: var(--color-dark-varient);} 72 | b{color: var(--color-dark);} 73 | 74 | .primary{color: var(--color-primary);} 75 | .danger{color: var(--color-danger);} 76 | .success{color: var(--color-success)} 77 | .warning{color: var(--color-warning);} 78 | 79 | .container{ 80 | position: relative; 81 | display: grid; 82 | width: 93%; 83 | margin: 0 3rem; 84 | gap: 1.8rem; 85 | grid-template-columns: 14rem auto 23rem; 86 | padding-top: 4rem; 87 | } 88 | header h3{font-weight: 500;} 89 | header{ 90 | position: fixed; 91 | width: 100vw; 92 | z-index: 1000; 93 | background-color: var(--color-background); 94 | } 95 | header.active{box-shadow: var(--box-shadow);} 96 | header .logo{ 97 | display: flex; 98 | gap: .8rem; 99 | margin-right: auto; 100 | } 101 | header .logo img{ 102 | width: 2rem; 103 | height: 2rem; 104 | } 105 | 106 | header, 107 | header .navbar{ 108 | display: flex; 109 | align-items: center; 110 | justify-content: flex-end; 111 | padding: 0 3rem; 112 | color: var(--color-info); 113 | } 114 | header .navbar a{ 115 | display: flex; 116 | margin-left: 2rem; 117 | gap: 1rem; 118 | align-items: center; 119 | justify-content: space-between; 120 | position: relative; 121 | height: 3.7rem; 122 | transition: all 300ms ease; 123 | padding: 0 2rem; 124 | } 125 | header .navbar a:hover { 126 | padding-top: 1.5rem; 127 | } 128 | header .navbar a.active{ 129 | background: var(--color-light); 130 | color: var(--color-primary); 131 | } 132 | header .navbar a.active::before{ 133 | content: ""; 134 | background-color: var(--color-primary); 135 | position: absolute; 136 | height: 5px; 137 | width: 100%; 138 | left: 0;top: 0; 139 | } 140 | header #profile-btn{ 141 | display: none; 142 | font-size: 2rem; 143 | margin: .5rem 2rem 0 0; 144 | cursor: pointer; 145 | } 146 | header .theme-toggler{ 147 | background: var(--color-light); 148 | display: flex; 149 | justify-content: space-between; 150 | align-items: center; 151 | height: 1.6rem; 152 | width: 4.2rem; 153 | cursor: pointer; 154 | border-radius: var(--border-radius-1); 155 | margin-right: 2rem; 156 | } 157 | header .theme-toggler span{ 158 | font-size: 1.2rem; 159 | width: 50%; 160 | height: 100%; 161 | display: flex; 162 | align-items: center; 163 | justify-content: center; 164 | } 165 | header .theme-toggler span.active{ 166 | background-color: var(--color-primary); 167 | color: white; 168 | border-radius: var(--border-radius-1); 169 | } 170 | 171 | /* Profile section */ 172 | aside .profile{ 173 | margin-top: 2rem; 174 | width: 13rem; 175 | position: fixed; 176 | } 177 | aside .profile .top{ 178 | display: flex; 179 | align-items: center; 180 | gap: 1rem; 181 | border-bottom: 1px solid var(--color-light); 182 | padding-bottom: 1rem; 183 | } 184 | aside .profile .top:hover .profile-photo{ 185 | scale: 1.05; 186 | } 187 | aside .profile .top .profile-photo{ 188 | width: 6rem; 189 | height: 6rem; 190 | border-radius: 50%; 191 | overflow: hidden; 192 | border: 5px solid var(--color-light); 193 | transition: all 400ms ease; 194 | } 195 | aside .profile .about p{ 196 | padding-bottom: 1rem; 197 | } 198 | aside .profile .about{ 199 | margin-top: 1rem; 200 | } 201 | 202 | /* Home Section */ 203 | main{ 204 | position: relative; 205 | margin-top: 1.4rem; 206 | } 207 | main .subjects{ 208 | display: grid; 209 | grid-template-columns: repeat(5, 1fr); 210 | gap: 1.6rem; 211 | } 212 | 213 | main .subjects > div{ 214 | background-color: var(--color-white); 215 | padding: var(--card-padding); 216 | border-radius: var(--card-border-radius); 217 | margin-top: 1rem; 218 | box-shadow: var(--box-shadow); 219 | transition: all 300ms ease; 220 | } 221 | main .subjects > div:hover{ 222 | box-shadow: none; 223 | } 224 | main .subjects > div span{ 225 | background-color: var(--color-primary); 226 | padding: .5rem; 227 | border-radius: 50%; 228 | color: var(--color-white); 229 | font-size: 1.5rem; 230 | } 231 | main .subjects > div.mth span,main .subjects > div.cg span{background: var(--color-danger);} 232 | main .subjects > div.cs span{background: var(--color-success);} 233 | 234 | main .subjects h3{ 235 | margin: 1rem 0 0.6rem; 236 | font-size: 1rem; 237 | } 238 | main .subjects .progress{ 239 | position: relative; 240 | width: 89px; 241 | height: 89px; 242 | border-radius: 50%; 243 | margin: auto; 244 | } 245 | main .subjects svg circle{ 246 | fill: none; 247 | stroke: var(--color-primary); 248 | stroke-width: 8; 249 | stroke-linecap: round; 250 | transform: translate(5px, 5px); 251 | stroke-dasharray: 110; 252 | stroke-dashoffset: 92; 253 | } 254 | main .subjects .eg svg circle{ 255 | stroke-dashoffset: 25; 256 | stroke-dasharray: 210; 257 | } 258 | main .subjects .mth svg circle{ 259 | stroke-dashoffset: 7; 260 | stroke-dasharray: 210; 261 | } 262 | main .subjects .cs svg circle{ 263 | stroke-dashoffset: 35; 264 | stroke-dasharray: 210; 265 | } 266 | main .subjects .cg svg circle{ 267 | stroke-dashoffset: 0; 268 | stroke-dasharray: 210; 269 | } 270 | main .subjects .net svg circle{ 271 | stroke-dashoffset: 5; 272 | stroke-dasharray: 210; 273 | } 274 | main .subjects .progress .number{ 275 | position: absolute; 276 | top: 0;left: 0; 277 | height: 100%; 278 | width: 100%; 279 | display: flex; 280 | justify-content: center; 281 | align-items: center; 282 | } 283 | main .subjects small{ 284 | margin-top: 1rem; 285 | display: block; 286 | } 287 | main .timetable{ 288 | margin-top: 2rem; 289 | } 290 | main .timetable h2{ 291 | margin-bottom: .8rem; 292 | } 293 | main .timetable table{ 294 | background-color: var(--color-white); 295 | width: 100%; 296 | border-radius: var(--card-border-radius); 297 | padding: var(--card-padding); 298 | text-align: center; 299 | box-shadow: var(--box-shadow); 300 | transition: all 300ms ease; 301 | } 302 | main .timetable span{display: none;} 303 | main .timetable table:hover{box-shadow: none;} 304 | main table tbody td{ 305 | height: 2.8rem; 306 | border-bottom: 1px solid var(--color-light); 307 | color: var(--color-dark-varient); 308 | } 309 | main table tbody tr:last-child td{border: none;} 310 | 311 | main .timetable.active{ 312 | width: 100%; 313 | height: 100vh; 314 | position: fixed; 315 | top: 0;left: 0; 316 | display: flex; 317 | flex-direction: column; 318 | align-items: center; 319 | justify-content: center; 320 | } 321 | main .timetable.active h2{ 322 | color: var(--color-dark); 323 | } 324 | main .timetable.active table{ 325 | width: 90%; 326 | max-width: 1000px; 327 | position: relative; 328 | } 329 | main .timetable.active span{ 330 | display: block; 331 | font-size: 2rem; 332 | color: var(--color-dark); 333 | cursor: pointer; 334 | } 335 | .timetable div{ 336 | position: relative; 337 | width: 50%; 338 | display: flex; 339 | align-items: center; 340 | justify-content: space-between; 341 | } 342 | main .timetable.active .closeBtn{ 343 | position: absolute; 344 | top: 5%;right: 5%; 345 | } 346 | 347 | 348 | /* Right */ 349 | .right{margin-top: 2.2rem;padding-left: 1.5rem;} 350 | 351 | .right .announcements h2{margin-bottom: .8rem;} 352 | .right .announcements .updates{ 353 | background-color: var(--color-white); 354 | padding: var(--card-padding); 355 | border-radius: var(--card-border-radius); 356 | box-shadow: var(--box-shadow); 357 | transition: all 300ms ease; 358 | } 359 | .right .announcements .updates:hover{box-shadow: none;} 360 | .right .announcements .updates .message{ 361 | gap: 1rem; 362 | line-height: 1.5; 363 | padding: .5rem 0; 364 | } 365 | 366 | /* Teachers on leave */ 367 | .right .leaves{margin-top: 2rem;} 368 | .right .leaves h2{margin-bottom: .8rem;} 369 | .right .leaves .teacher{ 370 | background: var(--color-white); 371 | display: flex; 372 | align-items: center; 373 | gap: 1rem; 374 | margin-bottom: .7rem; 375 | padding: 1.4rem var(--card-padding); 376 | border-radius: var(--border-radius-2); 377 | transition: all 300ms ease; 378 | box-shadow: var(--box-shadow); 379 | } 380 | .right .profile-photo{ 381 | width: 2.5rem; 382 | height: 2.5rem; 383 | border-radius: 50%; 384 | overflow: hidden; 385 | } 386 | .right .leaves .teacher:hover{box-shadow: none;} 387 | 388 | 389 | 390 | 391 | 392 | /* MEDIA QUERIES */ 393 | @media screen and (max-width: 1200px) { 394 | html{font-size: 12px;} 395 | .container{ 396 | grid-template-columns: 13rem auto 20rem; 397 | } 398 | header{position: fixed;} 399 | .container{padding-top: 4rem;} 400 | header .logo h2{display: none;} 401 | header .navbar h3{display: none;} 402 | header .navbar a{width: 4.5rem; padding: 0 1rem;} 403 | 404 | main .subjects{ 405 | grid-template-columns: repeat(2, 1fr); 406 | gap: 1; 407 | } 408 | main .timetable{ 409 | width: 150%; 410 | position: absolute; 411 | padding: 4rem 0 0 0; 412 | } 413 | } 414 | 415 | 416 | @media screen and (max-width: 768px){ 417 | html{font-size: 10px;} 418 | header{padding: 0 .8rem;} 419 | .container{width: 100%; grid-template-columns: 1fr;margin: 0;} 420 | header #profile-btn{display: inline;} 421 | header .navbar{padding: 0;} 422 | header .navbar a{margin: 0 .5rem 0 0;} 423 | header .theme-toggler{margin: 0;} 424 | aside{ 425 | position: absolute; 426 | top: 4rem;left: 0;right: 0; 427 | background-color: var(--color-white); 428 | padding-left: 2rem; 429 | transform: translateX(-100%); 430 | z-index: 10; 431 | width:18rem; 432 | height: 100%; 433 | box-shadow: 1rem 3rem 4rem var(--color-light); 434 | transition: all 2s ease; 435 | } 436 | aside.active{ 437 | transform: translateX(0); 438 | } 439 | main{padding: 0 2rem;} 440 | main .timetable{ 441 | position: relative; 442 | margin: 3rem 0 0 0; 443 | width: 100%; 444 | } 445 | main .timetable table{ 446 | width: 100%; 447 | margin: 0; 448 | } 449 | .right{ 450 | width: 100%; 451 | padding: 2rem; 452 | } 453 | } 454 | --------------------------------------------------------------------------------

Today's Timetable

Exam Available

Create new password

Attendance

Engineering Graphics

12/14

Mathematical Engineering

27/29

Computer Architecture

27/30

Database Management

24/25

Network Security

25/27

Today's Timetable

Announcements

Teachers on leave

The Professor

Lisa Manobal

Himanshu Jindal