Index

Html:
<!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>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="header">
<div class="header__logo">
<img class="logo" src="logo.png">

</div>
<div class="header__navbar">
<ul class="navbar__menu">
<li class="navbar__item active list-style--none">
<a href="#" class="navbar__item-link">Trang chủ</a>
</li>
<li class="navbar__item list-style--none">
<a href="#" class="navbar__item-link">Giới thiệu</a>
</li>
<a href="#" class="navbar__item-link">Blog</a>
</li>
<a href="#" class="navbar__item-link">Đặt tour</a>
</li>
<a href="#" class="navbar__item-link">Ý kiến khách
hàng</a>
</li>
</ul>
</div>
</div>
<div id="slider">
<div class="slider_img">
<img src="Untitled-1.jpg" alt="ảnh Hội An" class="slider_img_sub"
style="width:100%;height: 400px">
</div>
<div class="button_search_fast">
<i class="ti-search search_icon"></i>
<a href="#" class="para_search">Tìm Nhanh</a>
</div>
<div class="button_search_adv">
<i class="ti-layout-column4 search_icon_adv"></i>
<a href="#" class="para_search_adv">Tìm kiếm nâng cao</a>
</div>
<div class="bar_under"></div>
<div class="search_box">
<input type="text" placeholder="Điểm đến, loại tour" class="text_box">
</div>
<div class="button_search_normal">
<button type="submit" class="submit_box">TÌM</button>
</div>
</div>
<div id="tour_outstanding">
<p class="text_tour_outstanding">TOUR NỔI BẬT</p>
<div class="container">
<div class="tour_item tour_item1">
<img src="tour-rung-dua-bay-mau-2.jpg" alt="Ảnh Hội An" style="width:
100%;height: 200px;">
<div class="tour_item_infor">
<p class="tour_name">Tour du lịch rừng sinh thái Bảy Mẫu 1 ngày</p>
<div class="tour_price">
<i class="ti-money icon_money"></i>
<p class="tour_price_infor_charac">Giá:</p>
<p class="tour_price_infor_number" >849.000 VND</p>
</div>
<div class="tour_start">
<i class="ti-location-pin icon_locate"></i>
<p class="tour_start_infor">Khởi hành: Đà Nẵng</p>
</div>
<div class="tour_hotel">
<i class="ti-home icon_home"></i>
<p class="tour_hotel_para">Khách sạn:</p>
<i class="ti-star icon_star icon_star1"></i>
</div>
<div class="tour_button_order">
<i class="ti-shopping-cart icon_shopping"></i>
<p class="tour_button_order_para">ĐẶT NGAY</p>
</div>
<div class="tour_button_detail">
<i class="ti-agenda icon_tour_detail"></i>
<p class="tour_button_detail_para">CHI TIẾT</p>
</div>
</div>
</div>

<img src="/image/photo-1-1563233734069159038460(2).jpg" alt="Ảnh Hội
An" style="width: 100%;height: 200px;">
<p class="tour_name">Tour du lịch Đà Nẵng - Hội An - Ngũ Hành Sơn
2N1Đ</p>
<p class="tour_price_infor_charac">Gía:</p>
<p class="tour_price_infor_number">1.200.000 VND</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<img src="/image/hoi-an-quang-nam-vntrip(3).jpg" alt="Ảnh Hội An"
style="width: 100%;height: 200px;">
<p class="tour_name">Tour du lịch Hội An - Cù Lao Chàm 1 ngày</p>
<p class="tour_price_infor_number">940.000 VND</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<img src="/image/images_chủ.jfif" alt="Ảnh Hội An" style="width:
100%;height: 200px;">
<p class="tour_name">Tour du lịch Đà Nẵng - Huế - Hội An 4N3Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tour_video">
</div>
<div id="tour_travel">
<p class="text_tour_outstanding">XEM THÊM CÁC TOUR NỔI BẬT</p>
<img src="/image/hoi-an-quang-nam-vntrip-1(1).jpg" alt="Ảnh Hội An"
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<p class="tour_name">Tour du lịch Đà Nẵng - Hội An- Bà Nà Hills
4N3Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<p class="tour_name">Tour du lịch Cù Lao Chàm trọn gói 1 ngày</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

100%;height: 200px;">
<p class="tour_name">Tour du lịch Đà Nẵng - Bà Nà - Hội An - Núi
Thần Tài 4N3Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tour_discount"></div>
<div id="footer"></div>
<div class="footer">
<div class="footer__logo">
<img class="footer__logo--link" src="logo.png">
<h1 class="ads color--white">Website du lịch Hội An</h1>
</div>
<div class="footer__contact">
<h1 class="footer__title-contact text-transform--uppercase">
Công ty TNHH du lịch Hội An Travel
</h1>
<ul class="menu_contact">
<li class="contact_items list-style--none">
<i class="fas fa-map-marker"></i>
<span>Địa chỉ: Số 79 đường Hồ Tùng Mậu, Mai Dịch, Cầu Giấy, Hà
Nội</span>
</li>
<i class="fas fa-mobile-alt"></i>
<span>1800 1902 - 03 270 22222 - 02894 33 22 11</span>
</li>
<i class="fas fa-envelope"></i>
<span>
Email: <a href="mailto:anhquan0327@gmail.com" class="link-
email">Send a mail to me</a>
</span>
</li>
</ul>
</div>
<div class="footer__connect">
Kết nối với chúng tôi
</h1>
<i class="fab fa-facebook"></i>
<a href="https://www.facebook.com/" target="_blank"
class="link_connect">Facebook</a>
</li>
<i class="fab fa-twitter-square"></i>
<a href="https://www.twitter.com/" target="_blank"
class="link_connect">Twitter</a>
</li>
<i class="fab fa-telegram"></i>
<a href="https://www.telegram.com/" target="_blank"
class="link_connect">Telegram</a>
</li>
</ul>
</div>
</div>
</body>
</html>
<!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>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="header">
<div class="header__logo">
<img class="logo" src="logo.png">

</div>
<div class="header__navbar">
<ul class="navbar__menu">
<li class="navbar__item active list-style--none">
<a href="#" class="navbar__item-link">Trang chủ</a>
</li>
<a href="#" class="navbar__item-link">Giới thiệu</a>
</li>
<a href="#" class="navbar__item-link">Blog</a>
</li>
<a href="#" class="navbar__item-link">Đặt tour</a>
</li>
<a href="#" class="navbar__item-link">Ý kiến khách
hàng</a>
</li>
</ul>
</div>
</div>
<div id="slider">
<div class="slider_img">
<img src="Untitled-1.jpg" alt="ảnh Hội An" class="slider_img_sub"
style="width:100%;height: 400px">
</div>
<div class="button_search_fast">
<i class="ti-search search_icon"></i>
<a href="#" class="para_search">Tìm Nhanh</a>
</div>
<div class="button_search_adv">
<i class="ti-layout-column4 search_icon_adv"></i>
<a href="#" class="para_search_adv">Tìm kiếm nâng cao</a>
</div>
<div class="bar_under"></div>
<div class="search_box">
<input type="text" placeholder="Điểm đến, loại tour" class="text_box">
</div>
<div class="button_search_normal">
<button type="submit" class="submit_box">TÌM</button>
</div>
</div>
<div id="tour_outstanding">
<p class="text_tour_outstanding">TOUR NỔI BẬT</p>
<img src="tour-rung-dua-bay-mau-2.jpg" alt="Ảnh Hội An" style="width:
100%;height: 200px;">
<p class="tour_price_infor_number" >849.000 VND</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<p class="tour_name">Tour du lịch Đà Nẵng - Hội An - Ngũ Hành Sơn
2N1Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<p class="tour_name">Tour du lịch Hội An - Cù Lao Chàm 1 ngày</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

100%;height: 200px;">
<p class="tour_name">Tour du lịch Đà Nẵng - Huế - Hội An 4N3Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tour_video">
</div>
<div id="tour_travel">
<p class="text_tour_outstanding">XEM THÊM CÁC TOUR NỔI BẬT</p>
<img src="/image/hoi-an-quang-nam-vntrip-1(1).jpg" alt="Ảnh Hội An"
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<p class="tour_name">Tour du lịch Đà Nẵng - Hội An- Bà Nà Hills
4N3Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<p class="tour_name">Tour du lịch Cù Lao Chàm trọn gói 1 ngày</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

100%;height: 200px;">
<p class="tour_name">Tour du lịch Đà Nẵng - Bà Nà - Hội An - Núi
Thần Tài 4N3Đ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tour_discount"></div>
<div id="footer"></div>
<div class="footer">
<div class="footer__logo">
<img class="footer__logo--link" src="logo.png">
<h1 class="ads color--white">Website du lịch Hội An</h1>
</div>
<div class="footer__contact">
Công ty TNHH du lịch Hội An Travel
</h1>
<i class="fas fa-map-marker"></i>
<span>Địa chỉ: Số 79 đường Hồ Tùng Mậu, Mai Dịch, Cầu Giấy, Hà
Nội</span>
</li>
<i class="fas fa-mobile-alt"></i>
<span>1800 1902 - 03 270 22222 - 02894 33 22 11</span>
</li>
<i class="fas fa-envelope"></i>
<span>
Email: <a href="mailto:anhquan0327@gmail.com" class="link-
email">Send a mail to me</a>
</span>
</li>
</ul>
</div>
<div class="footer__connect">
Kết nối với chúng tôi
</h1>
<i class="fab fa-facebook"></i>
<a href="https://www.facebook.com/" target="_blank"
class="link_connect">Facebook</a>
</li>
<i class="fab fa-twitter-square"></i>
<a href="https://www.twitter.com/" target="_blank"
class="link_connect">Twitter</a>
</li>
<i class="fab fa-telegram"></i>
<a href="https://www.telegram.com/" target="_blank"
class="link_connect">Telegram</a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: inherit;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
line-height: 1.6rem;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
.text-color {
color: var(--text-color);
}
.list-style--none {
list-style: none;
}
/* header */
.header {
position: fixed;
width: 100%;
background-color: #dcdcdc;
display: flex;
justify-content: space-between;
height: 9rem;
transition: 0.5s;
/* border-bottom: 1px solid #b9b9b9; */
}
.header__logo {
margin: 0 0 0 10rem;
}
.logo {
width: 11rem;
height: 11rem;
}
.header__navbar {
display: flex;
justify-content: center;
align-items: center;
}
.navbar__menu {
display: flex;
/* flex-direction: row; */
width: 100%;
height: 100%;
}
.navbar__item {
display: flex;
/* align-items: center; */
height: calc(100% - 2rem);
margin-top: 2rem;
padding: 0 4rem;
text-decoration: none;
transition: 0.9s;
}
.navbar__item-link {
color: #1133ab;
margin-top: 1.7rem;
}
.active .navbar__item-link {
color: #F8781C;
margin-top: 1rem;
transition: 0.7s;
}
.border--none{
border: none !important;
}
a:hover {
color: #F8781C;
}
.navbar__item {
font-size: 1.6rem;
font-weight: 600;
}
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
kiểu chữ
font-family: ‘Roboto’, sans-serif;
(dành cho tiêu đề)
font-weight: 600;
font-size: 16px;
(dành cho văn bản nội dung)

font-size: 13px;
color: #333; (có thể áp dụng cho tiêu đề nếu muốn để tiêu đề màu đen)
màu background
background-color: #f0f2f5;
*/
html
{
font-family:'Roboto', sans-serif ;
background-color:#f0f2f5;
}
#slider .button_search_fast
{
display: inline;
position: absolute;
margin-top: -200px;
margin-left: 70px;
background-color:#fff;
padding: 10px;
border-radius: 2px;
}
#slider .search_icon
{
font-size:18px;
color:rgb(33, 182, 246);
}
#slider .para_search
{
color:rgb(33, 182, 246);
}
#slider .button_search_adv
{
display: inline;
position: absolute;
margin-top: -200px;
margin-left: 191px;
background-color:rgb(4, 81, 245);
padding: 10px;
border-radius: 2px;
}
#slider .search_icon_adv
{
font-size:18px;
color:rgb(255, 255, 255);
}
#slider .para_search_adv
{
color:rgb(255, 255, 255);
}
#slider .bar_under
{
width: 1114px;
height: 120px;
background-color: rgb(255, 255, 255);
opacity: 50%;
position: absolute;
margin-top: -159px;
margin-left: 70px;
border-radius: 2px;
}
#slider .search_box
{
position: absolute;
margin-top: -118px;
margin-left: 89px;
}
#slider .search_box .text_box
{
border-color: #048aff;
border-style: solid;
border-width: 1px;
padding: 10px 15px;
border-radius: 2px
}
#slider .button_search_normal
{
position: absolute;
margin-top: -118px;
margin-left: 295px;
}
#slider .button_search_normal .submit_box
{
background-color: rgb(4, 81, 245);
padding: 10px 15px;
border-radius: 2px;
color: rgb(255,255,255);
border-width: 1px;
border-color: rgb(4, 81, 245);
width: 100px;
font-weight: bold;
}
.text_tour_outstanding
{
text-align: center;
font-size: 40px;
color: #61b0f5;
padding: 50px 30px;
}
.container
{
display:grid;
grid-template-columns: 10% 20% 20% 20% 20% 10%;
column-gap: 20px;
}
.container .tour_item1
{
grid-column: 2/3;
}
{
grid-column: 3/4;
}
{
grid-column: 4/5;
}
{
grid-column: 5/6;
}
.tour_price_infor_charac, .tour_price_infor_number,
.tour_start_infor, .tour_hotel_para, .tour_button_order_para,
.tour_button_detail_para, .tour_button_order, .tour_button_detail
{
display:inline;
}
.tour_item
{
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0 0 5px rgb(0, 0, 0);
}
.icon_money, .icon_locate, .icon_home
{
color:rgb(33, 182, 246);
padding: 5px 8px;
display: inline-block;
}
.tour_name
{
padding: 5px 8px;
color: rgb(250, 147, 3);
font-size: 17px;
}
.icon_star1, .icon_star2, .icon_star3, .icon_star4
{
color:rgb(250, 250, 3);
}
.tour_button_order, .tour_button_detail
{
display: inline-block;
padding: 5px 8px;
color:rgb(252, 254, 254) ;
margin-left: 10px;
margin-top: 10px;
border-radius: 2px;
}
.tour_button_order
{
background-color:rgb(250, 89, 3) ;
}
.tour_button_detail
{
background-color:rgb(19, 3, 250) ;
}
/* footer */
.color--white {
color: white;
}
.footer {
width: 100%;
height: 20rem;
background-color: #1F2D5C;
display: flex;
justify-content: space-between;
}
.footer__logo {
flex: 1;
display: flex;
position: relative;
}
.footer__logo--link {
width: 18rem;
height: 18rem;
}
.footer__contact {
color: #f0f2f5;
/* margin-top: 2.5rem; */
flex: 1;
width: auto;
height: 100%;
}
.footer__title-contact {
margin: 4rem 0 2.5rem 0;
}
.contact_items {
line-height: 3rem;
font-size: 1.2rem;
}
.link-email {
color: #ea6200;
}
.footer__connect {
color: #F0F2F5 !important;
flex: 1;
width: auto;
height: 100%;
}
.link_connect {
color: #F0F2F5;
}
.ads {
position: absolute;
bottom: 1rem;
}

Index

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

Index

Uploaded by

Copyright:

Available Formats

Html:

<div class="tour_item tour_item2">

<div class="tour_item tour_item3">

<div class="tour_item tour_item4">

<div class="tour_item tour_item2">

<div class="tour_item tour_item3">

<div class="tour_item tour_item4">

<div class="tour_item tour_item2">

<div class="tour_item tour_item3">

<div class="tour_item tour_item4">

<div class="tour_item tour_item2">

<div class="tour_item tour_item3">

<div class="tour_item tour_item4">

(dành cho văn bản nội dung)

You might also like