Merge pull request #4 from nhattpn/newstructure

new structure

CSS/FirstPage.css

@@ -0,0 +1,178 @@
+body {
+  margin: 0;
+  line-height: normal;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid black;
+}
+
+footer {
+  margin-top: 5%;
+  height: 100%;
+  background-color: #0b3942;
+  display: flex;
+  text-align: center;
+}
+#logo {
+  border: 2px solid rgb(47, 96, 170);
+  border-style: ridge;
+  box-sizing: border-box;
+  padding-left: 100px;
+  padding-right: 100px;
+  margin-left: 10px;
+  width: 100%;
+  height: 100%;
+}
+#circle {
+  margin-left: 2%;
+  width: 15%;
+  background-color: gainsboro;
+  border-radius: 50%;
+  text-align: center;
+  display: flex;
+}
+:root {
+  /* fonts */
+  --font-inter: Inter;
+  --font-arial: Arial;
+
+  /* font sizes */
+  --font-size-xl: 20px;
+  --font-size-base: 16px;
+  --font-size-5xl: 24px;
+  --font-size-lgi: 19px;
+
+  /* Colors */
+  --color-white: #fff;
+  --color-black: #000;
+  --color-aquamarine: #13f7ce;
+  --color-blueviolet: #8f01ff;
+  --color-paleturquoise: #c1fceb;
+  --color-darkblue: #2909a7;
+  --color-yellow-100: #ebff00;
+
+  /* Gaps */
+  --gap-4xs: 9px;
+  --gap-xl: 20px;
+
+  /* Paddings */
+  --padding-84xl: 103px;
+  --padding-xl: 20px;
+  --padding-13xl: 32px;
+  --padding-6xs: 7px;
+  --padding-33xl: 52px;
+  --padding-32xl: 51px;
+  --padding-14xl: 33px;
+  --padding-xs: 12px;
+  --padding-8xl: 27px;
+  --padding-23xl: 42px;
+
+  /* Border radiuses */
+  --br-11xl: 30px;
+}
+
+.big-box {
+  background-image: url("./../Images/slide1.jfif"); /* Đường dẫn tới hình ảnh của bạn */
+  background-size: cover; /* Đảm bảo hình ảnh nền bao phủ toàn bộ phần diện tích của trang */
+  background-position-x: center; /* Canh chỉnh vị trí của hình nền */
+  background-repeat: no-repeat; /* Không lặp lại hình ảnh */
+}
+
+.box1 {
+  margin-top: 0%;
+  margin-right: 50%;
+  margin-bottom: 0%;
+  margin-left: 22%;
+  width: 28%;
+  padding: 0%;
+  border: none;
+}
+
+.box2 {
+  margin-top: 1%;
+  margin-right: 40%;
+  margin-bottom: 1%;
+  margin-left: 10%;
+  width: 50%;
+  padding: 0%;
+  border-color: var(--color-yellow-100);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 20px;
+}
+
+.box3 {
+  margin-top: 0%;
+  margin-right: 0%;
+  margin-bottom: 0%;
+  margin-left: 0%;
+  width: 100%;
+  padding: 0%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+.small-box1 {
+  margin-top: 70%;
+  margin-right: 0%;
+  margin-bottom: 0%;
+  margin-left: 60%;
+  width: 40%;
+  height: 45%;
+  padding: 0%;
+  background-color: #9ff5f5;
+  text-align: center;
+}
+
+.small-box2 {
+  margin-top: 70%;
+  margin-right: 0%;
+  margin-bottom: 0%;
+  margin-left: 30%;
+  width: 40%;
+  height: 45%;
+  padding: 0%;
+  background-color: #9ff5f5;
+  text-align: center;
+}
+
+.small-box3 {
+  margin-top: 70%;
+  margin-right: 0%;
+  margin-bottom: 0%;
+  margin-left: 0%;
+  width: 40%;
+  height: 45%;
+  padding: 0%;
+  background-color: #9ff5f5;
+  text-align: center;
+}
+
+.text1 {
+  color: var(--color-white);
+  margin-top: 0;
+  padding-top: 40px;
+}
+
+.text2 {
+  color: var(--color-yellow-100);
+  text-align: center;
+  margin-block-start: 3px;
+  margin-block-end: 3px;
+}
+
+.text3 {
+  color: var(--color-darkblue);
+  text-align: center;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
+.image-child {
+  margin-top: 25%;
+  width: 50%;
+}

CSS/StudentProfile.css

@@ -0,0 +1,88 @@
+header {
+  background-color: white;
+  min-width: 100%;
+  height: 10%;
+  display: flex;
+  justify-content: space-between;
+}
+
+#logo {
+  box-sizing: border-box;
+  padding-left: 100px;
+  padding-right: 100px;
+  margin-left: 10px;
+  width: 100%;
+  height: 100%;
+}
+#circle {
+  margin-left: 2%;
+  width: 15%;
+  display: flex;
+  background-color: gainsboro;
+  border-radius: 50%;
+  text-align: center;
+}
+
+body {
+  min-height: 70%;
+  margin: 0;
+  line-height: normal;
+  position: fixed;
+  width: 100%;
+  background-color: rgb(206, 206, 206);
+}
+.main {
+  border: 1px solid black;
+  display: flex;
+  overflow: hidden;
+  height: 85vh;
+}
+.leftBody {
+  background-color: rgb(58, 35, 35);
+  width: 18%;
+  color: white;
+}
+.rightBody {
+  width: 82%;
+}
+.dataTable {
+  background-color: white;
+  height: 92%;
+  width: 98%;
+  margin: auto;
+  margin-top: 0.6%;
+  box-shadow: 5px 10px burlywood;
+}
+
+.navigation a {
+  float: right;
+  display: inline;
+  color: #020202;
+  text-align: center;
+  padding: 2vh 10vh;
+  box-shadow: inset 0 0 0#ddd;
+  text-decoration: none;
+}
+.navigation {
+  display: flex;
+  background-color: wheat;
+  box-sizing: border-box;
+  height: 8%;
+  /* border: 1px solid black; */
+}
+.smallbox {
+  background-color: rgb(204, 203, 203);
+  font-weight: bold;
+}
+.smallbox p{
+  box-shadow: 2px 2px 10px rgb(104, 103, 103);
+}
+footer {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  height: 10%;
+  background-color: #0b3942;
+  color: wheat;
+  text-align: center;
+}