TKW - BÁO CÁO CUỐI KỲ - CÂY CẢNH - HỒ VĨNH NHẬT - HOÀNG KIM TUẤN ANH -

SVTH: Hồ Vĩnh Nhật (17) – Hoàng Kim Tuấn Anh (19)
ĐẠI HỌC SƯ PHẠM KỸ THUẬT ĐÀ NẴNG

KHOA CÔNG NGHỆ SỐ
BỘ MÔN THIẾT KẾ WEB
BÁO CÁO CUỐI KÌ THIẾT KẾ WEB
GVHD: Trần Bữu Dung

Sinh viên thực hiện: Hoàng Kim Tuấn Anh
Hồ Vĩnh Nhật
Lớp học phần:221TKW02
Lớp học phần: 221TKW02 Trang 1

BÁO CÁO CUỐI KÌ THIẾT KẾ WEB

I. Phân công nhiệm vụ
STT Người thực hiện Công việc
1 Hồ Vĩnh Nhật - Trang chủ

- Giỏ hàng
- Login
2 Hoàng Kim Tuấn - Danh mục sản phẩm
Anh - Thông tin sản phẩm
II. Mã nguồn
1. HTML
Trang chủ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Trang chủ</title>
<link rel="stylesheet"
href="fontawesome-free-6.1.1-web/css/all.min.css">
<link rel="stylesheet" href="Trangchu.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="footer.css">
</head>
<body>
<header>
<div class="header-top">
<div class="header-top-left">
<div class="header-top-left-icon"><a href="#"><i
class="fab fa-facebook-f"></i></a></div>
class="fab fa-twitter"></i></a></div>
class="fab fa-google-plus-g"></i></a></div>
class="fab fa-instagram"></i></a></div>


class="fab fa-youtube"></i></a></div>
</div>
<div class="header-top-right">
<div class="header-top-right-item"><a
href="login.html"><i class="fas fa-user"></i> Tài Khoản</a></div>
<div class="header-top-right-item"><a href=""><i
class="fas fa-map-marker-alt"></i> Hệ Thống cửa hàng</a></div>
</div>
</div>
<div class="header-height"></div>
<div class="header-media">

<div class="btn-media">
<div class="btn-media-open" onclick="openNav()"><i
class="fas fa-bars"></i></div>
<div class="btn-media-open-text" id="mySidenav">

<a href="javascript:void(0)" class="closebtn"
onclick="closeNav()">×</a>
<div class="btn-media-open-item"
onclick="fun11()">Danh Mục Sản Phẩm <i class="fas fa-plus add2-
icon"></i></div>
<div class="btn-media-open-item">Trang Chủ</div>
<div class="btn-media-open-item">Giới
Thiệu</div>
<div class="btn-media-open-item">Sản Phẩm</div>
<div class="btn-media-open-item">Tin Tức</div>
<div class="btn-media-open-item">Liên Hệ</div>
</div>
</div>
</div>
<div class="header-top-center">
<div class="header-top-center-search">
<input type="text" placeholder="Tìm Kiếm Sản Phẩm...">
<a href="#" class="search-icon"><i class="fas fa-
search"></i></a>
</div>
<div class="header-top-center-left">
<a href="#" class="header-top-center-left-item">
<div class="item-header-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="header-top-center-left-item-content">
<div class="content1-header"> Tư vấn:</div>
<div class="content1-header2"> 0123 456 789
</div>
</div>
</a>

<a href="Giohang.html" class="header-top-center-left-

item">
<i class="fas fa-shopping-basket"></i>
</div>
<div class="content1-header">(2) Sản phẩm </div>
</div>
</a>
</div>
</div>
</header>
<div class="menu">
<div class="menu-content">
<div class="item-has-dropdown">
<div class="menu-item item-list-menu"><a
href="sanpham.html"><i class="fas fa-list"></i>Danh Mục Sản Phẩm</a></div>
<div class="dropdown1">
<div class="dropdown1-content">
<div class="item-dropdown-lv2">
<div class="dropdown1-content-item">Cây nội thất -
cây văn phòng<i class="fas fa-chevron-right"></i></div>
<div class="dropdown-lv2">
<div class="dropdown-lv2-content">
<div class="dropdown-lv2-item">Cây đại
lộc</div>
<div class="dropdown-lv2-item">Cây kim
tiền</div>
<div class="dropdown-lv2-item">Cây lưỡi
cọp</div>
<div class="dropdown-lv2-item">Cây bàng
Singapore</div>
</div></div>
</div>
<div class="dropdown1-content-item">Cây thiết mộc
lan</div>
<div class="dropdown1-content-item">Cây vạn niên
thanh leo cột</div>
<div class="dropdown1-content-item">Cây kim ngân
xoắn</div>
<div class="dropdown1-content-item">Cây cọ nhật</div>
<div class="dropdown1-content-item">Cây tử đằng</div>
<div class="dropdown1-content-item">Cây sử quân
tử</div>
<div class="dropdown1-content-item">Cây mỏ két</div>
<div class="dropdown1-content-item">Cây hoa lan
tỏi</div>

</div>

</div>

</div>
<a href="#" class="menu-item"> Trang Chủ</a>
<a href="#" class="menu-item"> Giới Thiệu</a>
<a href="#" class="menu-item"> Sản Phẩm</a>
<a href="#" class="menu-item"> Tin Tức</a>
<a href="#" class="menu-item"> Liên Hệ</a>
</div>
</div>
<section id="Slider">

<div class="col-1">
<h2><img src="img/check.png">25 năm kinh nghiệm trồng cây
giống.</h2>
<h2><img src="img/check.png">Giao tận nhà, giá tại
vườn.</h2>
<h2><img src="img/check.png">100% cây chọn lọc chất lượng
cao.</h2>
<h2><img src="img/check.png">Hỗ trợ kỹ thuật chăm sóc
trọn đời.</h2>
<a href="sanpham.html"><button>Mua ngay</button></a>

<ul>
<li class="btn active"></li>
<li class="btn"></li>
</ul>

</div>
<div class="col-2">
<img src="img/slide0.jpg" id="banner">
</div>

</section>
<div class="Benefits">
<li>
<img src="img/chungnhan.jpg">
<h3>Tỉ Lệ Sống Trên 98%</h3>
<p>Các sản phẩm cây giống luôn được ươm trồng đúng quy chuẩn
và đạt chất lượng tốt nhất trước khi gửi tới người dùng</p>
</li>
<li>
<img src="img/giaohang.jpg">
<h3>Giao Hàng 2-3 Ngày</h3>
<p>Đội ngũ phương tiện xe tải, xe ba gác luôn sẵn sàng để
giao cây được nhanh chóng và thuận lợi nhất</p>

</li>
<li>
<img src="img/dichvu.jpg">
<h3>Tư Vấn Miễn Phí 24/7</h3>
<p>Kỹ sư lâm nghiệp nhiều kinh nghiệm và sự tận tụy luôn sẵn
sàng hỗ trợ bà con trong suốt quá trình chăm sóc cây</p>
</li>
</div>

<footer>
<div class="footer1 footer1-media">
<div class="footer1-content">
<div class="footer1-content-left">Đăng kí nhận
tin</div>
<div class="footer1-content-center">
<input type="email" placeholder="Email của bạn">
<i class="fab fa-telegram-plane"></i>
</div>
<div class="footer1-content-right">
</div>
</div>
</div>
<div class="lop-phu">
<div class="footer2-content1">
<div class="col1 col1-2">
<div class="col1-title">CÔNG TY CP CÂY CẢNH NHẬT
TUẤN </div>
<div class="col1-content">DĐKD: 02254.290.686 do
Sở Kế hoạch và đầu tư Đà Nẵng Cấp ngày 19/05/2022</div>
<div class="col1-content"><i class="fas fa-map-
marker-alt"></i> Địa chỉ: 48 Cao Thắng quận Hải Châu tp Đà Nẵng </div>
</div>
<div class="col1-title">HOTLINE HỖ TRỢ </div>
<div class="col1-content"><i class="fas fa-phone-
alt"></i> HotLine: 1900.6628 Fax: 02254.290.686</div>
<div class="col1-content"> <i class="fas fa-
envelope"></i> Email: nhattuan@gmail.com</div>
</div>

<div class="col1">
<div class="col1-title">KẾT NỐI VỚI CHÚNG TÔI QUA
</div>
<div class="col1-content col1-content-item">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>

</div>
</div>
<div class="col2">
<div class="col2-title">Tài Khoản của bạn</div>
<ul class="col2-content">
<li>Đăng Nhập</li>
<li>Đăng kí</li>
</ul>
</div>
<div class="col2">
<div class="col2-title">Về Chúng tôi</div>
<li>Giới Thiệu Công ti</li>
<li>Liên Hệ</li>
<li>Bản Đồ địa lí</li>
<li>Tuyển Dụng</li>
</ul>
</div>
<div class="col2">
<div class="col2-title">Hướng Dẫn & Hỗ trợ</div>
<li>Tìm Kiếm</li>
<li>Hướng Dẫn Mua Hàng</li>
<li>Câu Hỏi Thường Gặp</li>
<li>Điều Khoản và Điều kiện</li>
<li>Các Hình thức thanh toán</li>
</ul>
</div>
<div class="col2">
<div class="col2-title">Dịch Vụ</div>
<li>Liên Hệ</li>
<li>Bán Hàng</li>

</ul>
</div>
</div>
<div class="col3">

<div class="col3-img"><img src="./img/logo5.png"

alt=""></div>

<div class="col3-content">
<p>Đăng kí nhận Bản tin Shop</p>
</div>
</div>
<div class="col4">
<p>Cập nhật thông tin khuyến mãi nhanh nhất</p>
<p>Hưởng Quyền Lợi Giảm giá riêng biệt</p>
</div>
<div class="col5">
<input type="text" placeholder="">
<div>Gửi</div>
</div>

</div>
Copyrights © 2022 Nhật Tuấn. All Rights Reserved |
Design by NhatTuan
</div>
</div></div>
</footer>
</body>
<script >
const btn = document.getElementsByClassName('btn');
const banner = document.getElementById('banner');
btn[0].onclick = function () {
banner.src = 'img/slide0.jpg';
animation();
this.classList.add('active');
};
animation();
};
animation();
};
animation();

};
const animation = () => {

banner.classList.add('zoom');
setTimeout(() => {
banner.classList.remove('zoom');
}, 1000);
for (b of btn) {
b.classList.remove('active');
}
};
</script>
</html>
Giỏ hàng
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Giỏ hàng</title>
href="fontawesome-free-6.1.1-web/css/all.min.css">
<link rel="stylesheet" href="Giohang.css">
<link rel="stylesheet" href="footer.css">
</head>
<body>
<header>
</div>


</div>
</div>


icon"></i></div>
Thiệu</div>
</div>
</div>
</div>
search"></i></a>
</div>
</div>
<div class="content1-header"> 0123 456 789 </div>
<div class="content1-header2"> Tổng Đài Miễn Phí
</div>
</div>

</a>
<a href="" class="header-top-center-left-item">
</div>
<div class="content1-header"> (2) Sản Phẩm </div>

<div class="content1-header-2"> Giỏ Hàng </div>

</div>

</a>
</div>
</div>
</header>
<div class="menu">
<div class="menu-item item-list-menu"><a
href="sanpham.html"><i class="fas fa-list"></i>Danh Mục Sản Phẩm</a></div>
lộc</div>
tiền</div>
cọp</div>
Singapore</div>
</div></div>
</div>
lan</div>
xoắn</div>
tử</div>
tỏi</div>

</div>
</div>
</div>
<a href="Trangchu.html" class="menu-item"> Trang Chủ</a>


</div>
</div>

<div class="Transport">

<div class="cart-top-wrap">
<div class="cart-top">
<div class="cart-top-cart cart-top-item">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
<div class="cart-top-local cart-top-item">
<i class="fa-solid fa-location-dot"></i>
</div>
</div>
<div class="cart-top-money cart-top-item">
<i class="fa-solid fa-credit-card"></i>
</div>
</div>
</div>

</div>

<section>
<div class="container">
<div class="Sanpham">
<table class="left_content">
<tr>
<th>SẢN PHẨM</th>
<th>TÊN SẢN PHẨM</th>
<th class="xuatxu">Xuất xứ</th>
<th>SL</th>
<th>THÀNH TIỀN</th>
<th>XÓA</th>
</tr>
<tr>
<td><img src="https://caycanhanhthu.vn/wp-
content/uploads/2020/12/Dai-loc-3.jpg"></td>
<td>Cây Đại Lộc</td>
<td class="xuatxu">Việt Nam</td>
<td><input type="number" value="1" min="1">
</td>

<td
class="thanhtien"><p>900.000<sup>đ</sup></p></td>
<td><span style="padding-top:3px;">X</span></td>
</tr>
<tr>
<td><img
src="https://bangmoc.com/asset/upload/image/cay-kim-tien-nen-1.jpg?
v=20190410"></td>
<td>Cây Kim Tiền</td>
<td class="xuatxu">Việt Nam</td>
<td><input type="number" value="1" min="1">
</td>
<td
class="thanhtien"><p>690.000<sup>đ</sup></p></td>
<td><span style="padding-top:3px;">X</span></td>
</tr>
</table>
</div>
<div class="Thanhtien">
<table class="right_content">
<tr>
<th colspan="3">TỔNG TIỀN GIỎ HÀNG</th>
</tr>
<tr>
<td>Tổng sản phẩm</td>
<td>:</td>
<td>2</td>
</tr>
<tr>
<td>Tổng tiền hàng</td>
<td>:</td>
<td><p>1.590.000<sup>đ</sup></p></td>
</tr>
<tr>
<td>Giao hàng</td>
<td>:</td>
<td><p>30.000 <sup>đ</sup></p></td>
</tr>
<tr>
<td>Tạm tính</td>
<td>:</td>
<td><p style="color:black; font-
weight:bold;">1.620.000<sup>đ</sup></p></td>
</tr>
<tr class="right_content_button">
<td colspan="2"><a
href="sanpham.html"><button>TIẾP TỤC MUA SẮM</button></a></td>
<td><button>THANH TOÁN</button></td>
</tr>

</table>

<div class="right_content_login">
<p>Hãy <a href="login.html"
style="color:orange;">Đăng nhập</a> tài khoản để tích lũy điểm thành viên</p>
</div>
</div>

</div>

</section>

<footer>
<div class="footer1-content-left">Đăng kí nhận
tin</div>
</div>
</div>
</div>
</div>
<div class="col1-title">CÔNG TY CP CÂY CẢNH NHẬT
TUẤN </div>
<div class="col1-content">DĐKD: 02254.290.686 do
Sở Kế hoạch và đầu tư Đà Nẵng Cấp ngày 19/05/2022</div>
</div>


</div>
<div class="col1">
</div>
</div>

</div>
</div>
<div class="col2">
<li>Đăng kí</li>
</ul>
</div>
<div class="col2">
<li>Liên Hệ</li>
</ul>
</div>
<div class="col2">
</ul>
</div>
<div class="col2">
<li>Liên Hệ</li>
<li>Bán Hàng</li>


</ul>
</div>
</div>
<div class="col3">
alt=""></div>

</div>
</div>
<div class="col4">
</div>
<div class="col5">
<div>Gửi</div>
</div>

</div>
Design by NhatTuan
</div>
</div></div>
</footer>
</body>
</html>
LOGIN
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<title>Đăng nhập</title>
</head>
<body>
<section>
<div class="color"></div>
<div class="box">
<div class="square" style="--i:0;"></div>


<div class="form">
<h2>Đăng nhập</h2>
<form >
<div class="inputBox">
<input type="text" placeholder="Tên đăng nhập">
</div>
<input type="password" placeholder="Mật khẩu">
</div>
<input type="submit" value="Đăng nhập" onclick="">
</div>
<a href="Trangchu.html" class="forget">Quay lại Trang
chủ</a><br>
<a href="" class="forget">Đăng ký</a>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
Sản phẩm
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
href="./font/fontawesome-free-5.15.3-web/css/all.min.css">
<link rel="stylesheet" href="sanpham.css">
<link rel="stylesheet" href="style.css">
<title>Cây cảnh Nhật Tuấn</title>
</head>
<body>
<header>
<div class="header-top-left-icon"><a
href="https://www.facebook.com/hktuanah/"><i class="fab fa-facebook-
f"></i></a></div>
</div>
</div>
</div>
icon"></i></div>
<div class="btn-media-open-item">Giới Thiệu</div>
</div>
</div>
</div>
search"></i></a>
</div>
</div>


</div>
</div>
</a>
<a href="Giohang.html" class="header-top-center-left-
item">
</div>
</div>
</a>
</div>
</div>
</header>

<div class="menu">
<div class="menu-item item-list-menu"><i class="fas fa-
list"></i> Danh Mục Sản Phẩm</div>
lộc</div>
tiền</div>
cọp</div>
Singapore</div>
</div></div>
</div>
lan</div>
xoắn</div>
tử</div>


tỏi</div>

</div>
</div>
</div>
</div>
</div>
<div class="page-link">
Trang chủ > <span>Danh mục sản phẩm</span>
</div>
<div class="sanpham_banner">
<a href="#">
<img src="image/banner.png" alt=""></a>
</div>

<div class="main_sanpham">
<div class="main-sp-list">
<a href="sanpham.html" class="main-sp-list-item is-now"
>Combo cây cảnh</a>
<a href="caynoithat-cayvanphong.html" class="main-sp-list-
item">Cây nội thất - cây văn phòng</a>
<a href=" #" class="main-sp-list-item">Cây công trình</a>
<a href=" #" class="main-sp-list-item">Cây giống</a>
<a href=" #" class="main-sp-list-item">Cây trồng trong
nhà</a>
<a href=" #" class="main-sp-list-item">Cây để bàn</a>
</div>
<div class="main_sanpham-content">
<div class="main_sanpham-left">
<div class="col_sanpham1">
<div class="col_sanpham1-title" onclick="fun20()"
>Danh Mục <i class="fas fa-bars col-icon" ></i></div>
<ul class="col_sanpham-list" id="danhmuc-down">
<li class="col_sanpham-item" onclick="fun1()">
<i class="fas fa-circle"></i>
<p>Cây nội thất - cây văn phòng</p>
<i class="fas fa-plus add-icon"></i>
</li>
<div class="fun1" id="fun1">
<li>Cây đại lộc</li>
<li>Cây kim tiền</li>
<li>Cây lưỡi cọp</li>
</div>


<p>Cây công trình</p>
</li>
<li>Cây tử đằng</li>
<li>Cây sử quân tử</li>
<li>Cây mộc hương</li>
</div>
<li class="col_sanpham-item" onclick="fun3()" >
<p>Cây giống</p>
</li>
<li>Cây nhội giống</li>
<li>Cây phong linh giống</li>
<li>Cây chiêu liêu giống</li>
</div>
<p>Cây trồng trong nhà</p>
</li>
<li>Cây đế vương</li>
<li>cây chuối cảnh</li>
<li>Cây lan tuyết</li>
</div>
<p>Cây để bàn</p>
</li>
<li>Cây trầu bà</li>
<li>Cây dứa sọc vàng</li>
<li>Tiểu cảnh sen đá</li>
</div>
<p>Cây xanh ngoại thất</p>
</li>
<li>Cây hoa giấy</li>
<li>Cây tùng tháp</li>
</div>


<p>Cây thuốc nam</p>
</li>
<li>Cây đô la bạc</li>
<li>Cây nhàu</li>
<li>Cây xạ đen</li>
</div>
<p>Cây cảnh ngày tết</p>
</li>
<li>Cây tùng tuyết mai</li>
<li>Cây hoa hải đường</li>
<li>Cây bạch lan dương</li>
</div>
<p>Cây hoa cảnh</p>
</li>
<li>Hoa trạng nguyên</li>
<li>Hoa thiên điếu</li>
<li>Hoa dừa cạn đứng</li>
</div>
</ul>
</div>
<div class="col_sanpham2">
<div class="fun21" > <h1 class="col_sanpham2-
title"onclick="fun21()">Tìm Theo</h1></div>
<div class="col_sanpham2-title-content" id="fun21">
<div class="col_sanpham2-1">
<h1 class="col_sanpham2-1-title1">Giá Sản
Phẩm</h1>
<div class="col_sanpham2-1-content">
<div class="col_sanpham2-1-title"><input
type="checkbox"> Giá Dưới 100.000đ</div>
type="checkbox"> 100.000đ - 200.000đ</div>
type="checkbox"> 500.000đ - 1.000.000đ</div>

type="checkbox"> Giá trên 1.000.000đ</div>

</div>
</div>
<h1 class="col_sanpham2-1-title1">Loại Cây</h1>
<div class="col_sanpham2-1-node">
<input type="text" placeholder="Tìm Loại Cây">
<i class="fas fa-search"></i>
</div>
type="checkbox"> Cây nội thất</div>
type="checkbox"> Cây công trình</div>
type="checkbox"> Cây trong nhà</div>

</div>
</div>
<h1 class="col_sanpham2-1-title1">loại</h1>
<div class="col_sanpham2-1-node">
<input type="text" placeholder="Tìm Loại">
<i class="fas fa-search"></i>
</div>
type="checkbox"> Cây cảnh phong thủy</div>
type="checkbox"> Cây thủy sinh</div>
type="checkbox"> Cây cảnh để bàn</div>
</div>
</div></div>
</div>
<div class="clear"></div>
</div>

<div class="main_sanpham-right">

<div class="main_sanpham-right-content">
<a href="caydailoc.html" class="main-content1-item
item2">
<div class="sale">20%</div>
<div class="main-content1-item-img">
<img
src="https://cayvahoa.net/wp-content/uploads/cay-dai-loc.jpg" alt="">
</div>

<div class="main-content1-item-title">
Cây đại lộc
</div>
<div class="main-content1-item-price">900,000
VNĐ</div>
</a>
<a href="caykimtien.html" class="main-content1-item
item2">
<img
src="https://cayvahoa.net/wp-content/uploads/cay-kim-tien-2-300x300.jpg"
alt="">
</div>
Cây kim tiền
</div>
VNĐ</div>
</a>
<a href="cayluoicop.html" class="main-content1-item
item2">
<img
src="https://cayvahoa.net/wp-content/uploads/Cay-luoi-cop-3-300x300.jpg"
alt="">
</div>
Cây lưỡi cọp
</div>
VNĐ</div>
</a>
<a href="caythietmoclan.html" class="main-content1-
item item2">
<img
src="https://cayvahoa.net/wp-content/uploads/thiet-moc-lan-300x300.jpg"
alt="">
</div>
Cây thiêt mộc lan
</div>
VNĐ</div>
</a>
<a href="#" class="main-content1-item item2">

<img
src="https://cayvahoa.net/wp-content/uploads/Cay-bang-Singapore-300x300.jpg"
alt="">
</div>
Cây bàng Singapore
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/Cay-van-nien-thanh-leo-cot-
300x300.jpg" alt="">
</div>
Cây vạn niên thanh leo cột
</div>
<div class="main-content1-item-price">700,000đ
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-kim-ngan-that-bim-
300x300.jpg" alt="">
</div>
Cây kim ngân xoắn
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-hoa-cuc-bat-tu-1-
300x300.jpg" alt="">
</div>
Cây cúc bất tử
</div>
VNĐ</div>
</a>


<img
src="https://cayvahoa.net/wp-content/uploads/chau-cay-co-nhat-dep-
300x300.jpg" alt="">
</div>
Cây cọ nhật
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-hoa-su-quan-tu-300x300.jpg"
alt="">
</div>
Cây sử quân tử
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-chuoi-mo-ket-3-300x300.jpg"
alt="">
</div>
Cây mỏ két
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-hoa-lan-toi-3-300x300.jpg"
alt="">
</div>
Cây hoa lan tỏi
</div>

<div class="main-content1-item-price">150.000
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-lim-xet-300x300.jpg" alt="">
</div>
Cây lom xẹt
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/hoa-cuc-hoa-mi-300x300.jpg"
alt="">
</div>
Hoa cúc họa mi
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/hoa-cat-tuong-1-300x300.jpg"
alt="">
</div>
Hoa cát tường
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/trong-hoa-huong-duong-
300x300.jpg" alt="">
</div>
Hoa hướng dương

</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cach-trong-va-cham-soc-chau-hoa-
thu-hai-duong-300x300.jpg" alt="">
</div>
Cây hoa thu hải đường
</div>
VNĐ</div>
</a> <a href="#" class="main-content1-item item2">
<img
src="https://cayvahoa.net/wp-content/uploads/cay-son-tung-1-300x300.png"
alt="">
</div>
Cây sơn tùng
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/Cay-hoa-ngoc-nu-2-300x300.jpg"
alt="">
</div>
Cây hoa ngọc nữ
</div>
VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-chuoi-canh-1-300x300.jpg"
alt="">
</div>

Cây chuối cảnh

</div>
VNĐ</div>
</a>

</div>
<div class="clear"></div>
<div class="footer-page">
<button class="now">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>></button>
<button>>></button>
</div>
</div>
</div>
</div>
<div class="main-sp-view">
<div class="main-sp-view-title">Sản Phẩm Đã xem</div>
<div class="main-sp-view-content">
<img
src="https://cayvahoa.net/wp-content/uploads/chau-cay-hoa-cuc-indo-trang-tri-
cua-so-1-300x300.jpg" alt="">
</div>
Cây hoa cúc indo
</div>
<div class="main-content1-item-price">150,000 VNĐ</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-hoa-ngan-sao-300x300.jpg"
alt="">
</div>
Cây hoa ngàn sao
</div>
</a>

<img
src="https://cayvahoa.net/wp-content/uploads/cay-hanh-phuc-de-ban-
300x300.jpg" alt="">
</div>
Cây hạnh phúc để bàn
</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-dua-soc-vang-300x300.jpg"
alt="">
</div>
Cây dứa sọc vàng
</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/Cay-thinh-vuong-1-300x300.png"
alt="">
</div>
Cây thịnh vượng
</div>
</a>
</div>
</div>
<footer>
<div class="footer1-content-left">Đăng kí nhận tin</div>
</div>


</div>
</div>
</div>
<div class="col1-title">CÔNG TY CP CÂY CẢNH NHẬT TUẤN
</div>
<div class="col1-content">DĐKD: 02254.290.686 do Sở
Kế hoạch và đầu tư Đà Nẵng Cấp ngày 19/05/2022</div>
</div>
</div>
<div class="col1">
</div>
</div>
</div>
</div>
<div class="col2">
<li>Đăng kí</li>
</ul>
</div>
<div class="col2">

<li>Liên Hệ</li>
</ul>
</div>
<div class="col2">
</ul>
</div>
<div class="col2">
<li>Liên Hệ</li>
<li>Bán Hàng</li>
</ul>
</div>
</div>
<div class="col3">
<div class="col3-img"><img src="image/logo5.png"
alt=""></div>
</div>
</div>
<div class="col4">
</div>
<div class="col5">
<div>Gửi</div>
</div>

</div>
Design by NhatTuan
</div>
</div></div>
</footer>
<script src="js/js.js"></script>
</body>

</html>
THÔNG TIN SẢN PHẨM
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Cây Đại Lộc</title>
<link rel="stylesheet" href="style.css">
href="./font/fontawesome-free-5.15.3-web/css/all.min.css">
<link rel="stylesheet" href="sanpham.css">
<link rel="stylesheet" href="chitietsanpham.css">
<link rel="stylesheet" href="media1.css">
</head>
<body>
<header>
</div>
</div>
</div>



icon"></i></div>
Thiệu</div>
</div>
</div>
</div>
search"></i></a>
</div>
</div>
</div>
</div>

</a>
<a href="" class="header-top-center-left-item">
</div>
</div>

</a>
</div>
</div>
</header>

<div class="menu">

<div class="menu-item item-list-menu"><a href="sanpham.html">

<i class="fas fa-list"></i> Danh Mục Sản Phẩm</a></div>
lộc</div>
tiền</div>
cọp</div>
Singapore</div>
</div></div>
</div>
lan</div>
xoắn</div>
tử</div>
tỏi</div>

</div>
</div>
</div>
</div>
</div>
<div class="page-link">
<a href="sanpham.html">
Trang chủ > Danh mục sản phẩm > <span>Cây Đại Lộc</span></a>
</div>
<div class="main-ctiet-sp">
<div class="main-ctiet-sp-left">
<div class="ctietsp-1">

<div class="ctietsp-1-left">
<div class="ctietsp-1-left-title">
<h1>Cây Đại Lộc</h1>
<p>Danh mục: Cây nội thất- Cây văn phòng |
Thương hiệu: Cây cảnh Nhật Tuấn </p>
</div>
<div class="ctietsp-1-left-img">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://caycanhanhthu.vn/wp-
content/uploads/2020/12/Dai-loc-3.jpg" style="width: 100%;height: 100%;">
</div>

<img
src="https://product.hstatic.net/200000175329/product/cay-dai-
loc_3b12e433ccfe4ac2a5168447c4178509_master.jpg" style="width:100%;height:
100%;">
</div>

<img src="https://giahuygarden.vn/wp-
content/uploads/2019/05/cay-dai-loc-5.jpg" style="width:100%;height: 100%;">
</div>

<img
src="https://xinhgarden.moma.vn/libraries/libraryxhome-2208/images/
z1962352683136_0f72236132b5f7696eae8c1dd36d2dce.jpg"
style="width:100%;height: 100%;">
</div>

<a class="prev" onclick="plusSlides(-
1)">❮</a>
<a class="next"
onclick="plusSlides(1)">❯</a>

<div class="row">
<div class="column">
<img class="demo cursor"
src="https://caycanhanhthu.vn/wp-content/uploads/2020/12/Dai-loc-3.jpg"
style="width:100%" onclick="currentSlide(1)" alt="The Woods">

</div>
src="https://product.hstatic.net/200000175329/product/cay-dai-
loc_3b12e433ccfe4ac2a5168447c4178509_master.jpg" style="width:100%"
onclick="currentSlide(2)" alt="Cinque Terre">
</div>
src="https://giahuygarden.vn/wp-content/uploads/2019/05/cay-dai-loc-5.jpg"
style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
src="https://xinhgarden.moma.vn/libraries/libraryxhome-2208/images/
z1962352683136_0f72236132b5f7696eae8c1dd36d2dce.jpg" style="width:100%"
onclick="currentSlide(4)" alt="Northern Lights">
</div>

</div>
</div>

</div>
<div class="ctietsp-1-left-topic">
<div class="ctietsp-1-left-topic-content">
<p class="topic1">Chúng tôi <span>có gì đặc

biệt</span> để các bạn lựa chọn </p>
<p><i class="fas fa-check"></i> Mang mẫu miễn
phí tư vấn tại nhà 8h00-20h00</p>
<p><i class="fas fa-check"></i> Hơn 1000+ mẫu
mã độc quyền</p>
<p><i class="fas fa-check"></i> Thi công sau
48h</p>
<p><i class="fas fa-check"></i> Ship hàng
miễn phí toàn quốc với đơn từ 200k</p>
</div>
</div>
</div>
<div class="ctietsp-1-right">
<div class="ctietsp-1-right-title">
<i class="fas fa-circle"></i><p>Dành cho
khách lẻ</p>
</div>
<div class="ctietsp-1-right-price">900.000
VNĐ</div>
<div class="ctietsp-1-right-title-2"><a
href="#"><i class="fas fa-gift"></i> Khuyến Mãi</a></div>
<div class="ctietsp-1-right-content">

<div class="ctietsp-1-right-content-text">
<div class="ctietsp-1-right-content-
item"><i class="fas fa-angle-right"></i> Phụ kiện dành cho cây cảnh: Miễn
Phí</div>
item"><i class="fas fa-angle-right"></i> Tư vấn tại nhà tại Đà Nẵng , Hồ Chí
Minh: Miễn Phí</div>
item"><i class="fas fa-angle-right"></i> Giao hàng trong vòng 48h: Miễn
Phí</div>
</div>
</div>
<div class="ctietsp-1-right-content1">
<ul class="ctietsp-1-right-content1-left">
<li><h1>Mô tả sản phẩm</h1>
<p>Cây đại lộc nghe cái tên chúng ta
cũng có thể đoán được một phần ý nghĩa của cây ngay cái tên gọi đầu tiên.
Đại lộc hay còn gọi là cây phát tài
thường sinh sống ở vùng đồi núi cao,
có thể chịu được khô hạn rất tốt với
cấu trúc thân và lá xanh đẹp trồng nhiều để tạo cảnh quan,
nội thất trong nhà.</p>
</li>
</ul>

</div>
<a href="Giohang.html" class="ctiet-btn1">
<p class="title-btn">MUA NGAY</p>
<p>Giao hàng trên toàn quốc</p>
</a>
<a href="#" class="ctiet-btn1 color-nother">
<p class="title-btn">TƯ VẤN TẠI NHÀ</p>
<p>Mang mẫu tư vấn miễn phí</p>
</a>

</div>
<p>Đặt hàng ngay</p>
<input type="text" placeholder="Nhập Số điện
thoại">
<div class="send-btn">Gửi <i class="fab fa-
telegram-plane"></i></div>
</div>
<div class="ctietsp-1-right-content4-text">
<h1 class="ctietsp-1-right-content4-item-
title">HỆ THỐNG CÂY CẢNH CHÍNH HÃNG</h1>

<div class="ctietsp-1-right-content4-item
place"><i class="fas fa-map-marker-alt"></i> Đà Nẵng</div>
<div class="ctietsp-1-right-content4-
item">Cơ sở 1: 48 Cao Thắng, Liên Chiểu , Đà Nẵng</div>
<div class="ctietsp-1-right-content4-
item">Cơ sở 2: 20 Nguyễn trường Tộ , Liên Chiểu, Đà Nẵng</div>
<div class="ctietsp-1-right-content4-item
place"><i class="fas fa-map-marker-alt"></i>HCM-1182 tỉnh lộ 10, Phường Tân
Tạo , Bình Tân , TP.HCM</div>
</div></div>
</div>
</div>
<div class="ctiet-sp2">
<div id="patch1" class="tabcontent">
<div class="patch1-item">
<h1>Đặc điểm của Cây Đại Lộc</h1>
<p>Thân cây đại lộc có thể cao từ 1,5m đến
4m, một gốc có thể nhiều thân và hình dáng của chúng gần như cây phát tài núi
và chúng có thể sinh sống ở ngoài nắng hoặc trong bóng râm.
Chủ yếu người ta trồng cây đại lộc để làm
cây nội thất.
Vốn dĩ là cây thân gỗ, phát triển chậm
thích hợp trồng làm cây cảnh nội thất ở trong phòng khách,
văn phòng làm việc, hành lang, ban công,…
với hình dáng và thân hình đẹp, những chiếc lá dài tạo điểm nhấn cho người
xem cái nhìn tinh tế.
Điểm dễ nhận dạng nhất của thân cây là có
nhiều vết sẹo do cuốn lá rụng để lại tạo thành từng đốt nhỏ,
một gốc có thể có nhiều thân hình trụ
tròn tương ứng với đường kính khoảng 10cm – 12cm, một thân thì chia thành
nhiều nhánh nhỏ có màu trắng xanh.
Lá cây được mọc ở trên đỉnh của thân thì
tập trung thành từng chùm, ở mỗi chùm thì được liên kết thông qua nhiều bẹ
quấn xung quanh thân,
chiều dài của lá khoảng 30cm – 40m, nhọn
ở cuối lá và các lá thường mọc dài ra, cong xuống tạo độ mềm mại hơn những
chiếc lá cây phát tài núi.
Nhưng chúng thường xanh hơn, độ bóng hơn
và khi về già các lá sẽ rụng tạo thành đốt trên thân cây.
</p>
<img src="https://giahuygarden.vn/wp-
content/uploads/2019/05/5-cay-dai-loc-7.jpg" alt="">
</div>
<div class="patch1-item">
<h1>Ý nghĩa cây đại lộc trong phong thủy</h1>
<p>Trong phong cách trang trí cây cảnh nội
thất thì chúng ta không thể bỏ qua những cây mang ý nghĩa sâu sắc trong phong
thủy.
Với cây đại lộc được xem là cây mang đến
sự tài lộc, may mắn cho người trồng và ngoài ra cây còn có tác dụng để

trong làm sạch môi trường sống, giảm bớt

đi nguồn không khí ô nhiễm xung quanh cây.
Chính vì thế, người ta vẫn luôn thích
trồng cây đại lộc trong nhà hoặc sử dụng để tặng cho bạn bè, người thân,
đồng nghiệp, đối tác đều mang ý nghĩa
thực sự sâu sắc. Nếu là một doanh nghiệp kinh doanh luôn cần đến sự may mắn
và tài lộc
thì việc trang trí cây đại lộc là rất hợp
vừa mang đến vẻ đẹp cho không gian, vừa mang ý nghĩa thực sự sâu sắc cần được
chú trọng đến.
</p>
<h1>Hướng dẫn cách trồng và chăm sóc hoa tốt
nhất</h1>
<p>Sau khi đã tìm hiểu về những đặc tính, tác
dụng, ý nghĩa của cây thì bạn yêu thích để trồng trong nhà, trong sân vườn
thì hãy tham khảo ngay cách trồng,
chăm sóc cây tươi tốt giữ được cây đẹp
thỏa thích sự chiêm ngưỡng của nhiều tầm mắt. Cây đại lộc có khả năng sinh
sống ở ngoài nắng,
trong phòng râm và cây có phát triển chậm
thường rất hiếm gặp sâu bệnh nên quá trình chăm sóc tương đối dễ dàng chúng
ta cần lưu ý một số vấn đề chính như sau:
</p>
<p>+ Đất trồng: Thích hợp với đất màu mỡ,
nhiều dinh dưỡng và có khả năng thoát nước tốt.
Cây không có khả năng chịu được úng. Vì
vậy, chỉ cần 2 tháng, 3 tháng thì cung cấp thêm một lượng phân hữu cơ,
phân trùn quế hay loại phân hóa học được
cải tạo và bổ sung năng lượng cho cây.
</p>
<p>+ Nhu cầu nước: Khi trồng cây nội thất ở
trong nhà thì bạn luôn chú ý lượng nước tưới ít hơn bình thường. Thường thì
một tuần chỉ cần tưới khoảng 2 lần là đủ.
Vì thế, cây có khả năng chịu hạn rất tốt
cho nên sẽ không sợ bị khô héo. Vì vậy, nếu trồng ở ngoài trời thì cần phải
tưới nước hàng ngày,
tưới cho thân cây, lá ướt đẫm để có thể
chống bụi bẩn và giúp cây có khả năng quang hợp tốt hơn.
</p>
<p>+ Ánh sáng: Khi trồng ở trong nhà thì
chúng ta cần mang ra hứng hắng từ 4-6 tiếng. Cách 2 tuần mang ra một lần.
</p>
</div>
</div>

<h1>Chưa cập nhật</h1>
</div>
<h1>Chưa cập nhật</h1>

</div>
<div class="tablink-list">
<button class="tablink"
onclick="openCity('patch1', this, '#ff5722')" id="defaultOpen">MÔ TẢ</button>
onclick="openCity('patch2', this, '#ff5722')">TAB TÙY CHỈNH</button>
onclick="openCity('patch3', this, '#ff5722')">ĐÁNH GIÁ</button>
</div>
<div class="a-line"></div>
</div>
</div>
<div class="main-ctiet-sp-right">
<div class="main-ctiet-sp-right-title">Dành Cho Khách
buôn <i class="fas fa-chevron-circle-right"></i></div>
<div class="main-ctiet-sp-right-content1">
<div class="main-ctiet-sp-right-content1-title"><i
class="fas fa-circle"></i> Bán hàng Cùng...</div>
<div class="main-ctiet-sp-right-content1-list">
<div class="main-ctiet-sp-right-content1-item">
<i class="fas fa-circle icon-1"></i>
<div class="main-ctiet-sp-right-content1-
item-content">
<h1>Khách cũ giới thiệu khách mới</h1>
<p>Thưởng từ 100.000 - 200.000đ</p>
</div>
<i class="fas fa-chevron-circle-right
right"></i>
</div>
item-content">
<h1>Dành Cho Cộng tác viên</h1>
<p>Giới Thiệu khách & nhận hoa hồng</p>
</div>
right"></i>
</div>
item-content">
<h1>Thiết kế - chăm sóc cây cảnh </h1>
<p>Đưa khách hàng đến mua thưởng từ
200.000 > 500.000đ</p>
</div>
right"></i>
</div>


</div>
<div class="main-ctiet-sp-right-content1-list2">
<div class="main-ctiet-sp-right-content1-list2-
item"><i class="fas fa-phone-square-alt"></i> HotLine:
<span>02254.290.686</span> </div>
item"><i class="fab fa-facebook-f"></i> Inbox Facebook</div>
item"><i class="fas fa-gift"></i> Phiếu giảm giá</div>
item"><i class="fas fa-map-marker-alt"></i> Chỉ Đường</div>
item"><i class="fas fa-check"></i> Hướng Dẫn Mua Hàng</div>
</div>
</div>
<div class="main-ctiet-sp-right-content1-title">Danh
Mục</div>

<ul class="col_sanpham-list">
<li class="col_sanpham-item"
onclick="fun1()">
<p>Cây nội thất-cây văn phòng</p>
</li>
<li>Cây đại lộc</li>
<li>Cây kim tiền</li>
<li>Cây lưỡi cọp</li>
</div>
<p>Cây công trình</p>
</li>
<li>Cây tử đằng</li>
<li>Cây sử quân tử</li>
</div>
<li class="col_sanpham-item" onclick="fun3()" >
<p>Cây giống</p>
</li>

<li>Cây nhội giống</li>

<li>Cây phong linh giống</li>
<li>Cây chiêu liêu giống</li>
</div>
<p>Cây trồng trong nhà</p>
</li>
<li>Cây đế vương</li>
<li>cây chuối cảnh</li>
<li>Cây lan tuyết</li>
</div>
<p>Cây để bàn</p>
</li>
<li>Cây trầu bà</li>
<li>Cây dứa sọc vàng</li>
<li>Tiểu cảnh sen đá</li>
</div>
<p>Cây xanh ngoại thất</p>
</li>
<li>Cây hoa giấy</li>
<li>Cây tùng tháp</li>
</div>
<p>Cây thuốc nam</p>
</li>
<li>Cây đô la bạc</li>
<li>Cây nhàu</li>
<li>Cây xạ đen</li>
</div>
<p>Cây cảnh ngày tết</p>
</li>

<li>Cây tùng tuyết mai</li>

<li>Cây hoa hải đường</li>
<li>Cây bạch lan dương</li>
</div>
<p>Cây hoa cảnh</p>
</li>
<li>Hoa trạng nguyên</li>
<li>Hoa thiên điếu</li>
<li>Hoa dừa cạn đứng</li>
</div>

</ul>
</div>
</div>
<div class="main-ctiet-sp-right-content1-title">Liên
Hệ</div>

user">
list2-img">

</div>
list2-content">
<p class="name">Tuấn Anh</p>
<p class="sdt">0328.778.334</p>
</div>

</div>
user">
list2-img">
</div>
list2-content">
<p class="name">Vĩnh Nhật</p>
<p class="sdt">0123.456.789</p>
</div>

</div>
</div>
</div>

<div class="main-ctiet-sp-right-content1-title">Sản
phẩm bán chạy</div>

news">
<div class="news-img"><img
src="https://webcaycanh.com/wp-content/uploads/2022/04/cay-sen-da-giva-
255x255.jpg" alt=""></div>
<div class="news-content">
Sen đá Giva
</div>
</div>
news">
src="https://webcaycanh.com/wp-content/uploads/2022/04/cay-bang-cam-thach-la-
tim-255x255.jpg" alt=""></div>
Cây Bàng Lá Thạch Cẩm Tim
</div>
</div>
news">
src="https://webcaycanh.com/wp-content/uploads/2022/01/cay-cau-vang-
255x255.jpg" alt=""></div>
Cây Cau Lụa Vàng
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="comment">
<div class="comment-title">
<a href="#" class="blue">Bình Luận bằng tài khoản
Facebook</a>
<a href="#" >Bình Luận bằng tài khoản Google</a>
</div>
<div class="comment-number">
<div class="nummer-cmt">0 Bình Luận</div>

<div class="sort">
<p>Sắp Xếp Theo</p>
<select>
<option value="1">Cũ nhất</option>
<option value="2">Mới Nhất</option>
</select>
</div>
</div>
<div class="cmt-user">
<div class="user-cmt"></div>
<input type="text" placeholder="Thêm Bình Luận">
</div>
<a href="#" class="cmt-link">
<i class="fab fa-facebook-square"></i> Plugin bình luận trên
Facebook
</a>
</div>
<div class="main-sp-view">
<div class="main-sp-view-title">Sản Phẩm Đã xem</div>
<div class="main-sp-view-content">
<img
src="https://cayvahoa.net/wp-content/uploads/chau-cay-hoa-cuc-indo-trang-tri-
cua-so-1-300x300.jpg" alt="">
</div>
Cây hoa cúc indo
</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-hoa-ngan-sao-300x300.jpg"
alt="">
</div>
Cây hoa ngàn sao
</div>
</a>

<img
src="https://cayvahoa.net/wp-content/uploads/cay-hanh-phuc-de-ban-
300x300.jpg" alt="">
</div>
Cây hạnh phúc để bàn
</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/cay-dua-soc-vang-300x300.jpg"
alt="">
</div>
Cây dứa sọc vàng
</div>
</a>
<img
src="https://cayvahoa.net/wp-content/uploads/Cay-thinh-vuong-1-300x300.png"
alt="">
</div>
Cây thịnh vượng
</div>
</a>
</div>
</div>
<footer>
<div class="footer1-content-left">Đăng kí nhận tin</div>
</div>


</div>
</div>
</div>
<div class="col1-title">CÔNG TY CP CÂY CẢNH NHẬT TUẤN
</div>
<div class="col1-content">DĐKD: 02254.290.686 do Sở
Kế hoạch và đầu tư Đà Nẵng Cấp ngày 19/05/2022</div>
</div>
</div>
<div class="col1">
</div>
</div>

</div>
</div>
<div class="col2">
<li>Đăng kí</li>
</ul>
</div>
<div class="col2">


<li>Liên Hệ</li>
</ul>
</div>
<div class="col2">
</ul>
</div>
<div class="col2">
<li>Liên Hệ</li>
<li>Bán Hàng</li>

</ul>
</div>
</div>
<div class="col3">
alt=""></div>

</div>
</div>
<div class="col4">
</div>
<div class="col5">
<div>Gửi</div>
</div>

</div>
Design by NhatTuan
</div>
</div></div>
</footer>

<script src="./js/js.js"></script>
<script src="./js/js2.js"></script>
<script src="./js/js.js"></script>
<script src="./js/js3.js"></script>
</body>
</html>
2. CSS
TRANG CHỦ
/**{
margin:0;
padding:0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}*/
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

body {
width: 100%;
margin: auto;
background-color:rgb(194, 185, 185)!important;
}

/*slider*/

.logo h1 {
font-size: 35px;
margin-left: 10px;
letter-spacing: 1px;
color: #333;
}

button {
height: 50px;
padding: 0 35px;
border: none;
border-radius: 25px;

background: #333;
color: #fff;
font-size: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-top:50px;
text-transform:inherit;
}
#Slider {
display: flex;
background: rgb(252, 252, 252);
height: 600px;
overflow: hidden;
border:1px solid #fff;
width: 1400px;
margin-left:65px;
}

.col-1,
.col-2 {
flex-basis: 50%;
}

.col-1 {
padding: 5% 5% 5% 5%;
position: relative;
}

.col-1 h2 {
font-size: 25px;
color: #333;
}
.col-1 h2 img{
width:40px;
margin: 20px 10px 0 0;
}
.col-1 p {
font-size: 18px;
line-height: 22px;
color: #777;
margin: 30px 0 30px;
}

.col-2 img {
display: block;
width: 100%;
height: 100%;
}


.col-1 ul {
position: absolute;
bottom: 30px;
}

.col-1> ul> li {
display: inline-block;
width: 15px;
height: 15px;
background-color: #bfbfbf;
border-radius: 50%;
margin-right: 15px;
cursor: pointer;
}

.col-1 ul .active {
background-color: #333;
}

.zoom {
animation: zoomout 1s linear 1;
}

@keyframes zoomout {
0% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}

/*Benefits*/
.Benefits{
display:flex;
background:rgb(255, 255, 255);
margin-top:100px;
border:1px solid #ccc;
}
.Benefits li{
margin:20px 40px 20px 80px;
color:rgb(21, 19, 19);
}
.Benefits li img{
width:15%;
display:block;
margin-left: auto;
margin-right: auto;

padding-bottom: 10px;
}
.Benefits li h3{
text-align: center;
}
.Benefits li p{
text-align: center;
}
GIỎ HÀNG
* {
margin: 0;
padding: 0;
}

body {
width: 100%;
margin: auto;
background-color:rgb(255, 255, 255)!important;
}
header{
background-color: #cc0000;
width: auto;

}
.header-top{
height: 35px;
width: 1200px;
display: flex;
justify-content: space-between;
margin: 0 auto;
align-items: center;
}
.header-top-left{
width: 128px;
display: flex;
}
.header-top-left-icon i{
color: #fff;
}
.header-top-left-icon i:hover{
color: #fffb06;
}
.header-top-right{
display: flex;
width: 240px;

}
.header-top-right-item{
font-size: 14px !important;
color: #fff;
}
.header-top-right-item:hover{
color: #fffb06;
}
.header-height{
width: 100%;
height: 0.1px;
background: #fff;
}
.header-media{
display: none;
}
.btn-media-open{
cursor: pointer;
display: none;
font-size: 30px;
margin-right: 30px;
margin-left: 10px;
color: #fff;
}
.btn-media-open-text{
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.btn-media-open-item{
color: #fff;
padding: 20px;
border: 1px solid #ccc;
}
.header-top-center{
width: 1200px;
margin: 0 auto;
display: flex;
height: 80px;
}

.header-top-center-search{
display: flex;
width: 470px;
height: 40px;
}
.header-top-center-search input{
width: 100%;
border-radius: 5px;
padding-left: 15px !important;

}
.header-top-center-search input:focus{
outline: none;
}
.search-icon{
width: 45px;
height: 38px;
position: absolute;
background: #ff2722;
padding: 5px;
padding-left: 14px;
margin-left: 423px;
margin-top: 1px;
border-radius: 5px;
padding-top: 7px;
}
.search-icon i{
color: #fff;
}
.header-top-center-left{
display: flex;
width: 320px;
height: 44px;
}
.header-top-center-left-item{
display: flex;
width: 156px;
height: 44px;
background: #faa900;

}
.header-top-center-left-item-content{
color: #fff;
font-size: 14px;
padding-right: 10px; margin-left: 15px!important;
}
.content1-header2{

font-size: 12px;
}
.item-header-icon{
color: #fff;
margin-top: 7px;
font-size: 18px;
padding-left: 15px;
}
/* end--header */
/* menu */
.menu{
width: 100%;
height: 55px;
background: #191919;
}
.menu-content{
width: 1200px;
margin: 0 auto ;
display: flex;
height: 100%;
color: #fff;
}
.dropdown1-content{
width: 310.8px;
background-color: #fff;
position: absolute;
color: #000;
z-index: 999;
opacity: 0;
-webkit-transform: perspective(600px) rotateX(-90deg);
-moz-transform: perspective(600px) rotateX(-90deg);
-ms-transform: perspective(600px) rotateX(-90deg);
-o-transform: perspective(600px) rotateX(-90deg);
transform: perspective(600px) rotateX(-90deg);
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.6s ease,
max-height 0.6s step-end, max-width 0.6s step-end, padding 0.6s step-end;
-o-transition: -o-transform 0.5s ease, opacity 0.6s ease, max-height
0.6s step-end, max-width 0.6s step-end, padding 0.6s step-end;
transition: transform 0.5s ease, opacity 0.6s ease, max-height 0.6s
step-end, max-width 0.6s step-end, padding 0.6s step-end;
box-shadow: 0px 3px 25px 0px rgb(31 38 67 / 10%);
-o-box-shadow: 0px 3px 25px 0px rgba(31, 38, 67, 0.1);
-moz-box-shadow: 0px 3px 25px 0px rgba(31, 38, 67, 0.1);
-webkit-box-shadow: 0px 3px 25px 0px rgb(31 38 67 / 10%);
-webkit-transform-origin: 0% 0%;

-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.dropdown1-content-item{
padding: 11px 15px;
cursor: pointer;
}
.dropdown1-content-item:hover{
background-color: #fd4a12;
color: #fff;
}
.item-has-dropdown:hover .dropdown1-content{
opacity: 1;
-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform: perspective(600px) rotateX(0deg);
-ms-transform: perspective(600px) rotateX(0deg);
-o-transform: perspective(600px) rotateX(0deg);
transform: perspective(600px) rotateX(0deg);
max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
0s step-end, max-width 0s step-end, padding 0s step-end;
transition: transform 0.5s ease, opacity 0.2s ease, max-height 0s
step-end, max-width 0s step-end, padding 0s step-end;
}
.dropdown1-content-item i{
position: absolute;
right: 20px;
}
.dropdown-lv2{
width:885px;
height: 413px;
position: absolute;
margin-left: 310px;
margin-top: -45px;
display: flex;
display: none;
}
.dropdown-lv2-item:hover{
color:#fd4a12
}
.dropdown-lv2-item{
cursor: pointer;
padding: 20px;
}
.item-dropdown-lv2:hover .dropdown-lv2{

display: block;
}
.dropdown-lv2-content{
display: flex;
}
.menu-item{
padding: 14.7px 30px;
text-transform: uppercase;
font-size: 17px;
}
.menu-item a{
font-size: 17px;
}
.item-list-menu{
padding: 14.7px 55px !important;

}
.menu-item:hover{
background: #fd4a12 ;
}
/* Transport*/
.Transport{
padding: 100px 0;

}
.cart-top-wrap{
display:flex;
justify-content: center;

}
.cart-top{
height:1px;
width:400px;
background-color: #ddd;
display: flex;
justify-content:space-between;
background-color: rgb(185, 185, 185);
margin:50px 0 100px;

}
.cart-top:last-child{

width:40px;
}
.cart-top-item{
width:40px;
height:40px;
border-radius: 50%;
border: 2px solid rgb(179, 177, 177);
display: flex;
}
.cart-top-item{
color:rgb(164, 162, 162);
}
.cart-top-cart{
border:1px solid #0DB7EA;

}
.cart-top-cart i{
color:#0DB7EA;
}
.Thanhtien{
padding-left:20px;
padding-right: 20px;

}
.container{
display:flex;
}
section{
margin-bottom: 300px;
}
.left_content{
display:flex;

width:100%;
text-align: center;
padding-left: 50px;
border-right: 1px solid #ddd;
}
.left_content th{
font-family: var(--main-text-font);

font-size:14px;
color:#333;
border-collapse: collapse;

}
.left_content p{
font-family: var(--main-text-font);
font-size:14px;
color:#333;
}
.left_content img{
width:100%;
height:auto;

}
.left_content td input{
width:40px;
}
.left_content span{
display:block;
width:20px;
height:20px;
border:1px solid rgb(0, 0, 0);
cursor: pointer;
color:white;
}
.left_content td{
padding:50px;
border-top: 2px solid #ddd;
width:60%;

}
.xuatxu{
padding:0 65px;

}
.right_content th{
text-decoration: underline;
}
.right_content, td{
padding:10px 0px;
}
.right_content tr:nth-child(5) td{
border-bottom: 2px solid #ddd;
}

.right_content tr td:last-child{
text-align: right;
}
.right_content_button{
text-align: center;
}
.right_content_button button{
padding:0 18px;
height:35px;
cursor:pointer;
width:125px;

}
.right_content_button td:first-child button{
border:1px solid black;
width:164px;
color:#000;

}
.right_content_button td:first-child button:hover{

}
.right_content_button td:last-child button{
background-color: black;
color:#fff;
border:1px solid black;
}
.right_content_button td:last-child button:hover{
color:black;
}
.right_content_login{
text-align: center;
}
LOGIN
@import url('https://fonts.googleapis.com/css?
family=Poppins:100,200,300,400,500,600,700,800,900&display=swap');
*{
margin:0;
padding: 0;
font-family: 'Poppins' ,sans-serif;

}

body{
overflow: hidden;

}
section{
display: flex;
min-height: 100vh;
background: #000;
}
section .color{
position: absolute;
filter: blur(150px);
}
section .color:nth-child(1)
{
top:-350px;
width: 600px;
height: 600px;
background: #ee5007;
}
{
bottom: -150px;
left: 100px;
width: 500px;
height: 500px;
background: #f17806;
}
{
bottom: 50px;
right: 100px;
width: 300px;
height: 300px;
background: #f37806;
}
.box{
position: relative;

}
.container{
position: relative;

width: 480px;
min-height: 400px;
background: rgba(255,255,255,0.1);
display: flex;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border-right: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.form{
position: relative;
width: 100%;
height: 100%;
padding: 40px;
.form h2{
position: relative;
color: #fff;
font-weight: 600;
font-size: 24px;
}
.form h2::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
width: 80px;
height: 4px;
background: #fff;
}
.form .inputBox{
width: 100%;
margin-top: 20px;
}
.form .inputBox input{
width: 100%;
background: rgba(255,255,255,0.2);
border:none;
outline: none;

padding: 10px 20px;

border-right: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
font-size: 16px;
color: #fff;
}
.form .inputBox input::placeholder
{
color:#fff

}
.form .inputBox input[type="submit"]
{
background: #fff;
color:#666;
max-width: 135px;
cursor: pointer;
font-weight: 600;
}
.forget
{
margin-top: 5px;
color:#fff;
}
.forget a{
color:#fff;
font-weight: 600;
}
SẢN PHẨM
.page-link{
width: 1200px;
margin: 0 auto;
color: #959595;
font-size: 14px;
padding: 10px 0;
cursor: pointer;
}
.page-link span{
color:#fd4a12;
}
.sanpham_banner{
width: 1200px;

margin: 0 auto;
height: 500px;
}
.sanpham_banner img{
width: 100%;
height: 100%;
}
.main_sanpham{
width: 1200px;
margin: 0 auto;
}
.main_sp-title{
padding: 10px 0;
font-size: 20px;
}
.main-sp-list{
display: flex;
}
.main-sp-list-item{
padding: 15px 20px;
font-size: 13px;
}
.is-now{
color: #fff;
}
.main-sp-list-item:hover{
color: #fff;
}
.main_sanpham-content{
margin-top: 50px;
display: flex;
}
.main_sanpham-left{
width: 290px;
}
.col_sanpham-item{
display: flex;

}
.col_sanpham1-title{
font-size: 20px;
border-bottom: 1px solid #f49527;
}

.col_sanpham-item{
padding: 7px 0;
}
.col_sanpham-item i{
font-size: 5px;
}
.add-icon{
position: absolute;
margin-left: 250px !important;

}
.col_sanpham-item p{
margin-left: 30px;
}
.col_sanpham-item i{
margin-left: 10px;
}
.col_sanpham2{
}
.col_sanpham2-title{
padding: 10px;

border-bottom: 1px solid #ccc;
font-size: 15px;

}
.col_sanpham2-1{
padding: 10px;
}
.col_sanpham2-1-title1{
font-size: 14px;
}
.col_sanpham2-1{
}
.col_sanpham2-1-title{
font-size: 12px;
color: #777575;
padding: 5px 0;
margin-left: 10px;
}
.col_sanpham2-1-content{
margin-top: 10px;
}
.col_sanpham2-1-node{

width: 270px;
height: 30px;
display: flex;
margin-top: 20px;
}
.col_sanpham2-1-node input{
width: 100%;
height: 100%;
padding-left: 10px;

}
.col_sanpham2-1-node input:focus{
outline: none;
}
.col_sanpham2-1-node i{
width: 35px;
height: 30px;
background-color: #f68e2e;
padding: 7px;
color: #fff;
}
.main_sanpham-right-content{
width: 910px;
margin-left: 30px;
margin-top: -30px;
}
.footer-page{
width:180px ;
margin: 0 auto;
margin-top: 30px;
}
.footer-page button{
padding: 3px 7px;
cursor: pointer;
}
.now{
background-color: #fb3f3e !important;
color: #fff;
}
.footer-page button:hover{
background-color: #fb3f3e !important;
color: #fff;
}
.main_sanpham-right{
}

.item3_1{
float: left;
width: 230px !important;
padding: 0 15px !important;
}
.item3{
border-right: 1px solid #ccc;
float: left;
}
.main-sp-view{
display: block;
width: 1200px;
margin: 0 auto;
height: 370px;
}
.main-sp-view-content{
padding: 17px
}
.main-sp-view-title{
padding: 5px 17px;
font-size: 16px;
}
.col_sanpham-item:hover p{
color: #fb3f3e;
}
.col_sanpham-item:hover i{
color: #fb3f3e;
}
.fun1{
margin-left: 90px;
font-size: 14px;
display: none;
}
.fun1 li:hover{
background-color: #fb3f3e;
color:#fff;
}
.show{
display: block !important;
}
STYLE
header{
background-color: #cc0000;

width: 100%;

}
.header-height{
width: 100%;
height: 0.1px;
background: #fff;
}
.header-top{
height: 35px;
width: 1200px;
display: flex;
margin: 0 auto;
}
.header-top-left{
width: 128px;
display: flex;
}
.header-top-left-icon i{
color: #fff;
}
.header-top-right{
display: flex;
width: 240px;
}
.header-top-right-item{
color: #fff;
}
.header-top-right-item:hover{
color: #fffb06;
}
.header-top-left-icon i:hover{
color: #fffb06;
}
.header-top-center{
width: 1200px;
margin: 0 auto;
display: flex;
height: 80px;
}
display: flex;
width: 470px;

height: 40px;
}
.header-top-center-search input{
width: 100%;
border-radius: 5px;

}
.header-top-center-search input:focus{
outline: none;
}
.search-icon{
width: 45px;
height: 38px;
position: absolute;
padding: 5px;
padding-left: 14px;
margin-left: 423px;
margin-top: 1px;
border-radius: 5px;
padding-top: 7px;
}
.search-icon i{
color: #fff;
}
display: flex;
width: 320px;
height: 44px;
}
.header-top-center-left-item{
display: flex;
width: 156px;
height: 44px;
background: #faa900;

}
.header-top-center-left-item-content{
color: #fff;
font-size: 14px;
padding-right: 10px; margin-left: 15px!important;
}
.content1-header2{
font-size: 12px;
}
.item-header-icon{

color: #fff;
margin-top: 7px;
font-size: 18px;
padding-left: 15px;
}
/* end--header */
/* menu */
.menu{
width: 100%;
height: 55px;
background: #191919;
}
.menu-content{
width: 1200px;
margin: 0 auto ;
display: flex;
height: 100%;
color: #fff;
}
.menu-item{
font-size: 17px;
}
.item-list-menu{
padding: 14.7px 55px !important;
}
.menu-item:hover{
}
/*ketthuc menu*/
.banner1{
width: 100%;
height: auto;
}
.banner1 img{
width: 100%;
height: auto;
}
.title-banner1-all{
width: 100%;
background-color:#f3f3f3 ;

}
.title-banner1{
width: 1200px;
margin: 0 auto;
display: flex;
height: 105px;

}
.title-banner1-item{
display: flex;
width: 260px;
height: 53px;
}
.title-banner1-item-content h1{
font-size: 14px;
}
.title-banner1-item-content p{
font-size: 13px;
}
.title-banner1-item-content{
margin-left: 10px;

}
.title-banner1{

}
.main-content{
width: 100%;
margin-top: 30px;
}
.main-content1{
width: 1200px;
margin: 0 auto;
}
.main-content-title{
text-align: center;
font-size: 25px;
font-weight: 400;
}
.main-content1-border{
width: 80px;
margin: 0 auto;
height: 2px;

background: #fd4a12;
margin-top: -1px;
}
.main-content1-menu{
display: flex;
width: 366px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
}
.main-content1-menu-item{
padding: 3px 35px;
font-size: 14px;
background: #eeeeee;
cursor: pointer;
}
.node-item{
background: #fd4a12;
color: #fff;
}
.main-content1-item{
width:200px ;
height: 290px;
overflow: hidden;
display: block;
border: 1px solid #fff;
}
.sale{
background: #ed3f46;
width: 52px;
height: 24px;
padding: 2px 12px;
color: #fff;
border-radius: 5px;
position: absolute;
margin-top: 20px;
z-index: 10;
}
.main-content1-item-img {
width: 200px;
height: 182px;

overflow: hidden;
}
.main-content1-item-img img{
width: 100%;

height: 100%;
display:block;
transition: all .3s ease;
}
.main-content1-item-img img:hover{
}
.main-content1-item-title{
text-align: center;
margin-top: 20px;
}
.main-content1-item-price{
text-align: center;
color: #ff2722;
font-weight: 500;
margin-top: 10px;
}
.main-content1-content{
display: flex;
margin-top: 20px;
}
.main-content1-item:hover{
z-index: 1;
}
.banner-content1{
width: 1200px;
margin: 0 auto;
display: flex;
margin-top: 50px;
cursor: pointer;
}
.banner-content1-img img{
width: 587px;
height: 230px;
vertical-align: middle;
display:block;
transition: all .3s ease;
}
.banner-content1-img{
display: block;
overflow: hidden;
}
.banner-content1-img img:hover{
}
.banner-content2{
width: 1200px;

margin: 0 auto;
margin-top: 20px;
}
.banner-content2-header{
display: flex;
height: 40px;
background-color: #eeeeee;
}
.banner-content2-header-item{
padding: 5px 10px;
font-weight: 500;
height: 40px;
}
.node-item2{
width: 226px;
height: 40px;
font-size: 20px;
color: #fff;
text-align: center;
}
.node-item2::before{
content: "";
border-width:10px 10px;
border-style: solid;
border-color: transparent transparent transparent #ff2722;
position: absolute;
margin-left: 193px;
margin-top: 6px;

}
.node-item2::after{
content: "";
border-width:20px 30px;
width: 90px;

}
.banner-content2-header-left{
height: 40px;
}
.banner-content2-header-right{
padding: 5px 15px;
}

.banner-content2-header-item:hover{
color: #ff2722;
}
.node-item2:hover{
color: #fff;
}
.clear{
clear: both !important;
}
.banner-content2-content{
display: flex;
}
.banner-content2-content-left{
width: 900px;
}
.item2{
float: left;
margin-top: 30px;
margin-right: 20px;
}
.banner-content2-content-right{
width: 295px;
height: 650px;
}
.banner-content2-content-right img{
width: 100%;
height: 100%;
}
.banner-content3{
width: 1200px;
margin: 0 auto;
margin-top: 30px;
height: 190px;
}
.banner-content3 img{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
}
.new-feed-content{
width: 1200px;
margin: 0 auto;
}
.new-feed-content-title{
text-align: center;
font-size: 22px;
font-weight: 400;

margin-top: 20px;
}
.new-feed-content-border{
width: 70px;
margin: 0 auto;
height: 2px;
margin-top: 15px;
}
.new-feed-content-item{
width: 281px;
}
.new-feed-content-item:hover{
}
.new-feed-content-list{
margin-top: 20px;
display: flex;
}
.new-feed-content-img{
width: 100%;
height: 190px;
padding:5px 10px;
}
.new-feed-content-img img{
width: 100%;
height: 100%;
}
.new-feed-content-text{
width: 100%;
text-align: justify;
font-weight: 700;

padding: 5px 10px;
}
.new-feed-content-time{
color: #959595;
font-size: 12px;
padding: 5px 10px;
}
.new-feed-content-text2{
text-align: justify;
padding: 5px 10px;

}
.main-brand{
width: 1200px;
display: flex;
margin: 0 auto;
margin-top: 70px;
}
.footer1{
width: 100%;
height: auto;
}
.footer1-content{
width: 1200px;
margin: 0 auto;
display: flex;
height: 60px;

}
.footer1-content-left{
font-size: 18px;
color: #fff;
}
.footer1-content-center{
width: 610px;
height: 41px;
display: flex;
}
.footer1-content-center input{
width: 100%;
height: 100%;
border: none;
padding-left: 10px;
}
.footer1-content-center input:focus{
outline: none;
}
.footer1-content-right{
display: flex;
width: 135px;
}
.footer1-content-center i{

position: absolute;
width: 57px;
height: 38px;
background: #000;
color: #fff;
font-size: 26px;
padding: 5px;
padding-left: 13px;
margin-left: 552px;
margin-top: 1.5px;
cursor: pointer;

}
.footer2-content{
width: 100%;
background-image: url('../img/banner10.jpg') ;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.lop-phu{
width: 100%;
height: auto;
background-color: rgba(0,0,0,0.7);
}
.footer2-content1{
display: flex;
color: #fff;
width: 1200px;
margin: 0 auto;
padding-top: 30px;

}
.col1{
width: 371px;
text-align: center;
}
.col1-2{
width: 550px;
}
.col1-content{
font-size: 13px;
}
.col1-title{
font-size: 20px;
}

.col1-content{
margin-top: 10px;
}
.footer2-content1{
}
.footer2-content2{
display: flex;
width: 1200px;
margin: 0 auto;
color: #fff;
margin-top: 30px;
}
.col2-title{
font-size: 20px;
font-weight: 600;
}
.col2-content{
font-size: 14px ;
margin-top: 15px;
}
.col2-content li{
margin-top: 10px;
margin-left: 20px;
}
.footer2-content3{
display: flex;
width: 1200px;
margin: auto;
color: #fff;
margin-top: 40px;
border-bottom: 1px solid #Ccc;
}
.col3{
width: 245px;
display: flex;
}
.col3-img{
width: 50px;
height: 50px;

.col3-img img{
width: 100%;
height: 100%;
}
.col3-content p{
color: #fff;
font-size: 17px;
width: 125px;
text-align: center;
margin-right: 30px;
}
.col4{
width: 240px;

}
.col4 p{
color: #fff;
}
.col5{
width: 435px;
height: 40px;
display: flex;
}
.col5 input{
width: 340px;
height: 100%;
background-color: rgba(255,255,255,0.3);
}
.col5 div{
width: 90px;
height: 40px;
padding: 7px;
cursor: pointer;
}
.footer2-content4{
color: #fff;
width: 1200px;
margin: 0 auto;
height: 62px;
padding-top: 20px;
}
.dropdown1-content{
width: 310.8px;
position: absolute;
color: #000;
z-index: 999;

opacity: 0;
-webkit-transform: perspective(600px) rotateX(-90deg);
-moz-transform: perspective(600px) rotateX(-90deg);
-ms-transform: perspective(600px) rotateX(-90deg);
-o-transform: perspective(600px) rotateX(-90deg);
transform: perspective(600px) rotateX(-90deg);
max-height 0.6s step-end, max-width 0.6s step-end, padding 0.6s step-end;
0.6s step-end, max-width 0.6s step-end, padding 0.6s step-end;
transition: transform 0.5s ease, opacity 0.6s ease, max-height 0.6s
step-end, max-width 0.6s step-end, padding 0.6s step-end;
box-shadow: 0px 3px 25px 0px rgb(31 38 67 / 10%);
-o-box-shadow: 0px 3px 25px 0px rgba(31, 38, 67, 0.1);
-moz-box-shadow: 0px 3px 25px 0px rgba(31, 38, 67, 0.1);
-webkit-box-shadow: 0px 3px 25px 0px rgb(31 38 67 / 10%);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.dropdown1-content-item{
padding: 11px 15px;
cursor: pointer;
}
.dropdown1-content-item:hover{
color: #fff;
}
.item-has-dropdown:hover .dropdown1-content{
opacity: 1;
-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform: perspective(600px) rotateX(0deg);
-ms-transform: perspective(600px) rotateX(0deg);
-o-transform: perspective(600px) rotateX(0deg);
transform: perspective(600px) rotateX(0deg);
max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
0s step-end, max-width 0s step-end, padding 0s step-end;
transition: transform 0.5s ease, opacity 0.2s ease, max-height 0s
step-end, max-width 0s step-end, padding 0s step-end;
}
.dropdown1-content-item i{
position: absolute;
right: 20px;
}
.dropdown-lv2{
width:885px;

height: 413px;
position: absolute;
margin-left: 310px;
margin-top: -45px;
display: flex;
display: none;
}
.dropdown-lv2-item:hover{
color:#fd4a12
}
.dropdown-lv2-item{
cursor: pointer;
padding: 20px;
}
.item-dropdown-lv2:hover .dropdown-lv2{
display: block;
}
.dropdown-lv2-content{
display: flex;
}
.col2-content li:hover{
color: #fd4a12;
}
.col1-3{
}
.col1-content-item i{
width: 30px;
height: 30px;
border:1px solid #ccc ;
padding: 7px;
border-radius: 50%;
cursor: pointer;
}
.header-media{
display: none;
}
.btn-media-open-text{
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;

}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #fff;
}
.btn-media-open{
cursor: pointer;
display: none;
font-size: 30px;
margin-right: 30px;
margin-left: 10px;
color: #fff;
}
.media-item{
display: none;
}
.btn-media-open-item{
color: #fff;
padding: 20px;
}
.add2-icon{
position: absolute;
right: 20px;
}
.fun11-item1{
color: #fff;
padding: 10px;
padding-left: 50px;
}
.fun11{
display: none;
}
.show{
display: block;
}
.fun11-item2{
padding-left: 80px;
}
.fun12{
height: 0;
overflow: hidden;
}
.fun12s{

height: auto;
}
.node-none{
background: #eeeeee;
color: #000;
}
.banner-content2-header-media-content{
display: none;
}
.show{
}
.banner-content2-header-media{
display: none;
padding: 0 15px;
}
.banner-content2-header-media-content{

}
.banner-content2-header-item-media{
padding: 10px 30px;
width: 100%;
}
CHITIETSANPHAM
.main-ctiet-sp{
font-family: 'Roboto Regular', sans-serif !important;

}
.container {
position: relative;
margin-top: 10px;
}

/* Hide the images by default */
.mySlides {
display: none;
width: 515px;
height: 421px;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through
*/
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Container for image text */
.caption-container {
text-align: center;
padding: 2px 16px;
color: white;
}
.row{
margin-top: 10px;
display: flex;

width: 100%;
}
.row:after {
content: "";
display: table;
clear: both;
}

/* Six columns side by side */
.column {
width: 129px;
height: 100px;

}

/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}
.main-ctiet-sp{
width: 1200px;
margin: 0 auto;
display: flex;
}
.main-ctiet-sp-left{
width: 960px;
}
.main-ctiet-sp-right{
width: 240px;
}
.ctietsp-1{
display: flex;
}
.ctietsp-1-left{
width: 516px;
}

.ctietsp-1-left-title{
margin-top: 20px;
color:#ff0006;
font-weight: 600;
}
.ctietsp-1-left-title h1{
font-size: 30px;
font-weight: 500;
}
.ctietsp-1-left-title p{
font-size: 12px;
}
.ctietsp-1-left-topic p{
font-size: 13px;
font-weight: 600;
padding: 3px 20px;
}
.ctietsp-1-left-topic span{
color: red;
font-size: 14px;
}
.ctietsp-1-left-topic i{
color: red;
font-size: 10px;
}
.ctietsp-1-left-topic-content{
padding: 10px;
}
.ctietsp-1-left-topic{
background-color: #f5f5f5;
margin-top: 60px;
}
.ctietsp-1-right{
width: 435px;
}
.ctietsp-1-right-title{
width: 100%;
height: 50px;
margin-top: 20px;
border: 1px solid#000;
padding: 11px 20px;
display: flex;
}
.ctietsp-1-right-title i{

padding: 7px;
border: 1px solid #888;

border-radius: 50%;
color: red;
}
.ctietsp-1-right-title p{
padding-top: 3px;
margin-left: 10px;
font-weight: 600;
}
.ctietsp-1-right-price{
color: red;
font-size: 25px;
font-weight: 600;
padding: 18px 10px;
}
.ctietsp-1-right-title-2{
width: 406px;
height: 43px;
background-color: #33496d;
color: #fff;
margin-left: 10px;
margin-top: 10px;

}
.ctietsp-1-right-title-2 a{
font-size: 20px;
padding: 5px 20px;
color: #fff;
width: 100%;
}
.ctietsp-1-right-title-2 a i{
margin-right: 15px;
}
.ctietsp-1-right-content-text{
padding: 15px;
border: 2px dotted rgb(10, 17, 96);
width: 406px;
}
.ctietsp-1-right-content-item{
font-size: 14px;

}
.ctietsp-1-right-content-item i{
font-size: 12px;
color: red;
}
.ctietsp-1-right-content1{
display: flex;
margin-left: 10px;
}

.ctietsp-1-right-content1-left span{
font-size: 15px;
font-weight: 600;
}
.ctietsp-1-right-content1-left p{
width: 380px;
}
.ctietsp-1-right-content1-left h1{
width: 390px;
text-align: center;
color: #ff0006;
}
padding: 10px;
border: 2px dotted rgb(10, 17, 96);
width: 406px;
}
display: flex;
padding: 20px;
margin-top: -10px;
}
.ctiet-btn1{
width: 190px;
height: 50px;
background-color: #01a89e;
text-align: center;
border-radius: 5px;

}
.ctiet-btn1 p{

color: #fff;
font-size: 12px;
}
.title-btn{
font-size: 16px !important ;
margin-top: 3px;
}
.color-nother{
background-color: #3673cc;
}
.ctietsp-1-right-content{
padding: 2px 10px;

}
width: 395px;
height: 55px;
display: flex;
padding: 10px;
background-color: #ff0006;
margin-left: 20px;
border-radius: 5px;
}
.ctietsp-1-right-content3 input{
width: 265px;
height: 30px;
}
.ctietsp-1-right-content3 p{
color: #fff;
}
.send-btn{
position: absolute;
width: 56px;
height: 28px;
background-color: #fded01;
margin-left: 316px;
padding: 4px;
font-size: 14px;
border-left: 1px solid red;
cursor: pointer;
}
.send-btn i{
color: red;
}
width: 395px;
height: 147px;
border: 1px dashed red;
margin-top: 40px;
margin-left: 20px;
}
.ctietsp-1-right-content4-item-title{
font-size: 14px;
}
.ctietsp-1-right-content4-item{
font-size: 13px;
margin-left: 10px;
margin-top: 3px;
}
.place{


}
.place i{
color: #ff0006;
}
.ctietsp-1-right-content4-text{
padding: 10px;
}
.main-ctiet-sp-right-title{
width: 100%;
height: 50px;
background-color: #e1e1e1;
margin-top: 20px;
padding: 9px;
padding-top: 13px!important ;
cursor: pointer;
font-weight: 700;
}
.main-ctiet-sp-right-content1-title{
width: 100%;
background-color: #4d4d4d;
height: 36px;
padding:5px;
color: #fff;
}
.main-ctiet-sp-right-content1-title > i{

width: 20px;
height: 20px;
border-radius: 50%;
font-size: 10px;
padding: 4px;
margin-right: 10px;
color: red;
}
.main-ctiet-sp-right-content1{
width: 100%;
background-color: #ebebeb;
margin-top: 30px;
margin-bo
}
.main-ctiet-sp-right-content1-item{
display: flex;
cursor: pointer;

}
.main-ctiet-sp-right-content1-item:hover{
background-color: #4d4d4d;
color: #fff !important;
}
.main-ctiet-sp-right-content1-item:hover p{
color:#fff ;
}
.main-ctiet-sp-right-content1-item{
padding: 10px 3px;
}
.main-ctiet-sp-right-content1-item-content{
margin-left: 10px;

}
.main-ctiet-sp-right-content1-item-content h1{
font-size: 13px;
}
.main-ctiet-sp-right-content1-item-content p{
font-size: 12px;
}
.main-ctiet-sp-right-content1-item i{
color: red;
}
.right{
position: absolute;
margin-left: 220px;
}
.main-ctiet-sp-right-content1-list2{
}
.main-ctiet-sp-right-content1-list2-item{
padding: 5px;

}
.main-ctiet-sp-right-content1-list2-item i{
font-size: 10px;
color: red;
margin-right: 15px;
}
.main-ctiet-sp-right-content1-list2-item:hover{
background-color: #e1e1e1;
cursor: pointer;
}

.main-ctiet-sp-right-content1-list2 .add-icon{
}
.main-ctiet-sp-right-content1-list2-img{
width: 40px;
height: 40px;
border-radius: 50%;
}
.main-ctiet-sp-right-content1-list2-user{
display: flex;
padding: 10px;
cursor: pointer;

}
.main-ctiet-sp-right-content1-list2-content{
margin-left: 15px;
}
.name{
font-weight: 600;
}
.sdt{
font-size: 13px;
color: #ff0006;
}
.main-ctiet-sp-right-content1-list2-news{
padding: 7px;
cursor: pointer;
}
.news-img{
width: 200px;
height: 100px;
}
.news-content{
font-size: 20px;
font-weight: 550;
margin-top: 110px;
text-align: center;
}
.tablink {
background-color: #ebebeb;
color: #888;
float: left;
border: none;
outline: none;
cursor: pointer;

padding: 10px 13px;

font-size: 14px;
border-radius: 5px 5px 0 0 ;
margin-left: 5px;

}

.tablink:hover {
background-color: #ff5722;
color: #fff;
}

/* Style the tab content */
.tabcontent {
color: white;
display: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe
UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
position: absolute;
margin-top: 60px;
}
.tabcontent h1{
color: #000;
}
.a-line{
width:950px;
height: 1px;
position: absolute;
margin-top: 40px;
}
.tablink-list{
width: 340px;
margin: 0 auto;
margin-top: 50px;
}
.main-sp-view{
margin-top: 50px;
}
.patch1-item{
text-align:justify;
width: 900px;
padding: 10px;
margin-top: -10px;
}
.patch1-item img{
width: 880px;
height: 500px;

margin: 20px auto;

}
.patch1-item h1{
width: 600px;
height: 40px;
font-size: 20px;
}
.patch1-item p{
font-size: 15px;
margin-bottom:7px;
}
.comment{
width: 1200px;
margin-top: 400px;
margin-left:auto ;
margin-right: auto;
}
.blue{
color: #5f96f3;
margin-right: 30px;
font-size: 13px;
}
.comment-title a{
font-size: 13px;
}
.comment-number{
width: 870px;
display: flex;
margin-top: 10px;
border-bottom: 1px solid#ccc;
}
.nummer-cmt{
font-weight: 600;
font-size: 13px;
}
.sort{
display: flex;
}
.sort p{
font-size: 13px;
margin-right: 10px;
}
.user-cmt{

width: 40px;
height: 40px;

margin-top: 5px;
}
.cmt-user{
display: flex;
}
.cmt-user input{
margin-left: 20px;
width: 800px;
height: 52px;
border:1px solid #ccc;
padding: 10px;
}
.cmt-user{
padding: 10px;
border-bottom: 1px solid#ccc;
}
.cmt-link{
font-size: 12px;
margin-top: 10px;
color: #3b579d;
}
RESET
*{
padding: 0;
margin: 0;
user-select: none;scroll-behavior: smooth;

}
body{
background-color: #f1f1f1;

}
p{
color:#150303;
font-size: 14px;
}
span{
font-size: 12px;
color:#606060;
}
a{
text-decoration: none;
color: unset;
font-weight: 500;
font-size: 14px;
}
ul,li{
list-style: none;
}
img{
width: 100%;

}
p,h1{
z-index: 1 !important;
}
MEDIA1.CSS
@media only screen and (max-width:650px){
.header-top{
width: 100% !important;
}
.header-top-left{
display: none !important;
}
.header-top-right{
width: 100%;
}
.header-media{
display: flex !important;
justify-content: space-between !important;
padding: 10px !important;
}
.header-top-center-logo{
}
}
.header-media-right .header-top-center-left-item{
margin-top: 10px !important;

}
.menu{
}
.header-top-center{

}
.btn-media-open{
}
margin: 0 auto;
}
.search-icon{
}
.title-banner1{
height: auto;

}
.title-banner1-item{
padding: 10px 50px !important;
margin-top: 10px;
}
.title-banner1-item-logo{
height: 50px !important;
}
.title-banner1-item-logo img{
height: 100% !important;
}
.main-content1{
}
.main-content1-content{
}
float: left !important;
margin-left: 0 !important;
}
.media-item{
}
.banner-content1{
margin-top: 0px;

}
.banner-content1-img {
height: auto !important;
}
.banner-content1-img img{
width: 100%;
height: auto;
}
.banner-content2{
}
.banner-content2-content-right{
}
.banner-content2-header-item{
}
.node-item2{
}
.banner-content2-content-left{
}
}
.item2{
margin-right: 0 !important;
}
.banner-content3{
}
.new-feed-content{
margin-top: -120px !important;
}
.new-feed-content-list{
margin-top: -30px;
}
.main-brand{
}
.footer1-content{
}

.footer2-content1{
}
.footer2-content2{
display: block;
padding: 10px;
}
.footer2-content3{
}
.footer2-content4{
}
.new-feed-content-item{
margin: 20px 13% !important
}
.col1-2{
text-align: center !important;

}
.col1{
padding-right: 0 !important;
}
.col2{
}
.footer2-content2{
padding-bottom: 20px !important;
border-bottom: 1px solid #ccc !important;
}
.footer2-content4{
}
.page-link{
padding: 10px;
}
.sanpham_banner{
height: auto;
}
.main_sanpham{
}
.main-sp-list{

display: none;
}
}
.main_sanpham-right-content{
}
.main-sp-view{
height: 1000px !important;
border: none !important;
margin-top: 10px;
}
.item3{
padding: 0 !important;
border: none !important;

}
.main_sanpham-left{
margin: 0 auto !important;
}
.footer1-media{

}
}
.main_sp-title{
}
.main-ctiet-sp{
display: block;
}
.main-ctiet-sp-left{
}
.ctietsp-1{
}
.ctietsp-1-left{
}

.mySlides{
}
.ctietsp-1-right{
}
.ctietsp-1-right-title-2{
margin: 0 !important;
}
.ctietsp-1-right-content{
padding: 2px 0 !important;
}
margin-left: 0;
padding: 20px!important;
}
width: 100%;
}
.send-btn{
margin-left: 79% !important;
}
}
.ctietsp-1-right-content4-text{
padding: 5px;
}
.main-ctiet-sp-right{
margin-left: auto;
margin-right: auto;
}
.tabcontent{
}
.a-line{
}
.patch1-item{
width: 100%;
}
.patch1-item img{
width: 100%;
height: auto;

}
.comment{
width: 100%;
padding: 10px;
margin-top: 100px;
}
.comment-number{
width: 100%;
}
/* .comment{
display: none;
} */
.cmt-user input{
width: 80%;
}
.ctietsp-1-right-content-text{
}
.header-media-item i{
font-size: 30px;
color: #fff;
margin-top: 25px;

}
.btn-media{
margin-top: 20px;
}
header{
position: fixed !important;
z-index:1000 ;
}
.banner1{
padding-top: 210px;
}
.main-content1-item-img{
width: 80%;
height: auto;
margin: 0 auto;
}
.banner-content2-header-right{
display: none;
}
.banner-content2-header-media{
}
.page-link{
padding-top: 230px !important;
}
.ctietsp-1-left-title{

}
.main-ctiet-sp-right-title{
margin-top: -60px;
text-align: center;
}
.right{
}
.col_sanpham-list{
padding: 0 20% !important;
}
.main-ctiet-sp-right-content1-title{
text-align: center !important;
}
.main-ctiet-sp-right-content1-list2-news{
width: 300px;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.news-img{
margin: 0 auto !important;
}
.comment-title{
margin-top: -70px;
}
.main-sp-view-content{
margin-top: -30px;
}
.media1-footer{
margin-top: -120px;
}
.news-content{
margin-top: 10px;
}
.col-icon{
}
.col_sanpham-list{
display: none ;
}
.col_sanpham2-title-content{
display: none;
}
.col_sanpham2{
margin-top: 30px;
}

3. Javascript
TRANG CHỦ
<script>
const btn = document.getElementsByClassName('btn');
const banner = document.getElementById('banner');
animation();
};
animation();
};
animation();
};
animation();
};
const animation = () => {

banner.classList.add('zoom');
setTimeout(() => {
banner.classList.remove('zoom');
}, 1000);
for (b of btn) {
b.classList.remove('active');
}
};
</script>

III. Kết quả

1. Giao diện trang chủ
2.Giao diện trang giỏ hàng

3.Giao diện trang login
4.Giao diện trang sản phẩm

5.Giao diện trang chi tiết sản phẩm

TKW - BÁO CÁO CUỐI KỲ - CÂY CẢNH - HỒ VĨNH NHẬT - HOÀNG KIM TUẤN ANH -

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TKW - BÁO CÁO CUỐI KỲ - CÂY CẢNH - HỒ VĨNH NHẬT - HOÀNG KIM TUẤN ANH -

Uploaded by

Copyright:

Available Formats

SVTH: Hồ Vĩnh Nhật (17) – Hoàng Kim Tuấn Anh (19)

ĐẠI HỌC SƯ PHẠM KỸ THUẬT ĐÀ NẴNG

BÁO CÁO CUỐI KÌ THIẾT KẾ WEB

GVHD: Trần Bữu Dung

Lớp học phần:221TKW02

Lớp học phần: 221TKW02 Trang 1

BÁO CÁO CUỐI KÌ THIẾT KẾ WEB

1 Hồ Vĩnh Nhật - Trang chủ

Lớp học phần: 221TKW02 Trang 1

<div class="header-top-left-icon"><a href="#"><i

Lớp học phần: 221TKW02 Trang 2

<a href="Giohang.html" class="header-top-center-left-

Lớp học phần: 221TKW02 Trang 3

Lớp học phần: 221TKW02 Trang 4

Lớp học phần: 221TKW02 Trang 5

Lớp học phần: 221TKW02 Trang 6

<div class="col3-img"><img src="./img/logo5.png"

Lớp học phần: 221TKW02 Trang 7

const animation = () => {

Lớp học phần: 221TKW02 Trang 8

<div class="header-top-right-item"><a href=""><i

Lớp học phần: 221TKW02 Trang 9

<div class="content1-header-2"> Giỏ Hàng </div>

Lớp học phần: 221TKW02 Trang 10

<a href="#" class="menu-item"> Tin Tức</a>

Lớp học phần: 221TKW02 Trang 11

Lớp học phần: 221TKW02 Trang 12

Lớp học phần: 221TKW02 Trang 13

<div class="col1-content"><i class="fas fa-phone-

Lớp học phần: 221TKW02 Trang 14

Lớp học phần: 221TKW02 Trang 15

<div class="square" style="--i:1;"></div>

Lớp học phần: 221TKW02 Trang 17

<div class="content1-header2"> Tổng Đài Miễn Phí

Lớp học phần: 221TKW02 Trang 18

<div class="dropdown1-content-item">Cây mỏ két</div>

Lớp học phần: 221TKW02 Trang 19

<li class="col_sanpham-item" onclick="fun2()">

Lớp học phần: 221TKW02 Trang 20

<li class="col_sanpham-item" onclick="fun7()">

Lớp học phần: 221TKW02 Trang 21

Lớp học phần: 221TKW02 Trang 22

Lớp học phần: 221TKW02 Trang 23

Lớp học phần: 221TKW02 Trang 24

<a href="#" class="main-content1-item item2">

Lớp học phần: 221TKW02 Trang 25

Lớp học phần: 221TKW02 Trang 26

Lớp học phần: 221TKW02 Trang 27

Cây chuối cảnh

Lớp học phần: 221TKW02 Trang 28

Lớp học phần: 221TKW02 Trang 29

<div class="header-top-left-icon"><a href="#"><i

Lớp học phần: 221TKW02 Trang 30

Lớp học phần: 221TKW02 Trang 31

THÔNG TIN SẢN PHẨM

Lớp học phần: 221TKW02 Trang 32

Lớp học phần: 221TKW02 Trang 33

<div class="menu-item item-list-menu"><a href="sanpham.html">

Lớp học phần: 221TKW02 Trang 34

Lớp học phần: 221TKW02 Trang 35

<p class="topic1">Chúng tôi <span>có gì đặc

Lớp học phần: 221TKW02 Trang 36

Lớp học phần: 221TKW02 Trang 37