Merge pull request #6 from nhattpn/nhat

complete student page

CSS/StudentProfile.css

@@ -68,15 +68,22 @@ body {
   background-color: wheat;
   box-sizing: border-box;
   height: 8%;
-  /* border: 1px solid black; */
 }
 .smallbox {
   background-color: rgb(204, 203, 203);
   font-weight: bold;
+  width: 95%;
+  margin: auto;
 }
-.smallbox p{
+.smallbox p {
   box-shadow: 2px 2px 10px rgb(104, 103, 103);
 }
+.data_box {
+  margin-left: 1vh;
+  width: 35vh;
+  border-right: 1px solid rgb(204, 203, 203);
+}
+
 footer {
   position: fixed;
   bottom: 0px;

HTML/StudentProfile.html

@@ -18,9 +18,9 @@
     <a href="FirstPage.html">
       <img id="logo" src="./../Images/logo.png" alt="logo" />
     </a>
-    <div style="margin-left: 70%; width: 5%">
+    <div style="margin-left: 70%; width: 5%; display: flex">
       <img
-        style="width: 100%; margin: auto; display: flex"
+        style="width: 100%; margin: auto"
         src="./../icon/notification.png"
         alt="Thông báo"
       />
@@ -54,22 +54,79 @@
         <div class="dataTable">
           <div class="navigation">
             <nav>
-              <a href="#" style="font-weight: bold;">Training Infomation</a>
+              <a href="#" style="font-weight: bold">Training Infomation</a>
               <a href="#" style="font-weight: bold; border-top: 3px solid blue"
                 >Student Infomation</a
               >
             </nav>
           </div>
           <div style="padding: 10px">
             <i style="font-weight: bold"
-              >Last updated time: dd/mm/yyyy realtime</i>
+              >Last updated time: dd/mm/yyyy realtime</i
+            >
           </div>
           <div class="smallbox">
             <p>Persional Infomation</p>
           </div>
+          <div style="height: 35vh; display: flex">
+            <div class="data_box" style="margin-left: 4vh">
+              <div style="text-align: center">
+                <img
+                  src="./../icon/humanIcon.svg"
+                  alt="avatar"
+                  style="padding: 3vh; background-color: rgb(204, 203, 203)"
+                />
+              </div>
+              <p style="font-weight: bold">
+                Last profile photo update time: ___
+              </p>
+            </div>
+            <div class="data_box">
+              <p style="font-weight: bold">#Full Name</p>
+              <p>SV000000</p>
+              <p style="font-weight: bold">#Student ID</p>
+              <p>None</p>
+              <p style="font-weight: bold">#Sex</p>
+              <p>None</p>
+            </div>
+            <div class="data_box">
+              <p style="font-weight: bold">#Class</p>
+              <p>SV000000</p>
+              <p style="font-weight: bold">#Major</p>
+              <p>None</p>
+              <p style="font-weight: bold">#Faculty</p>
+              <p>None</p>
+            </div>
+            <div class="data_box">
+              <p style="font-weight: bold">#Identity Card Number</p>
+              <p>SV000000</p>
+              <p style="font-weight: bold">#Date of issue of identity card</p>
+              <p>None</p>
+              <p style="font-weight: bold">#Place of issue of identity card</p>
+              <p>None</p>
+            </div>
+          </div>
           <div class="smallbox">
             <p>Address Infomation</p>
           </div>
+          <div style="height: 15vh; display: flex">
+            <div class="data_box" style="margin-left: 4vh">
+              <p style="font-weight: bold">#Address</p>
+              <p>None</p>
+            </div>
+            <div class="data_box">
+              <p style="font-weight: bold">#Telephone Number</p>
+              <p>None</p>
+            </div>
+            <div class="data_box">
+              <p style="font-weight: bold">#University Email</p>
+              <p>None</p>
+            </div>
+            <div class="data_box">
+              <p style="font-weight: bold">#Other email</p>
+              <p>None</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>