By GokiSoft.com| 21:11 18/10/2023|
Học HTML5 - CSS3

Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS BT2210

Liên kết rút gọn:

https://gokisoft.com/2210

Bình luận

avatar
TRẦN VĂN ĐIỆP [Teacher]
2021-03-11 12:40:59


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Hoc Excel Online</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="logo">
				<div class="align-center">
					<img src="https://news.iium.edu.my/wp-content/uploads/2018/10/D80FC082-E98D-46B1-A223-1A54EE459BB3.png">
				</div>
			</div>
			<div class="menu">
				<div class="align-center">
					<ul>
						<li><a href="vidu.html">Trang Chu</a></li>
						<li>Series Bai Viet</li>
						<li>Tai Nguyen</li>
						<li>Khoa Hoc</li>
						<li><a href="register.html">Dang Ky Tai Khoan</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="align-center">
			<div class="col-8">
				<h3>NHAP THONG TIN NGUOI DUNG</h3>
				<form method="post" onsubmit="return registerUser();">
					<div class="form-group">
						<label>User Name:</label>
						<input pattern="[a-zA-Z0-9]{3,25}" required="true" type="text" name="username" id="uname">
					</div>
					<div class="form-group">
						<label>Full Name:</label>
						<input required="true" type="text" name="fullname" id="fname">
					</div>
					<div class="form-group">
						<label>Password:</label>
						<input minlength="6" required="true" type="password" name="password" id="pwd">
					</div>
					<div class="form-group">
						<label>Confirm Password:</label>
						<input minlength="6" required="true" type="password" name="confirm-password" id="pwdConfirm">
					</div>
					<div class="form-group">
						<label>Email:</label>
						<input required="true" type="email" name="email" id="email">
					</div>
					<div class="form-group">
						<label></label>
						<button type="submit">Submit</button>
						<button type="reset">Reset</button>
					</div>
				</form>
			</div>
			<div class="col-4">
				<input type="text" class="search" name="s" placeholder="Tim kiem...">
				<h3>BAI VIET XEM NHIEU NHAT</h3>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<h4>FOLLOW GOKISOFT YOUTUBE CHANNEL</h4>
				<a href="https://www.youtube.com/channel/UCd8aIzwdaoQ_Abp3frmeZSA?sub_confirmation=1" target="_blank"><img src="http://assets.stickpng.com/images/5eb13e3a74bb7d0004ae6195.png" style="width: 100%"></a>
			</div>
		</div>
	</div>
	</div>

	<script type="text/javascript">
		function registerUser() {
			var pwd = document.getElementById('pwd').value
			var pwdConfirm = document.getElementById('pwdConfirm').value

			if(pwd == pwdConfirm){
				//register success
				alert('Dang ky tai khoan thanh cong!!!')
				return true
			}

			alert('Dang ky that bai!!!')
			return false;
		}
	</script>
</body>
</html>


#style.css


body {
	padding: 0px;
	margin: 0px;
}

.container {
	width: 100%;
}

.align-center {
	width: 80%;
	display: flex;
	margin: 0px auto;
}

.header {
	width: 100%;
}

.header .logo {
	width: 100%;
	margin-bottom: 10px;
}

.header .logo img {
	max-height: 70px;
}

.header .menu {
	width: 100%;
	background-color: #c13407;
	color: white;
}

.header .menu ul {
	display: flex;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.header .menu ul li {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: solid white 1px;
	cursor: pointer;
}


.header .menu ul li a {
	color: white;
	text-decoration: none;
}

.header .menu ul li:hover {
	background-color: grey;
}

.main {
	width: 100%;
	display: flex;
}

.col-8 {
	width: 66.67%;
	padding: 5px;
	text-align: justify;
}

.col-4 {
	width: 33.33%;
	padding: 5px;
	text-align: justify;
}

.search {
	width: 100%;
	background-color: #e4e3e3;
	color: white;
	border: none;
	font-size: 16px;
	padding: 5px;
}

.item {
	width: 100%;
	display: flex;
}

.col-5 {
	width: 50%;
	padding: 5px;
	text-align: justify;
}

.col-5 a {
	color: red;
}

.item-thumbnail {
	background-color: #32d4bd;
	padding: 20px;
	position: relative;
}

.item-thumbnail .title {
	color: white;
	background-color: black;
	font-size: 18px;
	padding: 10px;
	margin-top: 10px;
	width: fit-content;
}

.item-thumbnail .sub-title {
	color: white;
	background-color: black;
	font-size: 14px;
	padding: 5px;
	width: fit-content;
}

.item-thumbnail img.left{
	max-height: 40px;
	float: left;
	left: 0px;
	border-radius: 100%;
}

.item-thumbnail img.right{
	max-height: 40px;
	float: right;
	right: 0px;
}

.form-group {
	width: 100%;
	display: flex;
	margin-bottom: 5px;
}

.form-group label {
	width: 25%;
	text-align: right;
	padding-right: 8px;
}

.form-group input {
	width: 50%;
}

.form-group button {
	margin-right: 5px;
}


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>Hoc Excel Online</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="logo">
				<div class="align-center">
					<img src="https://news.iium.edu.my/wp-content/uploads/2018/10/D80FC082-E98D-46B1-A223-1A54EE459BB3.png">
				</div>
			</div>
			<div class="menu">
				<div class="align-center">
					<ul>
						<li><a href="vidu.html">Trang Chu</a></li>
						<li>Series Bai Viet</li>
						<li>Tai Nguyen</li>
						<li>Khoa Hoc</li>
						<li><a href="register.html">Dang Ky Tai Khoan</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="align-center">
			<div class="col-8">
				<h3>BAI VIET MOI NHAT</h3>
				<div class="item">
					<div class="col-5">
						<div class="item-thumbnail">
							<p class="title">Power Query</p>
							<p class="sub-title">Bo sao luu du lieu trong mot cot</p>
							<img class="left" src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png">
							<img class="right" src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png">
						</div>
					</div>
					<div class="col-5">
						<h4>Bai viet 1</h4>
						<p>
							Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3, đã được cách ly ngay sau khi nhập cảnh tại tỉnh Bình Dương. Kết quả xét nghiệm ngày 10-3 dương tính với SARS-CoV-2. Hiện các bệnh nhân được cách ly, điều trị tại Bệnh viện Đa khoa tỉnh Bình Dương.
						</p>
						<p>
							<a href="#">Read more...</a>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="col-5">
						<div class="item-thumbnail">
							<p class="title">Power Query</p>
							<p class="sub-title">Bo sao luu du lieu trong mot cot</p>
							<img class="left" src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png">
							<img class="right" src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png">
						</div>
					</div>
					<div class="col-5">
						<h4>Bai viet 1</h4>
						<p>
							Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3, đã được cách ly ngay sau khi nhập cảnh tại tỉnh Bình Dương. Kết quả xét nghiệm ngày 10-3 dương tính với SARS-CoV-2. Hiện các bệnh nhân được cách ly, điều trị tại Bệnh viện Đa khoa tỉnh Bình Dương.
						</p>
						<p>
							<a href="#">Read more...</a>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="col-5">
						<div class="item-thumbnail">
							<p class="title">Power Query</p>
							<p class="sub-title">Bo sao luu du lieu trong mot cot</p>
							<img class="left" src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png">
							<img class="right" src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png">
						</div>
					</div>
					<div class="col-5">
						<h4>Bai viet 1</h4>
						<p>
							Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3, đã được cách ly ngay sau khi nhập cảnh tại tỉnh Bình Dương. Kết quả xét nghiệm ngày 10-3 dương tính với SARS-CoV-2. Hiện các bệnh nhân được cách ly, điều trị tại Bệnh viện Đa khoa tỉnh Bình Dương.
						</p>
						<p>
							<a href="#">Read more...</a>
						</p>
					</div>
				</div>
			</div>
			<div class="col-4">
				<input type="text" class="search" name="s" placeholder="Tim kiem...">
				<h3>BAI VIET XEM NHIEU NHAT</h3>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<div class="item">
					<div class="col-4">
						<img src="https://i.pinimg.com/originals/2d/0f/50/2d0f50e8e4f6b233c7cf70b4bd36f89c.png" style="width: 100%">
					</div>
					<div class="col-8">
						Hai ca bệnh này từ Hoa Kỳ quá cảnh Hàn Quốc, sau đó nhập cảnh sân bay Tân Sơn Nhất ngày 10-3
					</div>
				</div>
				<h4>FOLLOW GOKISOFT YOUTUBE CHANNEL</h4>
				<a href="https://www.youtube.com/channel/UCd8aIzwdaoQ_Abp3frmeZSA?sub_confirmation=1" target="_blank"><img src="http://assets.stickpng.com/images/5eb13e3a74bb7d0004ae6195.png" style="width: 100%"></a>
			</div>
		</div>
	</div>
	</div>
</body>
</html>


avatar
Võ Như Việt [C2010L]
2021-03-10 17:01:45



body{
	padding: 0px;
	margin: 0px;
}
.container{
	width: 100%;
	display: block;
}
.header{
	width: 100%;
	display: block;
}
.header .logo{
	width: 100%;
	display: flex;
}
.header .logo .text{
	text-align: right;
	margin: 0px;
	padding: 0px;
}
.header .menu{
	width: 100%;
	display: flex;
	background-color: #d60640;
}
.header .menu ul{
	display: flex;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.header .menu ul li{
	padding-right: 10px;
	padding-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-right: solid black 1px;
	cursor: pointer;

}
.header .menu ul li:hover{
	background-color: blue;
}
.header .container-center{
	float: left;
	width: 100%;

}
.main{
	display: flex;
}
.main .main-left{
	width: 65%;
	float: left;
	border-right: solid white;
}
h1{
	color: #797994;
	padding: 10px;
}
.row{
	width: 100%;
	display: flex;
}
.col-4{
	padding: 5px;
	width: 40%;
	float: left;

}
.col-6{
	padding: 5px;
	width: 60%;
	float: left;
}
.col-6 .title{
	padding-bottom: 40px;
	font-family: cursive;
}
.main .main-right{
	width: 35%;
	padding: 0px;
	float: left;
}
.main .main-right .search{
	border: solid white 0px;
	width: 100%;
	display: flex;
}
.main .main-right .search input{
	width: 80%;
	padding: 0px;
	margin: 0px;
}
.main .main-right .search button{
	width: 20%;
	padding: 0px;
	margin: 0px;
}
.align-center {
	width: 70%;
	margin: 0px auto;
	display: flex;
}
.col-3{
	width: 25%;
	float: left;
	padding: 5px;
}
.col-9{
	width: 75%;
	padding-left: 5px;
	float: left;
}
.align-center1 {
	width: center;
	margin: 0px auto
}
.icon{
	display: flex;
	padding: 0px;
	margin: 0px;
}
.icon img{
	padding-left: 5px;
}
.youtube{
	width: 80%;

}
{
 	text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
}
.row .col-6 .getlink{
		padding-top: 15px; 
}
.row .col-6 .getlink a{
	text-decoration: none;
	color: red;
}


avatar
Võ Như Việt [C2010L]
2021-03-10 17:01:34



<!DOCTYPE html>
<html>
<head>
	<title>Web Học Excel Online</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="align-center">
				<div class="logo">
					<img src="https://www.hocexcel.online/default/hocexcel/user.png" style="width: 10%">
					<div class="text">
						<h2>HọcExcel.Online</h2>
						<h4>select*form[EXCEL]</h4>
					</div>
				</div>
			</div>
			<div class="align-center">
			<div class="menu">
				<ul>
					<li>Trang Chủ</li>
					<li>Series bài viết</li>
					<li>Tài Nguyên</li>
					<li>Khóa Học</li>
					<li>Công Cụ</li>
				</ul>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="align-center">
				 <div class="main-left">
				 	<div class="Stt">
				 		<h1>LATEST ARTICLES</h1>
				 	</div>
				 	<div class="row">
				 		<div class="col-4">
				 			<img src="https://hocexcel.online/caches/cc_large/cou_avatar/2017/07_15/77bfc7c846cf1b77e06324e2f2ce0fb5.png" style="width: 100%">
				 		</div>
				 		<div class="col-6">
				 			<div class="title">Power Query - Bỏ sao lưu dữ liệu trong một cột</div>
				 			<div>Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</div>
				 			<div class="getlink"><a href="">Continue reading....</a></div>
				 		</div>
				 	</div>
				 	<div class="row">
				 		<div class="col-4">
				 			<img src="https://hocexcel.online/caches/cc_large/cou_avatar/2017/07_15/77bfc7c846cf1b77e06324e2f2ce0fb5.png" style="width: 100%">
				 		</div>
				 		<div class="col-6">
				 			<div class="title">Power Query - Bỏ sao lưu dữ liệu trong một cột</div>
				 			<div>Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</div>
				 			<div class="getlink"><a href="">Continue reading....</a></div>
				 		</div>
				 	</div>
				 	<div class="row">
				 		<div class="col-4">
				 			<img src="https://hocexcel.online/caches/cc_large/cou_avatar/2017/07_15/77bfc7c846cf1b77e06324e2f2ce0fb5.png" style="width: 100%">
				 		</div>
				 		<div class="col-6">
				 			<div class="title">Power Query - Bỏ sao lưu dữ liệu trong một cột</div>
				 			<div>Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</div>
				 			<div class="getlink"><a href="">Continue reading....</a></div>
				 		</div>
				 	</div>
				 	<div class="row">
				 		<div class="col-4">
				 			<img src="https://hocexcel.online/caches/cc_large/cou_avatar/2017/07_15/77bfc7c846cf1b77e06324e2f2ce0fb5.png" style="width: 100%">
				 		</div>
				 		<div class="col-6">
				 			<div class="title">Power Query - Bỏ sao lưu dữ liệu trong một cột</div>
				 			<div>Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</div>
				 			<div class="getlink"><a href="">Continue reading....</a></div>
				 		</div>
				 	</div>
				 </div>
				 <div class="main-right">
				 	<div class="align-center1">
				 		<label><br><br></label>
				 	 <div class="search">
				 	 	<input type="text" name="s" placeholder="Search">
				 	 	<button><img src="https://images.vexels.com/media/users/3/132068/isolated/preview/f9bb81e576c1a361c61a8c08945b2c48-search-icon-by-vexels.png" width="20"></button>
				 	 </div>
				 <div><h2
				 		>BÀI VIẾT XEM NHIỀU NHẤT</h2></div>
				 <div class="row">
				 	<div class="col-3">
				 		<img src="https://freetuts.net/upload/learn_post/images/2020/04/22/126/excel-online.jpg" style="width: 100%">
				 	</div>
				 	<div class="col-9">
				 		<p>Hướng dẫn cách viết nhiều hàm IF lồng nhau bất kì trong Excel mới nhất 2021</p>
				 	</div>
				 </div>
				  <div class="row">
				 	<div class="col-3">
				 		<img src="https://freetuts.net/upload/learn_post/images/2020/04/22/126/excel-online.jpg" style="width: 100%">
				 	</div>
				 	<div class="col-9">
				 		<p>Hướng dẫn cách viết nhiều hàm IF lồng nhau bất kì trong Excel mới nhất 2021</p>
				 	</div>
				 </div>
				  <div class="row">
				 	<div class="col-3">
				 		<img src="https://freetuts.net/upload/learn_post/images/2020/04/22/126/excel-online.jpg" style="width: 100%">
				 	</div>
				 	<div class="col-9">
				 		<p>Hướng dẫn cách viết nhiều hàm IF lồng nhau bất kì trong Excel mới nhất 2021</p>
				 	</div>
				 </div>
				 <div class="row">
				 	<div class="col-3">
				 		<img src="https://freetuts.net/upload/learn_post/images/2020/04/22/126/excel-online.jpg" style="width: 100%">
				 	</div>
				 	<div class="col-9">
				 		<p>Hướng dẫn cách viết nhiều hàm IF lồng nhau bất kì trong Excel mới nhất 2021</p>
				 	</div>
				 </div>
				 <div class="icon">
				 	<img src="http://bagiang.com/wp-content/uploads/2019/02/icon-facebook.png" width="40px">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Gmail_icon_%282020%29.svg/768px-Gmail_icon_%282020%29.svg.png"width="50px">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1024px-YouTube_full-color_icon_%282017%29.svg.png"width="50px">
				 </div>
				 <div><h1>FOLLOW KÊNH YOUTUBE</h1></div>
				 <div class="youtube"><a href="http://youtube.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQV8U1fnbjDZSK1TejWdYT2A8YZ4A4mvzuM5Q&usqp=CAU"></a></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>


avatar
Đào Mạnh Dũng [C2010L]
2021-03-10 06:37:09


#icon.png


https://res.cloudinary.com/wegoup/image/upload/v1615358213/kgekjjv9dmuaoopkjqmn.png


#hocexcel.html


<!DOCTYPE html>
<html>
<head>
	<title>hoc excel online</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="head">
		<img src="icon.png" class="icon">
		<div class="menu">
			<table>
				<tr>
					<th>
						&#x1F3E0; Trang chủ v
					</th>
					<th>
						Serier bài viết v
					</th>
					<th>
						Tài nguyên v
					</th>
					<th>
						KHóa Học v
					</th>
					<th>
						Công cụ v
					</th>
				</tr>
			</table>
		</div>
	</div>
	 
		 
	<div style="display: flex;margin-left: 100px;width: 80%;">
		<div class="main-left">
			<h2 style="color: #4cbf6f">LATEST ARTICLES</h2>

			<div style="display: flex; margin-top: 10px;">
				 <div class="img">
					<h3>Power Query</h3>
					<h4>bộ sao lưu dữ liệu trong cột</h4>
					<img src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png" width="45px" style="margin-left: 300px;margin-top:60px;">
				</div> 
				<div class="read">
					<div style="font-size: 20px;margin-bottom: 50px;">Power Quer - bộ sao lưu dữ liệu trong cột</div> 
					 
					<p>Theo đánh giá của nhiều cư dân mạng qua ảnh thì có vẻ như SOD không chuẩn bị kỹ lắm, bởi bộ áo dài này có vẻ là áo dài sẵn chứ không phải áo may đo. Bằng chứng là bộ đồ mà Ran Sakita rộng thùng thình và không vừa với thân hình của cô gái 2 dòng máu này chút nào. Đây cũng là điều  hiểu, bởi ở Nhật may đo áo dài xem chừng hơi khó khăn trong thời điểm dịch bệnh đang hoành hành.</p>
					 
					<div style="color: red ">continue reading...</div>

				</div>
			</div>
			<div style="display: flex; margin-top: 20px;">
				 <div class="img">
					<h3>Power Query</h3>
					<h4>bộ sao lưu dữ liệu trong cột</h4>
					<img src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png" width="45px" style="margin-left: 300px;margin-top:60px;">
				</div> 
				<div class="read">
					<div style="font-size: 20px;margin-bottom: 50px;">Power Quer - bộ sao lưu dữ liệu trong cột</div> 
					 
					<p>Theo đánh giá của nhiều cư dân mạng qua ảnh thì có vẻ như SOD không chuẩn bị kỹ lắm, bởi bộ áo dài này có vẻ là áo dài sẵn chứ không phải áo may đo. Bằng chứng là bộ đồ mà Ran Sakita rộng thùng thình và không vừa với thân hình của cô gái 2 dòng máu này chút nào. Đây cũng là điều  hiểu, bởi ở Nhật may đo áo dài xem chừng hơi khó khăn trong thời điểm dịch bệnh đang hoành hành.</p>
					 
					<div style="color: red ">continue reading...</div>

				</div>
			</div>
			<div style="display: flex; margin-top: 20px;">
				 <div class="img">
					<h3>Power Query</h3>
					<h4>bộ sao lưu dữ liệu trong cột</h4>
					<img src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png" width="45px" style="margin-left: 300px;margin-top:60px;">
				</div> 
				<div class="read">
					<div style="font-size: 20px;margin-bottom: 50px;">Power Quer - bộ sao lưu dữ liệu trong cột</div> 
					 
					<p>Theo đánh giá của nhiều cư dân mạng qua ảnh thì có vẻ như SOD không chuẩn bị kỹ lắm, bởi bộ áo dài này có vẻ là áo dài sẵn chứ không phải áo may đo. Bằng chứng là bộ đồ mà Ran Sakita rộng thùng thình và không vừa với thân hình của cô gái 2 dòng máu này chút nào. Đây cũng là điều  hiểu, bởi ở Nhật may đo áo dài xem chừng hơi khó khăn trong thời điểm dịch bệnh đang hoành hành.</p>
					 
					<div style="color: red ">continue reading...</div>

				</div>
			</div>
			<div style="display: flex; margin-top: 20px;">
				 <div class="img">
					<h3>Power Query</h3>
					<h4>bộ sao lưu dữ liệu trong cột</h4>
					<img src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png" width="45px" style="margin-left: 300px;margin-top:60px;">
				</div> 
				<div class="read">
					<div style="font-size: 20px;margin-bottom: 50px;">Power Quer - bộ sao lưu dữ liệu trong cột</div> 
					 
					<p>Theo đánh giá của nhiều cư dân mạng qua ảnh thì có vẻ như SOD không chuẩn bị kỹ lắm, bởi bộ áo dài này có vẻ là áo dài sẵn chứ không phải áo may đo. Bằng chứng là bộ đồ mà Ran Sakita rộng thùng thình và không vừa với thân hình của cô gái 2 dòng máu này chút nào. Đây cũng là điều  hiểu, bởi ở Nhật may đo áo dài xem chừng hơi khó khăn trong thời điểm dịch bệnh đang hoành hành.</p>
					 
					<div style="color: red ">continue reading...</div>

				</div>
			</div>
			<div style="display: flex; margin-top: 20px;">
				 <div class="img">
					<h3>Power Query</h3>
					<h4>bộ sao lưu dữ liệu trong cột</h4>
					<img src="https://cdn.iconscout.com/icon/free/png-512/microsoft-excel-4-722715.png" width="45px" style="margin-left: 300px;margin-top:60px;">
				</div> 
				<div class="read">
					<div style="font-size: 20px;margin-bottom: 50px;">Power Quer - bộ sao lưu dữ liệu trong cột</div> 
					 
					<p>Theo đánh giá của nhiều cư dân mạng qua ảnh thì có vẻ như SOD không chuẩn bị kỹ lắm, bởi bộ áo dài này có vẻ là áo dài sẵn chứ không phải áo may đo. Bằng chứng là bộ đồ mà Ran Sakita rộng thùng thình và không vừa với thân hình của cô gái 2 dòng máu này chút nào. Đây cũng là điều  hiểu, bởi ở Nhật may đo áo dài xem chừng hơi khó khăn trong thời điểm dịch bệnh đang hoành hành.</p>
					 
					<div style="color: red ">continue reading...</div>

				</div>
			</div>
		</div>
		<div class="menu-right">
			<input type="text" class="input" placeholder="search">
			<h1>bài viết xem nhiều nhất</h1>

			<div style="display: flex;margin-bottom: 10px;">
				<img src="https://miro.medium.com/max/1250/1*NYuxFs24204g0tNXSRYJUA.jpeg" width="100px">
				<div style="width: 43%;margin-left: 10px;">
					Dịch chen tức là lấy các chap khác của nhóm khác về rồi dịch đè vào chap mới nhất
				</div>
			</div>

			<div style="display: flex;margin-bottom: 10px;">
				<img src="https://miro.medium.com/max/1250/1*NYuxFs24204g0tNXSRYJUA.jpeg" width="100px">
				<div style="width: 43%;margin-left: 10px;">
					Dịch chen tức là lấy các chap khác của nhóm khác về rồi dịch đè vào chap mới nhất
				</div>
			</div>

			<div style="display: flex;margin-bottom: 10px;">
				<img src="https://miro.medium.com/max/1250/1*NYuxFs24204g0tNXSRYJUA.jpeg" width="100px">
				<div style="width: 43%;margin-left: 10px;">
				Dịch chen tức là lấy các chap khác của nhóm khác về rồi dịch đè vào chap mới nhất
				</div>
			</div>

			<div style="display: flex;margin-bottom: 10px;">
				<img src="https://miro.medium.com/max/1250/1*NYuxFs24204g0tNXSRYJUA.jpeg" width="100px">
				<div style="width: 43%;margin-left: 10px;">
				Dịch chen tức là lấy các chap khác của nhóm khác về rồi dịch đè vào chap mới nhất
				</div>
			</div>

			<div style="display: flex;margin-bottom: 10px;">
				<img src="https://miro.medium.com/max/1250/1*NYuxFs24204g0tNXSRYJUA.jpeg" width="100px">
				<div style="width: 43%;margin-left: 10px;">
					Dịch chen tức là lấy các chap khác của nhóm khác về rồi dịch đè vào chap mới nhất
				</div>
			</div>


			<div class="anhicon">
				<img src="http://bagiang.com/wp-content/uploads/2019/02/icon-facebook.png" width="40px">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Gmail_icon_%282020%29.svg/768px-Gmail_icon_%282020%29.svg.png"width="50px">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/1024px-YouTube_full-color_icon_%282017%29.svg.png"width="50px">
			</div>

			<h3>FOLLOW KÊNH YOUTUBE CỦA THANH</h3>
			<br>
			<div>
				<img src="https://verst.com.my/wp-content/uploads/2019/12/Youtube-Subscribe-Button2.png" width="300px">
			</div>

		</div>
	</div>
</body>
</html>


#style.css


.icon{
	width: 400px;
	margin-left: 90px;
}
.menu{
	background-color: #c83b4c;
	color: white;
	
	
}
.menu table {
	margin-left: 100px;
	
}
.menu table th {
	margin-left: 60px;
	border-right: solid 1px #5a111a;
	padding: 15px;
}
.menu table th:hover {
	background-color: #5a111a;
}
.main-right input{
	width: 100%;

}
.main-right{
	width: 20%
	margin-left:10px; 

}
.main-left{
	width: 80%;
}
.input{
	padding-right: 200px;
	padding-left: 9px;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-top:10px;
	background-color: lightgrey;
	border-radius: 5px;
	border: none;
}
.img{
	background-color: #7fd4b8;
	 
	width:45%;
	padding-bottom: 10px;
	padding-right: 8px;
}
.img h3,h4{
	color: white;
	background-color: black;
	padding-bottom: 6px;
	padding-right: 30px;
	margin-left: 10px;
	margin-right: 87px;
}
.read{
	margin-left: 10px;
}
.anhicon img{
 	margin-right: 25px;
}


avatar
Nguyễn Minh Hiếu [community,C2010L]
2021-03-09 16:49:01


#excel.png


https://res.cloudinary.com/wegoup/image/upload/v1615308536/f9cq0hqk3mgwucxvryz1.png


#index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="head">
            <img src="excel.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href=""><i class="fa fa-home"></i>Trang chủ</a></li>
                <li>
                    <a href="">Series bài viết</a>
                </li>
                <li>
                    <a href="">Tài nguyên</a>
                </li>
                <li>
                    <a href="">Khóa học</a>
                </li>
                <li>
                        <a href="">Công cụ</a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="left">
                <div class="title">
                    <h1>latest articles</h1>
                </div>
                <div class="topic">
                    <div class="left-img">
                        <img src="vidu.png" alt="">
                    </div>
                    <div class="left-content">
                        <h3>Power Query – Bỏ sao lưu dữ liệu trong một cột</h3>
                        <p>Power Query – Bỏ sao lưu dữ liệu trong một cột
                            Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</p>
                        <a href="">Continue reading</a>
                    </div>
                </div>

                <div class="topic">
                    <div class="left-img">
                        <img src="vidu.png" alt="">
                    </div>
                    <div class="left-content">
                        <h3>Power Query – Bỏ sao lưu dữ liệu trong một cột</h3>
                        <p>Power Query – Bỏ sao lưu dữ liệu trong một cột
                            Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</p>
                        <a href="">Continue reading</a>
                    </div>
                </div>

                <div class="topic">
                    <div class="left-img">
                        <img src="vidu.png" alt="">
                    </div>
                    <div class="left-content">
                        <h3>Power Query – Bỏ sao lưu dữ liệu trong một cột</h3>
                        <p>Power Query – Bỏ sao lưu dữ liệu trong một cột
                            Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</p>
                        <a href="">Continue reading</a>
                    </div>
                </div>

                <div class="topic">
                    <div class="left-img">
                        <img src="vidu.png" alt="">
                    </div>
                    <div class="left-content">
                        <h3>Power Query – Bỏ sao lưu dữ liệu trong một cột</h3>
                        <p>Power Query – Bỏ sao lưu dữ liệu trong một cột
                            Chắc hẳn bạn cũng đã có một lần vướng mắc vì  
                            kiểu định dạng dữ liệu khá phổ biến và khó chịu trong Power Query là dữ liệu được xếp chồng lên nhau trong một cột. 
                            Trong bài viết này, Học Excel …</p>
                        <a href="">Continue reading</a>
                    </div>
                </div>
            </div>
            <div class="right">
               <div class="task-search">
                    <input type="text" placeholder="Search">
                    <button><i class="fa fa-search"></i></button>
               </div>
               <div class="right-list">
                    <div class="title">
                       <h2>bài viết xem nhiều nhất </h2>
                    </div>
                    <div class="topic">
                        <div class="right-img">
                           <img src="text.jpg" alt="">
                        </div>
                        <div class="right-content">
                           <a href="">
                            Hướng dẫn tính thuế thu nhập cá nhân với tiền thưởng Tết
                           </a>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="right-img">
                            <img src="text.jpg" alt="">
                        </div>
                        <div class="right-content">
                            <a href="">
                             Hướng dẫn tính thuế thu nhập cá nhân với tiền thưởng Tết
                            </a>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="right-img">
                            <img src="text.jpg" alt="">
                        </div>
                        <div class="right-content">
                            <a href="">
                            Hướng dẫn tính thuế thu nhập cá nhân với tiền thưởng Tết
                            </a>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="right-img">
                            <img src="text.jpg" alt="">
                        </div>
                        <div class="right-content">
                            <a href="">
                             Hướng dẫn tính thuế thu nhập cá nhân với tiền thưởng Tết
                            </a>
                        </div>
                    </div>
                    <div class="topic">
                        <div class="right-img">
                            <img src="text.jpg" alt="">
                        </div>
                        <div class="right-content">
                            <a href="">
                             Hướng dẫn tính thuế thu nhập cá nhân với tiền thưởng Tết
                            </a>
                        </div>
                    </div>
                    <div class="logo">
                        <i class="fa fa-facebook-square"></i>
                        <i class="fa fa-youtube-square"></i>
                        <i class="fa fa-envelope-square"></i>
                    </div>
                    <div class="youtube">
                        <h2>follow keeh youtube của mình</h2>
                        <a href="" id="follow"><img src="youtube.png" alt=""></a>
                    </div>
               </div>
            </div>
        </div>
    </div>
</body>
</html>


#style.css


*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
}
.container{
    display: block;
    width: 1200px; 
    margin: 0px auto;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
.container .head{
    width: 1200px;
    background-color: #8080804d;
}
.head img{
    width: 30%;
    margin-left: 200px;
    margin-top: 20px;
}
.container .nav{
    background-color: #c83b4c;
    margin-top: -16px;
}

.container .nav ul{
    display: flex;
    line-height: 20px;
}
.container .nav ul li{
    padding: 10px 20px;
}
.container .nav li a{
    color: #ffffff;
    font-size: 20px;

}
i.fa.fa-home {
    padding-right: 10px;
}

.nav ul li:hover{
    background-color: #c43232;
}

.main{
    width: 1200px;
}
.main .left{
    width: 70%;
    float: left;
    margin-top: -16px;
}
.left .topic{
    display: flex;
    margin-left: 20px;
    margin-bottom: 30px;
}
.left .title h1{
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 20px;
}
.topic .left-content{
    line-height: 1.5;
    margin-left: 15px;
    margin-right: 10px;
}
.left-content h3{
    margin-top: 0px;
    font-size: 18px;
}
.left-content p{
    font-size: 15px;
}
.left-content a{
    color: #c83b4c;
    font-size: 17px;
}
.main .right{
    width: 30%;
    float: left;
    margin-top: -16px;
}
.right input{
    width: 85%;
    height: 50px;
    margin-top: 25px;
    margin-left: 25px;
    background-color: #eee;
    outline: none;
    border: none;
    border-radius: 3px;
    padding-left: 15px;
}
.right button{
    width: 10%;
    height: 30px;
    margin-left: -52px;
    outline: none;
    border: none;
}
.right i.fa.fa-search{
    font-size: 20px;
    color: #908a8a;
}
.right-list .title h2{
    margin-left: 25px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 21px;
}
.right-list .topic{
    margin-left: 25px;
    display: flex;
    margin-bottom: 20px;
}
.right-list .right-content{
    margin-left: 10px;
    margin-right: 25px;
    line-height: 1.3;
}
.right-content a{
    font-size: 17px;
    color: black;
    font-weight: bold;
}
.right-content a:hover{
    color: #c83b4c;
}
.right-list .logo{
    margin-left: 25px;
}
.logo i{
    font-size: 40px;
    margin-right: 20px;
}
i.fa.fa-facebook-square{
    color:#2424a3eb;
}
i.fa.fa-youtube-square{
    color: #ed1a1a;
}
i.fa.fa-envelope-square{
    color:#3838efeb;
}
.right-list .youtube{
    margin-right: 25px;
}
.right-list .youtube #follow img{
    margin-left: 25px;
    width: 80%;
}
.right-list .youtube h2{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    margin-left: 25px;
}


#text.jpg


https://res.cloudinary.com/wegoup/image/upload/v1615308536/ldyembt2vxcykgqnz2cp.jpg


#vidu.png


https://res.cloudinary.com/wegoup/image/upload/v1615308537/nzprpsy6glxubeeuukf4.png


#youtube.png


https://res.cloudinary.com/wegoup/image/upload/v1615308539/votfqluyzye8zzfhia96.png