Merge pull request #3 from nhattpn/lmtsniper-patch-1

up page2
nhattpn · Mar 31, 2024 · 8a0b5bf · 8a0b5bf
2 parents 81fc40f + b0e4c02
commit 8a0b5bf
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 0 deletions.
diff --git a/page2/FirstPage.css b/page2/FirstPage.css
@@ -0,0 +1,157 @@
+body {
+    margin: 0;
+    line-height: normal;
+}
+
+header {
+    display: flex;
+}
+
+footer {
+    margin-top: 5%;
+    height: 100%;
+    background-color: #0b3942;
+    display: flex;
+    text-align: center;
+}
+
+: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('./public/rectangle-21.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);
+}
+
+.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%;
+}
diff --git a/page2/FirstPage.html b/page2/FirstPage.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+
+    <link rel="stylesheet" href="./FirstPage.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Arial:ital,wght@0,400;1,700&display=swap" />
+</head>
+<header>
+    <img style="width: 15%;" src="./public/logo.png" alt="logo">
+    <div style="margin-left: 68%; width: 5%;">
+        <img style="width: 100%; padding: 20% 0%;" src="./public/notification.jfif" alt="Thông báo">
+    </div>
+    <div style="margin-left: 2%; width: 10%; background-color: gainsboro; border-radius: 50%; text-align: center;">
+        <p style="padding: 15% 0%;">TÊN VIẾT TẮT</p>
+    </div>
+</header>
+
+<body>
+    <div class="big-box">
+        <div class="box1">
+            <h2 class="text1">CHƯƠNG TRÌNH CHẤT LƯỢNG VỚI ĐA DẠNG NGÀNH</h2>
+            <div class="box2">
+                <h3 class="text2">Chương trình đào tạo</h3>
+            </div>
+        </div>
+        <div class="box3">
+            <a class="small-box1" href="https://google.com" style="text-decoration-line: none;">
+                <h3 class="text3">GIẢNG VIÊN</h3>
+                <img class="image-child" src="./public/emoji1.jfif" alt="Giảng viên">
+            </a>
+            <a class="small-box2" href="https://google.com" style="text-decoration-line: none;">
+                <h3 class="text3">SINH VIÊN</h3>
+                <img class="image-child" src="./public/emoji2.jfif" alt="Sinh viên">
+            </a>
+            <a class="small-box3" href="https://google.com" style="text-decoration-line: none;">
+                <h3>KHÓA HỌC</h3>
+                <img class="image-child" src="./public/emoji3.jfif" alt="Khóa học">
+            </a>
+        </div>
+    </div>
+</body>
+
+<footer>
+    <div style="margin-left: 9%; width: 11%; ">
+        <div style="margin-top: 30%; margin-right: 30%; margin-left: 30%; width: 40%; height: 40%; background-color: blueviolet; border-radius: 50%;">
+            <img style="width: 50%; padding: 25%;" src="./public/phone.png" alt="Phone">
+        </div>
+        <div>
+            <p style="color: white;">(+84)123456789</p>
+        </div>
+    </div>
+    <div style="margin-left: 4%; width: 11%;">
+        <div style="margin-top: 30%; margin-right: 30%; margin-left: 30%; width: 40%; height: 40%; background-color: blueviolet; border-radius: 50%;">
+            <img style="width: 50%; padding: 25%;" src="./public/message.png" alt="Mail">
+        </div>
+        <div>
+            <p style="color: white;">[email protected]</p>
+        </div>
+    </div>
+    <div style="margin-left: 4%; width: 11%;">
+        <div style="margin-top: 30%; margin-right: 30%; margin-left: 30%; width: 40%; height: 40%; background-color: blueviolet; border-radius: 50%;">
+            <img style="width: 50%; padding: 25%;" src="./public/map.png" alt="Location">
+        </div>
+        <div>
+            <p style="color: white;">xyz, Quận 1, Tp.HCM</p>
+        </div>
+    </div>
+
+    <div style="margin-left: 6%; width: 11%;">
+        <div style="margin-top: 30%; margin-right: 30%; margin-left: 30%; width: 40%; height: 40%; background-color: white; border-radius: 50%;">
+            <img style="width: 50%; padding: 25%;" src="./public/contact.jfif" alt="Contact">
+        </div>
+        <div>
+            <p style="color: white;">Contact us</p>
+        </div>
+    </div>
+    <div style="margin-left: 4%; width: 11%;">
+        <p style="color: white;">VỀ CHÚNG TÔI</p>
+        <p style="color: var(--color-aquamarine);">Đội ngũ phát triển</p>
+        <p style="color: var(--color-aquamarine);">Trường đại học</p>
+    </div>
+
+    <div style="margin-left: 10%; margin-top: 8%;">
+        <p style="color: white;">Copyright 2024</p>
+    </div>
+</footer>
+
+</html>
diff --git a/page2/public/contact.jfif b/page2/public/contact.jfif
diff --git a/page2/public/emoji1.jfif b/page2/public/emoji1.jfif
diff --git a/page2/public/emoji2.jfif b/page2/public/emoji2.jfif
diff --git a/page2/public/emoji3.jfif b/page2/public/emoji3.jfif
diff --git a/page2/public/logo.png b/page2/public/logo.png
diff --git a/page2/public/map.png b/page2/public/map.png
diff --git a/page2/public/message.png b/page2/public/message.png
diff --git a/page2/public/notification.jfif b/page2/public/notification.jfif
diff --git a/page2/public/phone.png b/page2/public/phone.png
diff --git a/page2/public/rectangle-21.jfif b/page2/public/rectangle-21.jfif