From fbed73c2c7b56174a978bfe5e08e1010c9d92c02 Mon Sep 17 00:00:00 2001 From: hangochieu1212 <69467861+hangochieu1212@users.noreply.github.com> Date: Thu, 16 Nov 2023 17:30:09 +0700 Subject: [PATCH] initial commit --- index.html | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 244 insertions(+), 7 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 4ad4ffff6..bdaab87b6 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,124 @@ - - - - Static Template + + + + Infomation + - -

This is a static template, there is no bundler or bundling involved!

+ +

Danh sách bài tập

+
+
+
+ hieu +

Hà Ngọc Hiếu AT150218

+
+
+ +
+
+
+
+

Bài tập 1

+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ 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). +
+ +
+
+
+
+
+
+
+ +
+
+ - \ No newline at end of file + diff --git a/style.css b/style.css new file mode 100644 index 000000000..eb0843bcd --- /dev/null +++ b/style.css @@ -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; +}