IMG-LOGO
Trang Chủ Học Bootstrap Thiết kế web bán rau củ quả - t010.gokisoft.com
×

Lý Thuyết

01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap

Bài Tập

Bài 1 - Tạo website bằng bootstrap 4 Thiết kế website -> Su dung Bootstrap 4 Thiết kế web bán rau củ quả - t010.gokisoft.com Bài tập - Thiết kế website sử dụng Bootstrap/jQuery Bài tập - Thiết kế trang web báo dân trí

Examination & Test

TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery

Source Code Chia Sẻ

[Share Code] Tìm hiểu bootstrap Bài 2 - Tạo website bằng bootstrap - Lập trình bootstrap/jquery [Share Code] Tìm hiều bootstrap - Lập trình Bootstrap/jQuery [Share Code] Tìm hiểu Bootstrap - jQuery - Lập trình Bootstrap/jQuery [Share Code] Hướng dẫn tìm hiểu Bootstrap/jQuery [Share Code] Tìm hiểu bootstrap - Lập trình Bootstrap/jQuery - Hoc Bootstrap [Share Code] Tìm hiểu về Bootstrap + jQuery - Viết chương trình quản lý sản phẩm

Tài Liệu Học

Bootstrap 4 - Giới Thiệu Bootstrap 4 Containers Bootstrap 4 Grids Bootstrap 4 Text/Typography Bootstrap 4 Colors Bootstrap 4 Tables Bootstrap 4 Images Bootstrap 4 Jumbotron Bootstrap 4 Alerts Bootstrap 4 Buttons Bootstrap 4 Button Groups Bootstrap 4 Badges Bootstrap 4 Progress Bars Bootstrap 4 Spinners Bootstrap 4 Pagination Bootstrap 4 List Groups Bootstrap 4 Cards Bootstrap 4 Dropdowns Bootstrap 4 Collapse Bootstrap 4 Navs Bootstrap 4 Navigation Bar Bootstrap 4 Forms Bootstrap 4 Form Inputs Bootstrap 4 Inputs Group Bootstrap 4 Custom Forms Bootstrap 4 Carousel Bootstrap 4 Modal Bootstrap 4 Tooltip Bootstrap 4 Popover Bootstrap 4 Toast Bootstrap 4 Scrollspy (Advanced) Bootstrap 4 Utilities Bootstrap 4 Flex Bootstrap 4 Icons Bootstrap 4 Media Objects Bootstrap 4 Filters (Advanced) Bootstrap 4 - Form đăng ký tài khoản người dùng




Thiết kế web bán rau củ quả - t010.gokisoft.com

by TRẦN VĂN ĐIỆP - 14:35 31/12/2020 2,749 Lượt Xem

Thiết kế web bán rau củ quả - https://t010.gokisoft.com/

Theo dõi cập nhật nội dung học trên Youtube & Facebook


Bình luận



Chia sẻ từ lớp học

Do Trung Duc [T2008A]

Ngày viết: 23:40 15/11/2020


#vegetable_store.css


body{
	background: white;
}

.header{
	width: 100%;
	background-color: #80bb35;
	font-size: 14px;
	color: white;
	font-weight: bold;
	padding: 15px 0px;
	display: flex;
}

.header ul{
	display: flex;
	 list-style-type: none; 
	 margin-bottom: 0px;
	 margin-left: 2%;
	 width: 100%;
}
.header li{
	text-align: center;
}


.header_2{
	width: 90%;
	background-color: white;
	padding: 30px 0px;
	margin:0 auto;
	display: flex;
	font-size: 14px;
}

.header_2 .col-lg-8 .col-lg-4{
	display: flex;
	padding: 0px;
}


.header_2 .col-lg-1{
	margin-top: 2%;
	padding: 0px;
}

.header_2 .col-lg-1 a{
	background-color: orange;
	padding: 5% 10%;
	border-radius: 5px;
}


.header_2 .col-lg-8 {
	display: flex;
	margin-top: 2%;
}



/*THANH MENu*/
.menu{
	background-color: #80bb35;
	
}

.menu nav{
	padding-top: 0px;
	padding-bottom: 0px;

}
.menu ul{
	margin-left: 3.5%;
	width: 70%
}

.menu ul li{
	margin-left: 2%
	color:white;
}

.menu ul li a{
	padding-top: 15px;
	padding-bottom: 15px;
	color: white;
}

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

.menu a{
	font-size: 16px;
	font-weight: bold;
	color: white;
}

/*MAIN MENU TRÁI*/

.main{
	margin: 0 auto;
	margin-top: 1.5%
}

.left-menu a{
	color: black !important;
	padding-top: 8px;
	padding-bottom: 8px;
}

.left-menu span{
	padding-top: 8px;
	padding-bottom: 8px;
}

.left-menu a:hover{
	color: #80bb35 !important;
}
/*
SLIDE IMG*/
.carousel img{
	max-height: 450px;

}

.main .col-lg-9 .col-lg-6{
	float: left;
	margin-top: 2%;
	padding-left: 5px;
	padding-right: 5px;
}



.main .col-lg-9 .col-lg-6 img{
	max-width: 100%;
	border-radius: 20px;

}


/*PRODUCT*/

.product {
	margin-top: 2%;
}

.product img {
	max-width: 100%;
}

.title{
	padding-bottom: 1%;
}

.title span:first-child{
	color: white;
	background-color: #80bb35;
	padding: 1% 3%;
	border-radius: 20px;
	font-weight: bold;
}

.title span:last-child{
	color: black;
	margin-left: 72%;
	
}

.title span:last-child a{
	font-weight: bold;
	color: #80bb35;
	text-decoration: none;
	border-bottom: 2px solid #80bb35;
	font-size: 13px;
}

.product .col-lg-3 {
	text-align: center;
float: left;
margin-top: 1%;
}

.product .col-lg-3 .sale {
	width: 20%;
	background: orange;
	height: 8%;
	position: absolute;
	top: 5%;
}

.product .col-lg-3 .buy_hover {
	width: 89%;
	height: 20%;
	position: absolute;
	top: 40%;
	background-color: white;
	align-items: center;
	display: none;
	opacity: 0.8;
}

.product .col-lg-3 .buy_hover i {
	margin-top: 8%;
	padding: 2%;

}

.product .col-lg-3:hover .buy_hover{
	display: block;
	
}

.product .col-lg-3 .card a{
	color: black;
}
.product .col-lg-3 .card p span:first-child{
	color: orange;
}


/*TIN TUC*/
.new{
	border-top:  solid 2px orange;
	margin-top: 5%;
	padding: 0px;
	/*position: relative;*/
	text-align: center;
}
.new a{
	color: white;
	background-color: #80bb35;
	padding: 0px;
	/*position: absolute;*/
	/*left: 45%;*/
	/*bottom: 25%;*/
	padding: 1% 3%;
	border-radius: 15px;
}

.food_new .col-lg-4 .card{
	text-align: center;
}

.food_new .col-lg-4 .card .btn{
	background: #80bb35;
}
.food_new .col-lg-4 .card img{
	width: 100%;
	height: 200px;
}


/*FOOTER*/

 .footer{
 	background-color: #80bb35;
 	display: flex;
 	padding: 5% 5%;
 	margin-top: 3%;
 }

  .footer .list-group {
 	background-color: #80bb35;
 	border: none;
 	color: white;
 }

 .footer .list-group li{
 	background-color: #80bb35;
 	border: none;
 	color: white;
 	font-size: 25px;
 	padding: 0px;
 }

  .footer .list-group li i{
 	color: orange;
 	padding-right: 1%;
 }

   .footer .list-group li  a{
 	color: white;
 	font-size: 16px;
 }






































/*CSS CHO SMART PHONE*/

@media only screen and (max-width: 600px) {
  .header {
   display: none;
  }




}


#vegetable_store.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="vegetable_store.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<div class="topbar header">
		<ul >
			<li>
				<i class="fas fa-mobile-alt"></i>
				Điện thoại: 093 - 39 08 568
			</li>
			<li style="margin-left: 3%">
				<i class="far fa-envelope"></i>
				<a style="color: white;text-decoration: none;" href="mailto:[email protected]">Email: [email protected]</a>
			</li>
			<li style="margin-left: 48%">
				<i class="fas fa-user"></i>
				<a style="color: white" href="#">Đăng nhập</a>
			</li>
		</ul>
	</div>

	<div class=" row header_2">
		<div class="col-lg-3 ">
			<img style="width: 100%" src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325791/logo_wem2z6.png">
		</div>

		<div class="col-lg-8 ">
			<div class="col-lg-4 ">
				<div style="width: 20%;">
					<img style="width: 100%; margin-top: 10%"  src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy1-0x0.png">
				</div>
				<div style="width: 80%">
					<a style="color: black" href="">Miễn phí vận chuyển</a> 
					<label>Bán kính 100km</label>
				</div>
			</div>

			<div class="col-lg-4 ">
				<div style="width: 20%;">
					<img style="width: 100%;"  src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy2-0x0.png">
				</div>
				<div style="width: 80%">
					<a style="color: black" href="">Hỗ trợ 24/7</a> 
					<label>Hotline: 093 - 39 08 568</label>
				</div>
			</div>

			<div class="col-lg-4 ">
				<div style="width: 20%;">
					<img style="width: 100%; "  src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy3-0x0.png">
				</div>
				<div style="width: 80%">
					<a style="color: black;" href="">Giờ làm việc</a> 
					<label>T2 - T7 Giờ hành chính</label>
				</div>
			</div>

		</div>
		<div class="col-lg-1 ">
			<div><a ><i class="fa fa-shopping-bag"></i> Giỏ hàng</a></div>
		</div>
	</div>

	<!-- THANH MENU -->
	<div class="menu"> <!-- THANH MENU START -->
		<nav class="navbar navbar-expand-sm">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="#">Trang Chủ</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Rau An Toàn</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Thủy Hản Sản</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Thực Phẩm Tươi Sống</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Công thức món ăn</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Liên hệ</a>
				</li>
			</ul>
			<form class="form-inline" action="/action_page.php">
				<div class="input-group">
					<input type="text" class="form-control" placeholder="Tìm kiếm">
					<div class="input-group-prepend">
						<span style="background-color: white;" class="input-group-text"><a style="color:black" href=""><i style="border: none" class="fas fa-search"></i></a></span>
					</div>
				</div>
			</form>
		</nav>
	</div> <!-- THANH MENU END -->

	<!-- MAIN MENU TRÁI -->
	<div class="container row main">
		<div class="col-lg-3 left-menu">
			<div class="list-group">
				<span class="list-group-item" style="color: white; font-size: 17px; background: #80bb35; border-radius: 30px; font-weight: bolder;">DANH MỤC SẢN PHẨM</span>
				<a href="#" class="list-group-item ">Rau an toàn</a>
				<a href="#" class="list-group-item ">Thủy hản sản</a>
				<a href="#" class="list-group-item ">Thực phẩm tươi sống</a>
				<a href="#" class="list-group-item ">Thực phẩm chế biến</a>
				<a href="#" class="list-group-item ">Thực phẩm đóng hộp</a>
			</div>
		</div> <!-- MENU TRÁI END -->

		<!-- SLIDE IMG -->
		<div class="col-lg-9"> 
			<div id="demo" class="carousel slide" data-ride="carousel">
				<!-- The slideshow -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325834/25_qogym7_b08t8n.jpg" alt="Los Angeles">
					</div>
					<div class="carousel-item">
						<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325845/23_xtvbv1_ds5vlx.jpg" alt="Chicago">
					</div>
				</div>

				<!-- Left and right controls -->
				<a class="carousel-control-prev" href="#demo" data-slide="prev">
					<span class="carousel-control-prev-icon"></span>
				</a>
				<a class="carousel-control-next" href="#demo" data-slide="next">
					<span class="carousel-control-next-icon"></span>
				</a>
			</div>

			<div class="col-lg-6">
				<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325868/bn1-0x0_umuelv.png">
			</div>

			<div class="col-lg-6">
				<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325882/bn2-0x0_xjvsmb.jpg">
			</div>
		</div>

		<div class="container-fluid product">
			<!-- SẢN PHẨM BÁN CHẠY -->
			<div class="row title">
				<span>SẢN PHẨM BÁN CHẠY</span>
				<span><a href="">Xem tất cả</a></span>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>


			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>

			<div class="col-lg-3">
				<div class="card">
					<img class="card-img-top" src="https://hatgiongdalat.com/asset/upload/image/hat-giong-bap-cai-chiu-nhiet_(1).jpg?v=20190410" alt="Card image">
					<div class="card-body">
						<a href="#">Bắp cải (Rau sạch) </a>
						<p><span>5.000đ</span> <span><del>10.000đ</del></span></p>
					</div>
				</div>
				<div class="sale">-40%</div>
				<div class="buy_hover">
					<a href=""><i title="Xem" class="far fa-eye"></i></a>
					<a href=""><i title="Mua" class="fas fa-shopping-bag"></i></a>
				</div>
			</div>
		</div>  <!-- SAN PHAM BAN CHAY END -->

		<!-- TIN  TUC -->
		<div class="container new">
			<a href="">TIN TỨC</a>
		</div>

		<div class="container ">
			<div class="row food_new">
			<div class="col-lg-4">
				<div class="card">
					<img class="card-img-top" src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565082912/27_srepab.jpg" alt="Card image">
					<div class="card-body">
						<a href="" style="color: black; font-weight: bold;">Mì Ý</a>
						<p class="card-text">Nước Ý không chỉ nổi tiếng với những công trình kiến trúc cổ xưa hùng vĩ...</p>
						<a href="#" class="btn">Xem thêm</a>
					</div>
				</div>
			</div>

			<div class="col-lg-4">
				<div class="card">
					<img class="card-img-top" src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565082275/20_jznnot.webp" alt="Card image">
					<div class="card-body">
						<a href="" style="color: black; font-weight: bold;">ỐC Hương Muối Ớt Thơm Lừng</a>
						<p class="card-text">Được gọi là ốc hương bởi loài ốc này tạo ra mùi hương vô cùng hấp dẫn...</p>
						<a href="#" class="btn">Xem thêm</a>
					</div>
				</div>
			</div>

			<div class="col-lg-4">
				<div class="card">
					<img class="card-img-top" src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565082220/19_ieipex.jpg" alt="Card image">
					<div class="card-body">
						<a href="" style="color: black; font-weight: bold;">Đậu xanh tăng giá mạnh, người dân Hà thành lao đao</a>
						<p class="card-text">Khoảng một tuần nay do ảnh hưởng của thời tiết mưa lũ kéo dài...</p>
						<a href="#" class="btn">Xem thêm</a>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div> <!-- MAIN -->



	<!-- FOOTER -->
	<div class="container-fluid footer">
		<div class="col-lg-5">
			<ul class="list-group list-group-flush">
				<li class="list-group-item">LIÊN HỆ</li>
				<li class="list-group-item"><i class="fas fa-map-marker-alt"></i><a href="">HH1C Linh Đàm, Linh Đường, Hoàng Liệt, Hoàng Mai, Hà Nội, Việt Nam</a></li>
				<li class="list-group-item"><i class="block_icon fa fa-phone"></i><a href="">093 - 39 08 568</a></li>
				<li class="list-group-item"><i class="block_icon fa fa-envelope"></i><a href="">[email protected]</a></li>
			</ul>
			
		</div>

		<div class="col-lg-3">
			<ul class="list-group list-group-flush">
				<li class="list-group-item">TIN TỨC MỚI NHẤT</li>
				<li class="list-group-item"><a href="">Mỳ Ý</a></li>
				<li class="list-group-item"><a href="">Ốc rang muối ớt thơm lừng</a></li>
				<li class="list-group-item"><a href="">Rau xanh tăng giá mạnh vì trời mưa, người dân nội thành lao đao</a></li>
			</ul>
		</div>

		<div class="col-lg-4">
			<ul class="list-group list-group-flush">
				<li class="list-group-item">SẢN PHẨM BÁN CHẠY NHẤT</li>
				<li class="list-group-item"><a href="">Bò viên CP</a></li>
				<li class="list-group-item"><a href="">Bắp cải (Rau sạch)</a></li>
				<li class="list-group-item"><a href="">Mồng tơi (Rau sạch)</a></li>
				<li class="list-group-item"><a href="">Cà rốt (Rau sạch)</a></li>
				<li class="list-group-item"><a href="">Dua chuột(Rau sạch)</a></li>
			</ul>
		</div>
	</div> <!-- FOOTER END -->


	

























	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>


Nguyễn Xuân Mai [T2008A]

Ngày viết: 16:41 15/11/2020

https://t2008amai.herokuapp.com/Lesson15/shophoaqua.html

Trần Văn Lâm [T2008A]

Ngày viết: 15:11 15/11/2020


#hoaquan.html


<!DOCTYPE html>
<html>
<head>
	<title>Zic Zac Group</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
	<div class="header-top">
		<div class="container">
			<div class="row" style="padding-bottom: 15px; padding-top: 15px;">
				<div class="col-md-6">
					<div class="row">
						<div class="col-md-6">
							<i class="fa fa-mobile"></i>
							<b>Điện Thoại: 093 -39 08 568</b>
						</div>
						<div class="col-md-6">
							<i class="fa fa-envelope"></i>
							<b>Email: [email protected]</b>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="row">
						<div class="col-md-6"></div>
						<div class="col-md-6">
							<i class="fa fa-user"></i>
					        <b>Đăng Nhập</b>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="header-bot">
        <div class="container">
        	<div class="row" style="padding-top: 70px; padding-bottom: 40px;">
        		<div class="col-md-3">
        			<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325791/logo_wem2z6.png" width="100%">
        		</div>
        		<div class="col-md-2">
        				<img src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy1-0x0.png"><br>
        				<b>Miễn phí vận chuyển</b>
        				<p>Bán kính 100 km</p>
        		</div>
        		<div class="col-md-2">
        			<img src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy2-0x0.png"><br>
        			<b>Hỗ trợ 24/7</b>
        			<p>Hotline: <b>093-3908568</b></p>
        		</div>
        		<div class="col-md-2">
        			<img src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy3-0x0.png"><br>
        			<b>Giờ làm việc</b>
        			<p>T2-T7 Giờ Hành Chính</p>
        		</div>
        		<div class="col-md-2">
        			<div class="gio">
        				<i class="fa fa-shopping-cart">Giỏ hàng(0)</i> 
        			</div>
                </div>
        	</div>
        </div>
	</div>
	<div class="menu sticky-top">
		<div class="container">
			<div class="row" style="padding-top: 15px;">
				<div class="col-md-9">
					<ul class="sena">
						<li>Trang Chủ</li>
						<li>Rau An Toàn</li>
						<li>Thủy Hải Sản</li>
						<li>Thực Phẩm Tươi</li>
						<li>Công Thức Món Ăn</li>
						<li>Liên Hệ</li>
					</ul>	
				</div>
				<div class="col-md-3">
					<form method="post" >
						<input type="text" name="userr" placeholder="Tìm kiếm">
						<i class="fa fa-search" style="float: right;color: black; margin-top: -23px;position: relative; margin-right: 20px;"></i>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="container" style="margin-top: 20px; margin-bottom: 20px;">
		<div class="row">
			<div class="col-md-3">
				<div class="binz">
					<div class="title">
						<p>DANH MỤC SẢN PHẨM</p>
					</div>
					<div class="content">
					    <div class="nav-cate navbar-toggleable-md">
					    	<ul>
					    		<li>Rau An Toàn</li>
					    		<li>Thủy Hải Sản</li>
					    		<li>Thực Phẩm Tươi Sống</li>
					    		<li>Thực Phẩm Chế Biến</li>
					    		<li>Thực Phẩm Đóng Hộp</li>
					    	</ul>
					    </div> 
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325834/25_qogym7_b08t8n.jpg" style="width: 100%; padding-bottom: 20px; border-radius: 15px;">
				<div class="row">
					<div class="col-md-6">
						<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325868/bn1-0x0_umuelv.png" style="width: 100%; border-radius: 15px;">
					</div>
					<div class="col-md-6">
						<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325882/bn2-0x0_xjvsmb.jpg" style="width: 100%; border-radius: 15px;">
					</div>
				</div>
			</div>
		</div>
	</div>
    <div class="container" style="margin-bottom: 30px;">
    	<div class="funny">
    		<p>SẢN PHẨM BÁN CHẠY</p>
    	</div>
    	<span class="uivl">Xem tất cả</span>
    </div>
    <div class="container">
    	<div class="row">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://img.docbao.vn/images/fullsize/2018/09/26/nho.jpg" width="85%">
    				<p>Nho Nhiệt Đới(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://cdn.tgdd.vn/Products/Images/7578/202932/bhx/tao-gala-new-zealand-nhap-khau-hop-1kg-6-7-trai-201910261118368716.JPG" width="87%">
    				<p>Táo Trung Quốc(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://caythuocdangian.com/wp-content/uploads/2020/02/dinh-duong-trong-qua-xoai.jpg" width="100%">
    				<p>Xoài Châu Phi(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://media.phunutoday.vn/files/upload_images/2014/09/19/qua-coc.jpg" width="100%">
    				<p>Cóc Lào Cai(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="margin-top: 20px; margin-bottom: 20px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://cdn.shopify.com/s/files/1/1917/6033/products/king_crab_4ca67cc0-bab7-4f5c-9f02-a4acb4c8023a_grande.PNG?v=1594324487" width="100%;">
    				<p>King Crab(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://tomhum.shop/wp-content/uploads/2019/06/lobster-tom-hum-canada-tom-hum-alaska-tom-hum-my-50-min.jpg" width="69%;">
    				<p>Tôm alaska(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://bizweb.dktcdn.net/thumb/large/100/308/217/products/gi-b-ch-tu-c.jpg" width="93%;">
    				<p>Bạch Tuộc(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://nld.mediacdn.vn/2020/4/7/1-1586238783038216808799.jpg" width="100%;">
    				<p>Cá Mập(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="margin-bottom: 20px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://www.newvietshop.com/media/catalog/product/cache/3/image/9df78eab33525d08d6e5fb8d27136e95/s/e/secreto_iberico_-_7655.jpg" width="100%">
    				<p>Sườn Heo(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://cf.shopee.vn/file/bba63b35628e63deeb5f97d5d9d2041e" width="67%">
    				<p>Đùi Gà(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://cdn.huongnghiepaau.com/wp-content/uploads/2019/03/thit-bo-ngon-la-phai-san-chac.jpg" width="100%">
    				<p>Thịt Bò Mỹ(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://www.giathitbo.vn/wp-content/uploads/2016/08/suon-cuu-uc.jpg" width="100%">
    				<p>Thịt Cừu Úc(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="margin-bottom: 40px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://cdn.tgdd.vn/Products/Images/3240/83338/bhx/pate-gan-ha-long-90g-5-700x467.jpg" width="88%">
    				<p>Pa te đỉnh cao(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://csfood.vn/wp-content/uploads/2016/06/C%C3%A1-s%E1%BB%91t-c%C3%A0-Vissan-h%E1%BB%99p-170g.1.jpg" width="67%">
    				<p>Cá Hộp(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://muabandacsan.net/wp-content/uploads/2018/06/x%C3%BAc-x%C3%ADch-heo-ngon.jpg" width="100%">
    				<p>Xúc Xích Đức(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://cdn.vatgia.vn/pictures/thumb/0x0/2014/11/zen1416877428.jpg" width="90%">
    				<p>Đồ Viên(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="container" style="margin-bottom: 30px;">
    	<div class="funny">
    		<p>SẢN PHẨM MỚI NHẤT</p>
    	</div>
    	<span class="uivl">Xem tất cả</span>
    </div>
    <div class="container">
    	<div class="row" style="margin-bottom: 30px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://product.hstatic.net/1000191320/product/rau-cai-chip.jpg" width="50%">
    				<p>Rau Cải(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://media3.scdn.vn/img3/2019/5_13/EiWjo1_simg_de2fe0_500x500_maxb.jpg" width="50%">
    				<p>Cà Tím(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://cf.shopee.vn/file/28c4bf19d0ecd74cd274183a74a0c9ab" width="50%">
    				<p>Đu Đủ(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://photo-1-baomoi.zadn.vn/w1000_r1/2017_03_21_180_21822021/70dbd05b341bdd45840a.jpg" width="70%">
    				<p>Dưa Hấu Đen(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div> 
    </div>
    <div class="container" style="margin-bottom: 30px;">
    	<div style="border-bottom: 2px  #f5a442 solid;" ></div>
    	<center><div class="suboi">
    		<p>TIN TỨC</p>
    	</div></center>
    </div>
    <div class="container" style="margin-bottom: 80px;">
    	<div class="row">
    		<div class="col-md-4">
    			<div class="dom">
    				<img src="https://i.ytimg.com/vi/-3L1Hm__zLw/maxresdefault.jpg" width="90%">
    				<b>Hamburger</b>
    				<p>Vào buổi chiều đầy gió ae ngồi lại nhâm nhi cái buger siêu to khổng lồ rồi chill vào điệu nhạc Đen Vâu...</p>
    				<center><div class="jin">
    					Xem thêm
    				</div></center>
    			</div>
    		</div>
    		<div class="col-md-4">
    			<div class="dom">
    				<img src="https://cdn.huongnghiepaau.com/wp-content/uploads/2017/07/999cf916d676bcea9e5646256b3e0198.jpg" width="90%">
    				<b>Pizza</b>
    				<p>Pizza là món ăn nổi tiếng của Ý, nhắc tới món ăn này là chúng ta không thể nhắc tới tháp nghiêng Pizza đã tạo nên biểu tượng không thể nhắc tới khi nhắc tới "đất nước hình chiếc ủng".</p>
    				<center><div class="jin">
    					Xem thêm
    				</div></center>
    			</div>
    		</div>
    		<div class="col-md-4">
    			<div class="dom">
    				<img src="https://afamilycdn.com/150157425591193600/2020/3/21/p2-15847810273291648427633.jpg" width="80%"><br>
    				<b>Phở</b>
    				<p>Linh hồn quốc tuý của Việt Nam đến Việt Nam mà chưa ăn phở thì cũng có thể nói chưa đặt chân tới đây.</p>
    				<center><div class="jin">
    					Xem thêm
    				</div></center>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="footer">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-5">
    				<b style="color: white;">LIÊN HỆ</b>
    				<ul>
    				<li>HH1C Linh Đàm, Linh Đường, Hoàng Liệt, Hoàng Mai, Hà Nội, Việt Nam</li>
    				<li>093 - 39 08 568</li>
    				<li>[email protected]</li>
    			</ul>
    			</div>
    			<div class="col-md-3">
    				<b>TIN TỨC MỚI NHẤT</b>
    				<ul>
    					<li>Mì Ý</li>
    					<li>Ốc hương rang muối ớt thơm lừng</li>
    					<li>Rau xanh tăng giá mạnh vì trời mưa, người dân nội thành lao đao</li>
    				</ul>
    			</div>
    			<div class="col-md-4">
    				<b>SẢN PHẨM BÁN CHẠY NHẤT</b>
    				<ul>
    					<li>Bò viên CP</li>
    					<li>Bắp cải(Rau Sạch)</li>
    					<li>Mồng tơi(Rau sạch)</li>
    					<li>Cà rốt(Rau Sạch)</li>
    					<li>Dưa chuột (Rau Sạch)</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="mmm">
    	Copyright © 2018 All rights reserved | Thiết Kế  bởi Mr.Lam
    </div>
</body>
</html>


#style.css


.header-top {
	background-color: #80bb35;
	color: white;			
}
.sena li{
	list-style-type: none;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    display: inline;
    padding-right: 15px;
}
.gio {
	background-color: #f5aa42;
	border-radius: 20px;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	color: white;
}
.menu {
	background-color: #80bb35;
    color: white;
}
form input {
	border-radius: 15px;
	width: 250px;
	border: solid white 1px;
}
.sena li:hover {
	color: red;
}
.title {
	border-radius: 20px;
    background: #80bb35;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 2px;
}

.content .nav-cate ul li{
    list-style-type: none;
    border-top: 1px #ebebeb solid;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-right: 20px;
}
.binz {
	border-radius: 15px;
	border: 1px #ebebeb solid;
}
.content .nav-cate ul li:hover {
	color: #80bb35;
}
.funny {
	height: 40px;
	width: 250px;
	background-color:  #80bb35;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: white;
	border-radius: 15px;
	padding-top: 7px;
}
.uivl {
	float: right;
	margin-top: -30px;
	color: #80bb35;
	border-bottom: 2px #80bb35 solid;
}
.mtp {
	background-color: #f5a442;
	height: 30px;
	width: 60px;
	text-align: center;
	color: white;
	margin-top: 10px;
}
.dom {
	border: 1px gray solid;
	border-radius: 15px;
	text-align: center;
}
.lui {
	color: #f5a442;

}
.can {
	text-decoration-line: line-through;
	color: gray;

}
.suboi {
	height: 40px;
	width: 100px;
	background-color: #80bb35;
	font-weight: bold;
	font-size: 17px;
	color: white;
	text-align: center;
	padding-top: 5px;
	border-radius: 15px;
	margin-top: -20px;
}
.jin {
	color: white;
	background-color: #80bb35;
	height: 40px;
	width: 100px;
	padding-top: 5px;
	border-radius: 15px;
	margin-bottom: 20px;
}
.footer {
	background-color: #80bb35;
	color: white;
	padding-top: 40px;
	padding-bottom: 20px;
}
.mmm {
	background-color: #2e731c;
	color: white;
	padding-left: 50px;
	padding-bottom: 20px;
	padding-top: 20px;
}


Trần Văn Lâm [T2008A]

Ngày viết: 15:11 15/11/2020


#hoaquan.html


<!DOCTYPE html>
<html>
<head>
	<title>Zic Zac Group</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
	<div class="header-top">
		<div class="container">
			<div class="row" style="padding-bottom: 15px; padding-top: 15px;">
				<div class="col-md-6">
					<div class="row">
						<div class="col-md-6">
							<i class="fa fa-mobile"></i>
							<b>Điện Thoại: 093 -39 08 568</b>
						</div>
						<div class="col-md-6">
							<i class="fa fa-envelope"></i>
							<b>Email: [email protected]</b>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="row">
						<div class="col-md-6"></div>
						<div class="col-md-6">
							<i class="fa fa-user"></i>
					        <b>Đăng Nhập</b>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="header-bot">
        <div class="container">
        	<div class="row" style="padding-top: 70px; padding-bottom: 40px;">
        		<div class="col-md-3">
        			<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325791/logo_wem2z6.png" width="100%">
        		</div>
        		<div class="col-md-2">
        				<img src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy1-0x0.png"><br>
        				<b>Miễn phí vận chuyển</b>
        				<p>Bán kính 100 km</p>
        		</div>
        		<div class="col-md-2">
        			<img src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy2-0x0.png"><br>
        			<b>Hỗ trợ 24/7</b>
        			<p>Hotline: <b>093-3908568</b></p>
        		</div>
        		<div class="col-md-2">
        			<img src="https://t010.gokisoft.com/themes/freshfood/img/cache/catalog/services/policy3-0x0.png"><br>
        			<b>Giờ làm việc</b>
        			<p>T2-T7 Giờ Hành Chính</p>
        		</div>
        		<div class="col-md-2">
        			<div class="gio">
        				<i class="fa fa-shopping-cart">Giỏ hàng(0)</i> 
        			</div>
                </div>
        	</div>
        </div>
	</div>
	<div class="menu sticky-top">
		<div class="container">
			<div class="row" style="padding-top: 15px;">
				<div class="col-md-9">
					<ul class="sena">
						<li>Trang Chủ</li>
						<li>Rau An Toàn</li>
						<li>Thủy Hải Sản</li>
						<li>Thực Phẩm Tươi</li>
						<li>Công Thức Món Ăn</li>
						<li>Liên Hệ</li>
					</ul>	
				</div>
				<div class="col-md-3">
					<form method="post" >
						<input type="text" name="userr" placeholder="Tìm kiếm">
						<i class="fa fa-search" style="float: right;color: black; margin-top: -23px;position: relative; margin-right: 20px;"></i>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="container" style="margin-top: 20px; margin-bottom: 20px;">
		<div class="row">
			<div class="col-md-3">
				<div class="binz">
					<div class="title">
						<p>DANH MỤC SẢN PHẨM</p>
					</div>
					<div class="content">
					    <div class="nav-cate navbar-toggleable-md">
					    	<ul>
					    		<li>Rau An Toàn</li>
					    		<li>Thủy Hải Sản</li>
					    		<li>Thực Phẩm Tươi Sống</li>
					    		<li>Thực Phẩm Chế Biến</li>
					    		<li>Thực Phẩm Đóng Hộp</li>
					    	</ul>
					    </div> 
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325834/25_qogym7_b08t8n.jpg" style="width: 100%; padding-bottom: 20px; border-radius: 15px;">
				<div class="row">
					<div class="col-md-6">
						<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325868/bn1-0x0_umuelv.png" style="width: 100%; border-radius: 15px;">
					</div>
					<div class="col-md-6">
						<img src="https://res.cloudinary.com/gokisoft-com/image/upload/v1565325882/bn2-0x0_xjvsmb.jpg" style="width: 100%; border-radius: 15px;">
					</div>
				</div>
			</div>
		</div>
	</div>
    <div class="container" style="margin-bottom: 30px;">
    	<div class="funny">
    		<p>SẢN PHẨM BÁN CHẠY</p>
    	</div>
    	<span class="uivl">Xem tất cả</span>
    </div>
    <div class="container">
    	<div class="row">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://img.docbao.vn/images/fullsize/2018/09/26/nho.jpg" width="85%">
    				<p>Nho Nhiệt Đới(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://cdn.tgdd.vn/Products/Images/7578/202932/bhx/tao-gala-new-zealand-nhap-khau-hop-1kg-6-7-trai-201910261118368716.JPG" width="87%">
    				<p>Táo Trung Quốc(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://caythuocdangian.com/wp-content/uploads/2020/02/dinh-duong-trong-qua-xoai.jpg" width="100%">
    				<p>Xoài Châu Phi(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-400%
    				</div>
    				<img src="https://media.phunutoday.vn/files/upload_images/2014/09/19/qua-coc.jpg" width="100%">
    				<p>Cóc Lào Cai(rau sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="margin-top: 20px; margin-bottom: 20px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://cdn.shopify.com/s/files/1/1917/6033/products/king_crab_4ca67cc0-bab7-4f5c-9f02-a4acb4c8023a_grande.PNG?v=1594324487" width="100%;">
    				<p>King Crab(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://tomhum.shop/wp-content/uploads/2019/06/lobster-tom-hum-canada-tom-hum-alaska-tom-hum-my-50-min.jpg" width="69%;">
    				<p>Tôm alaska(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://bizweb.dktcdn.net/thumb/large/100/308/217/products/gi-b-ch-tu-c.jpg" width="93%;">
    				<p>Bạch Tuộc(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://nld.mediacdn.vn/2020/4/7/1-1586238783038216808799.jpg" width="100%;">
    				<p>Cá Mập(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="margin-bottom: 20px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://www.newvietshop.com/media/catalog/product/cache/3/image/9df78eab33525d08d6e5fb8d27136e95/s/e/secreto_iberico_-_7655.jpg" width="100%">
    				<p>Sườn Heo(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://cf.shopee.vn/file/bba63b35628e63deeb5f97d5d9d2041e" width="67%">
    				<p>Đùi Gà(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://cdn.huongnghiepaau.com/wp-content/uploads/2019/03/thit-bo-ngon-la-phai-san-chac.jpg" width="100%">
    				<p>Thịt Bò Mỹ(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-50%
    				</div>
    				<img src="https://www.giathitbo.vn/wp-content/uploads/2016/08/suon-cuu-uc.jpg" width="100%">
    				<p>Thịt Cừu Úc(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="margin-bottom: 40px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://cdn.tgdd.vn/Products/Images/3240/83338/bhx/pate-gan-ha-long-90g-5-700x467.jpg" width="88%">
    				<p>Pa te đỉnh cao(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://csfood.vn/wp-content/uploads/2016/06/C%C3%A1-s%E1%BB%91t-c%C3%A0-Vissan-h%E1%BB%99p-170g.1.jpg" width="67%">
    				<p>Cá Hộp(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://muabandacsan.net/wp-content/uploads/2018/06/x%C3%BAc-x%C3%ADch-heo-ngon.jpg" width="100%">
    				<p>Xúc Xích Đức(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://cdn.vatgia.vn/pictures/thumb/0x0/2014/11/zen1416877428.jpg" width="90%">
    				<p>Đồ Viên(Thực Phẩm Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="container" style="margin-bottom: 30px;">
    	<div class="funny">
    		<p>SẢN PHẨM MỚI NHẤT</p>
    	</div>
    	<span class="uivl">Xem tất cả</span>
    </div>
    <div class="container">
    	<div class="row" style="margin-bottom: 30px;">
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://product.hstatic.net/1000191320/product/rau-cai-chip.jpg" width="50%">
    				<p>Rau Cải(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://media3.scdn.vn/img3/2019/5_13/EiWjo1_simg_de2fe0_500x500_maxb.jpg" width="50%">
    				<p>Cà Tím(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://cf.shopee.vn/file/28c4bf19d0ecd74cd274183a74a0c9ab" width="50%">
    				<p>Đu Đủ(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    		<div class="col-md-3">
    			<div class="dom">
    				<div class="mtp">
    					-90%
    				</div>
    				<img src="https://photo-1-baomoi.zadn.vn/w1000_r1/2017_03_21_180_21822021/70dbd05b341bdd45840a.jpg" width="70%">
    				<p>Dưa Hấu Đen(Rau Sạch)</p>
    				<b class="lui">5000$</b>
    				<p class="can">10000$</p>
    			</div>
    		</div>
    	</div> 
    </div>
    <div class="container" style="margin-bottom: 30px;">
    	<div style="border-bottom: 2px  #f5a442 solid;" ></div>
    	<center><div class="suboi">
    		<p>TIN TỨC</p>
    	</div></center>
    </div>
    <div class="container" style="margin-bottom: 80px;">
    	<div class="row">
    		<div class="col-md-4">
    			<div class="dom">
    				<img src="https://i.ytimg.com/vi/-3L1Hm__zLw/maxresdefault.jpg" width="90%">
    				<b>Hamburger</b>
    				<p>Vào buổi chiều đầy gió ae ngồi lại nhâm nhi cái buger siêu to khổng lồ rồi chill vào điệu nhạc Đen Vâu...</p>
    				<center><div class="jin">
    					Xem thêm
    				</div></center>
    			</div>
    		</div>
    		<div class="col-md-4">
    			<div class="dom">
    				<img src="https://cdn.huongnghiepaau.com/wp-content/uploads/2017/07/999cf916d676bcea9e5646256b3e0198.jpg" width="90%">
    				<b>Pizza</b>
    				<p>Pizza là món ăn nổi tiếng của Ý, nhắc tới món ăn này là chúng ta không thể nhắc tới tháp nghiêng Pizza đã tạo nên biểu tượng không thể nhắc tới khi nhắc tới "đất nước hình chiếc ủng".</p>
    				<center><div class="jin">
    					Xem thêm
    				</div></center>
    			</div>
    		</div>
    		<div class="col-md-4">
    			<div class="dom">
    				<img src="https://afamilycdn.com/150157425591193600/2020/3/21/p2-15847810273291648427633.jpg" width="80%"><br>
    				<b>Phở</b>
    				<p>Linh hồn quốc tuý của Việt Nam đến Việt Nam mà chưa ăn phở thì cũng có thể nói chưa đặt chân tới đây.</p>
    				<center><div class="jin">
    					Xem thêm
    				</div></center>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="footer">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-5">
    				<b style="color: white;">LIÊN HỆ</b>
    				<ul>
    				<li>HH1C Linh Đàm, Linh Đường, Hoàng Liệt, Hoàng Mai, Hà Nội, Việt Nam</li>
    				<li>093 - 39 08 568</li>
    				<li>[email protected]</li>
    			</ul>
    			</div>
    			<div class="col-md-3">
    				<b>TIN TỨC MỚI NHẤT</b>
    				<ul>
    					<li>Mì Ý</li>
    					<li>Ốc hương rang muối ớt thơm lừng</li>
    					<li>Rau xanh tăng giá mạnh vì trời mưa, người dân nội thành lao đao</li>
    				</ul>
    			</div>
    			<div class="col-md-4">
    				<b>SẢN PHẨM BÁN CHẠY NHẤT</b>
    				<ul>
    					<li>Bò viên CP</li>
    					<li>Bắp cải(Rau Sạch)</li>
    					<li>Mồng tơi(Rau sạch)</li>
    					<li>Cà rốt(Rau Sạch)</li>
    					<li>Dưa chuột (Rau Sạch)</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="mmm">
    	Copyright © 2018 All rights reserved | Thiết Kế  bởi Mr.Lam
    </div>
</body>
</html>


#style.css


.header-top {
	background-color: #80bb35;
	color: white;			
}
.sena li{
	list-style-type: none;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    display: inline;
    padding-right: 15px;
}
.gio {
	background-color: #f5aa42;
	border-radius: 20px;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	color: white;
}
.menu {
	background-color: #80bb35;
    color: white;
}
form input {
	border-radius: 15px;
	width: 250px;
	border: solid white 1px;
}
.sena li:hover {
	color: red;
}
.title {
	border-radius: 20px;
    background: #80bb35;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 2px;
}

.content .nav-cate ul li{
    list-style-type: none;
    border-top: 1px #ebebeb solid;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-right: 20px;
}
.binz {
	border-radius: 15px;
	border: 1px #ebebeb solid;
}
.content .nav-cate ul li:hover {
	color: #80bb35;
}
.funny {
	height: 40px;
	width: 250px;
	background-color:  #80bb35;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: white;
	border-radius: 15px;
	padding-top: 7px;
}
.uivl {
	float: right;
	margin-top: -30px;
	color: #80bb35;
	border-bottom: 2px #80bb35 solid;
}
.mtp {
	background-color: #f5a442;
	height: 30px;
	width: 60px;
	text-align: center;
	color: white;
	margin-top: 10px;
}
.dom {
	border: 1px gray solid;
	border-radius: 15px;
	text-align: center;
}
.lui {
	color: #f5a442;

}
.can {
	text-decoration-line: line-through;
	color: gray;

}
.suboi {
	height: 40px;
	width: 100px;
	background-color: #80bb35;
	font-weight: bold;
	font-size: 17px;
	color: white;
	text-align: center;
	padding-top: 5px;
	border-radius: 15px;
	margin-top: -20px;
}
.jin {
	color: white;
	background-color: #80bb35;
	height: 40px;
	width: 100px;
	padding-top: 5px;
	border-radius: 15px;
	margin-bottom: 20px;
}
.footer {
	background-color: #80bb35;
	color: white;
	padding-top: 40px;
	padding-bottom: 20px;
}
.mmm {
	background-color: #2e731c;
	color: white;
	padding-left: 50px;
	padding-bottom: 20px;
	padding-top: 20px;
}


hainguyen [T2008A]

Ngày viết: 17:36 14/11/2020



https://nguyenbahai.herokuapp.com/Web3/home.html


Phân Loại Bài Viết

Danh Sách Bài Học

Đã sao chép!!!