Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hieu #2534

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

hieu #2534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 119 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<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>Infomation</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>This is a static template, there is no bundler or bundling involved!</h1>
<body class="text-gray-500">
<p class="main-name">Danh sách bài tập</p>
<div class="main-table">
<div class="row">
<div class="first-col">
<img src="./images/Banner.jpg" alt="hieu" />
<p>Hà Ngọc Hiếu AT150218</p>
</div>
<div class="second-col">
<div class="banner"></div>
</div>
</div>
<div class="row">
<div class="first-col">
<p>Bài tập 1</p>
</div>
<div class="second-col">
<div class="content">
<div class="container">
<div id="top">
<img src="./images/banner.png" alt="" />
</div>
<div id="middle">
<div id="left">
<div class="nav">
<button>Trang tin điện tử</button>
<button>Diễn đàn</button>
<button>Dịch vụ công</button>
<button>Phổ biến kiến thức</button>
<button>Đào tạo từ xa</button>
<button>Hoạt động sáng tạo</button>
<button>Tư vấn phản biện</button>
<button>Thư điện tử</button>
</div>
<div class="img">
<img src="./images/logo_nxbtt.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_cenforchil.gif" alt="" />
</div>
<div class="img">
<img src="./images/logo_vhgd.gif" alt="" />
</div>
<div class="img">
<img src="./images/logo_vifotec.jpg" alt="" />
</div>
</div>
<div id="center">
Nước Cộng hoà Xã hội chủ nghĩa Việt Nam là một dải đất hình
chữ S, nằm ở trung tâm khu vực Đông Nam Á, ở phía đông bán đảo
Đông Dương, phía bắc giáp Trung Quốc, phía tây giáp Lào,
Campuchia, phía đông nam trông ra biển Đông và Thái Bình
Dương. Bờ biển Việt Nam dài 3 260 km, biên giới đất liền dài 4
510 km. Trên đất liền, từ điểm cực Bắc đến điểm cực Nam (theo
đường chim bay) dài 1 650km, từ điểm cực Đông sang điểm cực
Tây nơi rộng nhất 600km (Bắc bộ), 400 km (Nam bộ), nơi hẹp
nhất 50km (Quảng Bình).
</div>
<div id="right">
<div style="display: flex;">
<input
type="text"
style="width: 130px; margin-right: 5px;"
/>
<button>Tìm</button>
</div>
<div class="img">
<img src="./images/logo_khds.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_hoisuhoc.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_vacpa.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_bvtnmt1.jpg" alt="" />
</div>
<div class="img">
<img src="./images/hoixd_logo.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_vdkt.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_VnDG.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_hcauduonghcm.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_undp.jpg" alt="" />
</div>
<div class="img">
<img src="./images/logo_1VS.gif" alt="" />
</div>
<div class="img">
<img src="./images/logo_thiennhien.jpg" alt="" />
</div>
</div>
</div>
<div id="bottom"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="footer">
Copy right: Ha Ngoc Hieu @2023
</div>
</div>
</div>
<script src="./main.js" defer></script>
</body>
</html>
</html>
125 changes: 125 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 100%;
margin: auto;
}
img {
width: 100%;
}

#middle {
display: flex;
}

#left,
#right {
padding: 5px;
width: 180px;
display: flex;
flex-direction: column;
}

#center {
flex: 1;
}

#left .nav {
display: flex;
flex-direction: column;
gap: 5px;
}

#left .nav button {
border: 1px solid gray;
border-radius: 4px;
padding: 10px 0px;
background-image: linear-gradient(white, white, rgb(163, 163, 236));
color: brown;
font-weight: 700;
}

.img {
width: 100%;
margin-top: 5px;
border: 2px solid brown;
}

#bottom {
background-color: brown;
height: 60px;
}

body {
padding: 0 200px;
}

body .main-table {
width: 90%;
}

body .main-name {
font-size: 30px;
margin: 0;
font-weight: bold;
}

.main-table .row {
display: flex;
align-items: center;
width: 100%;
border: 1px solid black;
}

.main-table .row .first-col {
width: 20%;
}

.main-table .row .first-col,
.main-table .row .second-col p {
text-align: center;
}

.main-table .row .first-col img {
width: 200px;
height: 150px;
margin: auto;
border-radius: 60%;
margin-bottom: 20px;
}

.main-table .row .second-col {
width: 80%;
border: 1px solid;
}

.main-table .row .footer {
width: 100%;
text-align: center;
}

.main-table .row .second-col .banner {
background-image: url("./images/Banner.jpg");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 100%;
height: 140px;
}

.main-table .row .second-col .content {
padding: 10px;
width: 100%;
}

.main-table .row .second-col .content div {
/* width: 100%; */
margin: 0;
}

.main-table .row .second-col .main-cv p {
text-align: left;
}