-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (183 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Foobar Coffee</title>
<meta name="description" content="Cà phê Foobar">
<meta name="author" content="Thin">
<!-- prevent Google Chrome 404
<link rel="shortcut icon" href="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" />
-->
<link rel="icon" type="image/png" href="/images/icons8-coffee-64.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hurricane&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div class="top-bar">
<div class="logo">
<a href="index.html"><img alt="Hình logo" src="images/logo.png" width="306" height="53" /></a>
</div>
<nav>
<ul id="menu-items">
<li><a href="index.html">Trang chủ</a></li>
<li><a href="gioi-thieu.html">Giới thiệu</a></li>
<li><a href="hinh-anh.html">Hình ảnh</a></li>
<li><a href="dich-vu.html">Dịch vụ</a></li>
<li><a href="lien-he.html">Liên hệ</a></li>
<li><a id="search-icon" href="#."><img alt="Search icon" src="images/search-icon.png" width="20" height="20" /></a></li>
</ul>
</nav>
</div>
<div id="hero" class="hero">
<div class="tagline">
<h1>Đẳng cấp</h1>
<h2>Quán cà phê</h2>
<p>Chúng tôi mang lại những hương vị nguyên bản, cà phê được trồng và thu hoạch thủ công, mang đến cho bạn những trải nghiệm tuyệt vời.</p>
<button><a href="dich-vu.html">Tìm hiểu thêm</a></button>
</div>
<div class="mui-ten">
<a id="prev" href="#."><i class="arrow left"></i></a>
<a id="next" href="#."><i class="arrow right"></i></a>
</div>
</div>
</header>
<main>
<section class="intro">
<div class="intro-words">
<h1>Giới thiệu</h1>
<p>Foobar Coffee (cà phê Foobar) được lập nên vào một ngày trời mưa tầm tã năm 2021 bởi một nhóm bạn tự rang xay, pha cà phê uống với nhau.</p>
<p>Chúng tôi luôn mang đến những cốc cà phê được chế biến thủ công, khách hàng chính là những người mê cà phê.</p>
<button><a href="intro.html">Đọc tiếp</a></button>
</div>
<div class="hinh-intro"><img alt="Hình ly cà phê" src="images/about-img.png" width="470" height="auto" /></div>
</section>
<section class="gallery">
<div class="gallery-intro">
<h1 class="heading-center">Thư viện ảnh</h1>
<p>Hình ảnh những cốc cà phê được bàn tay của những người pha chế tài hoa của chúng tôi thực hiện.</p>
</div>
<div class="gallery-rows">
<div><a href="#"><img alt="Cà phê espresso" src="images/304x171-1.jpg" loading="lazy" width="304" height="171" /></a></div>
<div><a href="#"><img alt="Cà phê Cappuchino" src="images/304x171-2.jpg" loading="lazy" width="304" height="171" /></a></div>
<div><a href="#"><img alt="Cà phê bốc khói" src="images/304x171-3.jpg" loading="lazy" width="304" height="171" /></a></div>
</div>
<div class="gallery-rows">
<div><a href="#"><img alt="Cà phê hạt" src="images/304x171-4.jpg" loading="lazy" width="304" height="171" /></a></div>
<div><a href="#"><img alt="Cà phê latte" src="images/304x171-5.jpg" loading="lazy" width="304" height="171" /></a></div>
<div><a href="#"><img alt="Cà phê ngũ cốc" src="images/304x171-6.jpg" loading="lazy" width="304" height="171" /></a></div>
</div>
<div class="gallery-rows">
<div><a href="#"><img alt="Cà phê vẽ hình" src="images/304x171-6.jpg" loading="lazy" width="304" height="171" /></a></div>
<div><a href="#"><img alt="Cà phê đen" src="images/304x171-8.jpg" loading="lazy" width="304" height="171" /></a></div>
<div><a href="#"><img alt="Cà phê cạn" src="images/304x171-9.jpg" loading="lazy" width="304" height="171" /></a></div>
</div>
<div class="center">
<button class="read-more"><a href="gallery.html">Xem thêm</a></button>
</div>
</section>
<section class="orange-blocks">
<div>
<div class="cups"><img class="coffee-cup" alt="Cup 1" src="images/icon1.png" width="40" height="auto" /></div>
<h2>Cà phê nguyên chất</h2>
<p>Cà phê được gieo trồng ở những rẫy trên đồi, bán tự nhiên, cho chất lượng cao. Hạt được thu hoạch, rang xay thủ công.</p>
</div>
<div>
<div class="cups"><img class="coffee-cup" alt="Cup 2" src="images/icon2.png" width="40" height="auto" /></div>
<h2>20 biến thể khác nhau</h2>
<p>Dựa trên nền cà phê nguyên chất, Foobar tạo ra hơn 20 loại thức uống khác nhau đáp ứng khẩu vị các giới ở nhiều độ tuổi.</p>
</div>
<div>
<div class="cups"><img class="coffee-cup" alt="Cup 3" src="images/icon3.png" width="40" height="auto" /></div>
<h2>Không gian thoải mái</h2>
<p>Foobar có không gian ngoài trời, sân vườn, sân thượng cho khách yêu thiên nhiên. Trong nhà dành cho người thích yên tĩnh, ấm cúng.</p>
</div>
</section>
<section class="testimonial">
<h1 class="heading-left">Nhận xét từ khách hàng</h1>
<p>Một số nhận xét được trích ra từ sổ lưu niệm của quán</p>
<p class="guest-name">Ms Mai Trinh <img alt="quote icon" src="images/quote-icon.png" width="22" height="19" /></p>
<blockquote>
Một nhóm 4 chị em chơi với nhau từ hồi còn học phổ thông, mỗi lần họp nhóm đều chọn FoobarCoffee làm nơi hàn huyên.
ở đây chúng tôi cảm thấy ấm cúng, khá yên tĩnh để trò chuyện.
</blockquote>
<div class="indi-wrapper"><span class="indicator"> </span><span class="indicator"> </span><span class="indicator"> </span></div>
</section>
<section class="contact-us">
<h1 class="heading-center">Liên hệ</h1>
<div class="contact-us-cols">
<div class="contact-form-wrapper">
<form class="contact-form" method="post" action="contact.php">
<input id="fullname" class="contact-input" type="text" name="fullname" placeholder="Họ và tên" /><br />
<input id="email" class="contact-input" type="email" name="email" placeholder="E-mail" /><br />
<input id="phone" class="contact-input" type="text" name="phone" placeholder="Số ĐT di động" /><br />
<textarea id="client-msg" class="contact-area" name="clientmsg"></textarea><br />
<button class="contact-submit-button" type="submit">Gửi thông tin</button>
</form>
</div>
<div class="google-map">
<img alt="Google Map" src="images/google-map.webp" width="570" height="450" />
<!--
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15596.011260581728!2d109.195995!3d12.2480883!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x26c4f1d22fe2b490!2sStarbucks%20Nha%20Trang%20Center!5e0!3m2!1sen!2s!4v1641366711455!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
-->
</div>
</div>
</section>
</main>
<footer>
<div class="footer-row">
<div class="footer-col footer-col1">
<h1>Giới thiệu</h1>
<p>Foobar Coffee là một quán cà phê toạ lạc trên ngọn đồi giáp biển, nhìn ra vịnh Nha Trang. Quán được xây dựng bằng vật liệu thân thiện môi trường.</p>
</div>
<div class="footer-col footer-col2">
<h1>Khám phá</h1>
<nav>
<ul>
<li><a href="index.html">Trang chủ</a></li>
<li><a href="intro.html">Giới thiệu</a></li>
<li><a href="hinh-anh.html">Hình ảnh</a></li>
<li><a href="dich-vu.html">Dịch vụ</a></li>
<li><a href="lien-he.html">Liên hệ</a></li>
</ul>
</nav>
</div>
<div class="footer-col footer-col3">
<h1>Tham khảo thêm</h1>
<nav>
<ul>
<li><a href="#">Lịch sử cà phê</a></li>
<li><a href="#">Cà phê Việt Nam</a></li>
<li><a href="#">Các kiểu pha chế</a></li>
<li><a href="#">Cà phê và sức khoẻ</a></li>
</ul>
</nav>
</div>
<div class="footer-col footer-col4">
<h1>Liên hệ</h1>
<p><i class="fas fa-map-marker-alt"></i> Núi Cô Tiên - Nha Trang</p>
<p><i class="fas fa-phone-volume"></i> 0903.999.999</p>
<p><i class="far fa-envelope"></i> [email protected]</p>
</div>
</div><!-- footer cols -->
<div class="footer-copyright">
<p>© 2020. Foobar Coffee giữ bản quyền nội dung.</p>
</div>
</footer>
<script src="js/script.js"></script>
<script>
window.onload = function () {
preload("../images/1140x474-1.jpg", "../images/1140x474-2.jpg", "../images/1140x474-3.jpg", "../images/1140x474-4.jpg", "../images/1140x474-5.jpg", "../images/1140x474-6.jpg");
document.getElementById('prev').addEventListener("click", prevSlide);
document.getElementById('next').addEventListener("click", nextSlide);
activeLink();
initModal();
searchObj.addEventListener("click", searchModal);
}
</script>
</body>
</html>