-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprofile.html
140 lines (135 loc) · 5.89 KB
/
profile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3R</title>
<link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/512/3135/3135755.png">
<link rel="stylesheet" href="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==">
<style>
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Hachi+Maru+Pop&family=Hubballi&family=Montserrat:wght@254&family=Open+Sans:wght@326;379&family=Poppins:wght@100&family=Roboto:wght@300;400&family=Rubik+Glitch&display=swap');
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="asset/css/main.css">
<link rel="stylesheet" href="asset/css/base.css">
<link rel="stylesheet" href="asset/css/page1.css">
<link rel="stylesheet" href="asset/css/sub-pages.css">
<link rel="stylesheet" href="asset/css/personalprofile.css">
</head>
<body>
<div class="main">
<!-- Header Section -->
<div class="heading" style="height: 10rem;">
<div class="nav" style="background-color: black; height: 70%;top:0%; align-items: center;">
<a href="index.html">
<div class="heading__brand">
<div class="heading__brand__logo"><i class="fa-solid fa-graduation-cap"></i></div>
<div class="heading__brand__slogan"> | 3R</div>
<div class="extra__info">E d u c a t i o n</div>
</div>
</a>
<div class="nav_searchbar">
<input type="text" placeholder="Name your course...">
</div>
<div class="nav__container">
<a href="" class="subnav">About</a>
<a href="contact.html" class="subnav">Contact</a>
<a href="" class="subnav">Need help?</a>
<a href="#" class="subnav">
<img class="nav_avatar" src="asset/img/avatar.jpg" alt="" >
Nhật Minh
</a>
<div style="bottom: 10.5px;" class="dark-theme-button">
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="label">
<i class="fa-solid fa-moon moon-theme"></i>
<i class="fa-solid fa-sun sun-theme"></i>
<div class='ball'> </div>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="student-profile py-4">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card shadow-sm">
<div class="card-header bg-transparent text-center">
<img class="profile_img" src="asset/img/avatar.jpg" alt="student dp">
<h3>Nguyen Minh</h3>
</div>
<div class="card-body">
<p class="mb-0"><strong class="pr-1">Student ID:</strong>s3932112</p>
<p class="mb-0"><strong class="pr-1">Major:</strong>IT</p>
<p class="mb-0"><strong class="pr-1">Minor:</strong>AI</p>
<p class="mb-0"><strong class="pr-1">Since:</strong>Sem A 2022</p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card shadow-sm">
<div class="card-header bg-transparent border-0">
<h3 class="mb-0"><i class="fa fa-clone pr-1"></i>General Information</h3>
</div>
<div class="card-body pt-0">
<table class="table table-bordered">
<tr>
<th width="30%">Enrolled</th>
<td width="2%">:</td>
<td>3 courses</td>
</tr>
<tr>
<th width="30%">Academic Year </th>
<td width="2%">:</td>
<td>2022</td>
</tr>
<tr>
<th width="30%">Gender</th>
<td width="2%">:</td>
<td>Male</td>
</tr>
<tr>
<th width="30%">GPA </th>
<td width="2%">:</td>
<td>3.4</td>
</tr>
<tr>
<th width="30%">Point:</th>
<td width="2%">:</td>
<td>160</td>
</tr>
</table>
</div>
</div>
<div style="height: 26px"></div>
<div class="card shadow-sm">
<div class="card-header bg-transparent border-0">
<h3 class="mb-0"><i class="far fa-clone pr-1"></i>Other Information</h3>
</div>
<div class="card-body pt-0">
<p>He is a responsible and diligent member, who plays an inevitable role in our group project.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer section -->
<script>
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', ()=>{
document.body.classList.toggle('dark');
})
</script>
<script>
function darkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>