IMG-LOGO
Trang Chủ Chủ Đề Thiết kế web bán rau củ quả - t010.gokisoft.com
× 1) Bài 1 - Tạo website bằng bootstrap 4 2) Thiết kế website >> nettruyen.com 3. Thiết kế web bán rau củ quả - t010.gokisoft.com

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

by Trần Văn Điệp - 14:08 13/11/2020 1,437 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


Tags:

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


Đã sao chép!!!