Code HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/themify-icons/themify-icons.css">
<link rel="stylesheet" href="css/h.css">
</head>
<body>
<div id="nav">
<center>
<img src="images/hbt.jpg" width="200px" height="300px" alt="Bùi Thanh Huấn">
<br/>
<strong>Bùi Thanh Huấn</strong>
</center>
<ul>
<li><a href="#ttchung">Thông tin chung</a> </li>
<li><a href="#hoc-tap">Quá đào tạo</a></li>
<li><a href="#kinh-nghiem">Kinh nghiệm làm việc</a></li>
<li><a href="#lien-ket">Liên kết</a></li>
</ul>
<div id="video">
<iframe width="225" height="300" src="https://www.youtube.com/embed/3sOHjch3few" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<audio width="225" controls src="images/5c8482a753e8c.mp3"></audio>
</div>
</div>
<div id="main">
<h1 id="ttchung">Thông tin chung <i class="ti-angle-down"></i></h1>
<p><b>Họ và tên:</b> <b>BÙI THANH HUẤN</b></p>
<p><b>Trình độ:</b> Cao đẳng</p>
<p><b>Chức vụ:</b> Giáo viên</p>
<p><b>Email:</b> <a href="mailto:thanhhuanhb@gmail.com">thanhhuanhb@gmail.com</a></p>
<p><b>Website:</b> <a href="http://huanbuithanh.blogspot.com">huanbuithanh.blogspot.com</a></p>
<p><b>Đơn vị công tác:</b> Trường THCS xã Nậm Cần - Tân Uyên - Lai Châu</p>
<h1 id="hoc-tap"> Quá trình đào tạo <i class="ti-angle-down"></i></h1>
<ul>
<li>Năm 2010 - 2014: Cao đẳng tin học - CĐCN Việt Đức - Thái Nguyên</li>
<li>Năm 2021: Đại học sư phạm tin - trường đại học Thái Nguyên</li>
</ul>
<h1 id="kinh-nghiem"> Kinh nghiệm làm việc <i class="ti-angle-down"></i></h1>
<ul>
<li>Là giảng viên bộ môn tin học giảng dạy tại nhiều đơn vị trên cả nước.</li>
<li>5 năm kinh nghiệm trong nghề tin học ứng dụng.</li>
<li>Có kinh nghiệm làm việc tại nhiều sở ban nghành, đạt nhiều giải thưởng về tin học</li>
</ul>
<h1 id="lien-ket"> Liên Kết <i class="ti-angle-down"></i></h1>
<ul>
<li><a href="login.html"> Đăng nhập hệ thống</a></li>
</ul>
</div>
<main>
</main>
</div>
</body>
</html>
Code CSS:
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
height: 900px;
max-width: 1140px;
border: 1px solid gray;
margin: 0 auto;
}
footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
#nav {
background: #f5f5f5;
float: left;
width: 20%;
height: 900px;
margin: 0;
padding-left: 1em;
}
#nav img {
padding: 12px;
}
#nav strong {
font-size: 20pt;
}
#nav ul {
list-style-type: none;
padding: 0;
}
#nav li {
font-size: 16pt;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10pt;
line-height: 16pt;
}
#nav li:hover {
background-color: #eee !important;
color: #000 !important;
}
#nav ul a {
text-decoration: none;
font-size: 16pt;
}
#nav li {
border-bottom: 1px dotted #000;
}
#main {
height: 900px;
margin-left: 170px;
padding: 1em;
overflow: hidden;
}
#main h1 {
background-color: #eee;
text-transform: uppercase;
font-size: 16pt;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
border-radius: 10px;
}
#main p {
margin-left: 35px;
}
#main li {
margin: 10px;
}