-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
228 lines (227 loc) · 14.3 KB
/
about.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!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>About Marpet</title>
<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>MarPet</title>
<link rel="icon" type="image/x-icon" href="./library/logoko-01.png">
<link rel="stylesheet" href="./css/style.css">
<script src="https://kit.fontawesome.com/09f1ff1e12.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<style>
.module-header {
display: flex;
justify-content: center;
text-align: center;
margin-bottom: 20px;
}
.module-header h2 {
letter-spacing: 5px;
color: palevioletred;
margin-right: -10px;
}
.module-header hr {
width: 200px;
height: 2px;
background-color: palevioletred;
border: none;
margin: 15px 10px;
}
.module-header-text {
margin-left: 65px;
margin-right: 65px;
text-align: center;
}
p {
font-size: 14px;
margin-bottom: 30px;
margin-left: 8px;
line-height: 20px;
color: black;
}
.content1 {
text-align: center;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
h3 {
margin: 0;
}
.content-text {
width: 300px;
font-size: 12px;
margin-top: 12px;
}
.object {
color: palevioletred;
}
svg {
padding: 10px;
}
.intro-img {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
filter: contrast(110%);
}
</style>
</head>
<body>
<!-- chèn html header -->
<!-- <div w3-include-html="header.html"></div> -->
<div id="header"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById("header").innerHTML = req.responseText;
}
</script>
<!-- phần nội dung -->
<div class="content">
<img class="intro-img" src="library/banner-about.jpg" alt="">
<div class="container">
<div class="module-header">
<hr/>
<h2>VỀ MARPET</h2>
<hr/>
</div>
<p class="module-header-text">Chúng tôi là MarPet - nơi giúp cho thú cưng và những người chủ sống hạnh phúc hơn, khỏe mạnh hơn cùng nhau. Chúng tôi lắng nghe, đồng cảm và kết nối để tìm ra câu trả lời cho những vấn đề khó khăn nhất về thú cưng. Con mèo hung dữ? Sủa? Kéo dây? Chúng tôi thấu hiểu những điều đó - và chúng tôi ở đây để trợ giúp.</p>
<p class="module-header-text">Chiến lược của chúng tôi rất đơn giản: chúng tôi chỉ bán những sản phẩm mà chúng tôi tin tưởng cho thú cưng của chúng tôi. Điều đó có nghĩa là chúng tôi không bán các sản phẩm có chất độn hoặc các thành phần nghi ngờ và chúng tôi có hiểu biết về nhà sản xuất của các sản phẩm.</p>
<p class="module-header-text">Chúng tôi muốn trở thành nơi tốt nhất để mua sắm cho thú cưng của bạn. Chúng tôi muốn bạn có thể tự tin chọn sản phẩm, mua sản phẩm như thế nào và khi nào bạn muốn, đồng thời chắc chắn về sự hỗ trợ của chúng tôi. Sau tất cả, chúng tôi muốn trở thành một động lực tốt đẹp để giúp cho cộng đồng thú cưng lớn mạnh hơn.</p>
</div>
<div class="container">
<div class="module-header">
<hr/>
<h2>TỰ TIN CHỌN LỰA</h2>
<hr/>
</div>
<div class="content1">
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-basket2-fill" viewBox="0 0 16 16">
<path d="M5.929 1.757a.5.5 0 1 0-.858-.514L2.217 6H.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h.623l1.844 6.456A.75.75 0 0 0 3.69 15h8.622a.75.75 0 0 0 .722-.544L14.877 8h.623a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1.717L10.93 1.243a.5.5 0 1 0-.858.514L12.617 6H3.383L5.93 1.757zM4 10a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0v-2zm3 0a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0v-2zm4-1a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1z"/>
</svg>
<h3>Giỏ hàng tốt nhất</h3>
<p class="content-text">Dù ngân sách của bạn là bao nhiêu, chúng tôi sẽ cung cấp cho bạn những sản phẩm tốt nhất có thể cho thú cưng.</p>
</div>
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-check-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/>
</svg>
<h3>Tiêu chuẩn sản phẩm</h3>
<p class="content-text">Không có chất độn hoặc thành phần nghi ngờ. Nếu chúng tôi không cho thú cưng của mình ăn, chúng tôi sẽ không bán nó cho bạn.</p>
</div>
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/>
</svg>
<h3>Luôn dẫn đầu</h3>
<p class="content-text">Với chất lượng sản phẩm đã được kiểm định, chúng tôi luôn dẫn đầu trong ngành công nghiệp thú cưng.</p>
</div>
</div>
</div>
<div class="container">
<div class="module-header">
<hr/>
<h2>VÌ SAO BẠN CẦN MARPET?</h2>
<hr/>
</div>
<div class="content1">
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
<h3>Ở ngay gần bạn</h3>
<p class="content-text">Chúng tôi có nhiều điểm giao hàng ở khắp cả nước, luôn sẵn sàng bất cứ lúc nào để được phục vụ bạn</p>
</div>
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
<h3>Giao hàng trong ngày</h3>
<p class="content-text">Bạn cần gì ư? Chúng tôi sẽ mang đến cho bạn ngay trong ngày.</p>
</div>
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-bell-fill" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/>
</svg>
<h3>Dịch vụ tiện lợi</h3>
<p class="content-text">Dịch vụ tắm gội thú cưng hay cắt tỉa lông, chúng tôi đều phục vụ tận nơi và luôn có sẵn ngoài giờ làm việc truyền thống.</p>
</div>
</div>
</div>
<div class="container">
<div class="module-header">
<hr/>
<h2>HỖ TRỢ BẠN</h2>
<hr/>
</div>
<div class="content1">
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-mortarboard-fill" viewBox="0 0 16 16">
<path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5Z"/>
<path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Z"/>
</svg>
<h3>Chuyên môn</h3>
<p class="content-text">Gặp vấn đề với thú cưng? Chúng tôi luôn hiểu mọi vấn đề đó và sẵn sàng giúp đỡ bạn.</p>
</div>
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-umbrella-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0a.5.5 0 0 1 .5.5v.514C12.625 1.238 16 4.22 16 8c0 0 0 .5-.5.5-.149 0-.352-.145-.352-.145l-.004-.004-.025-.023a3.484 3.484 0 0 0-.555-.394A3.166 3.166 0 0 0 13 7.5c-.638 0-1.178.213-1.564.434a3.484 3.484 0 0 0-.555.394l-.025.023-.003.003s-.204.146-.353.146-.352-.145-.352-.145l-.004-.004-.025-.023a3.484 3.484 0 0 0-.555-.394 3.3 3.3 0 0 0-1.064-.39V13.5H8h.5v.039l-.005.083a2.958 2.958 0 0 1-.298 1.102 2.257 2.257 0 0 1-.763.88C7.06 15.851 6.587 16 6 16s-1.061-.148-1.434-.396a2.255 2.255 0 0 1-.763-.88 2.958 2.958 0 0 1-.302-1.185v-.025l-.001-.009v-.003s0-.002.5-.002h-.5V13a.5.5 0 0 1 1 0v.506l.003.044a1.958 1.958 0 0 0 .195.726c.095.191.23.367.423.495.19.127.466.229.879.229s.689-.102.879-.229c.193-.128.328-.304.424-.495a1.958 1.958 0 0 0 .197-.77V7.544a3.3 3.3 0 0 0-1.064.39 3.482 3.482 0 0 0-.58.417l-.004.004S5.65 8.5 5.5 8.5c-.149 0-.352-.145-.352-.145l-.004-.004a3.482 3.482 0 0 0-.58-.417A3.166 3.166 0 0 0 3 7.5c-.638 0-1.177.213-1.564.434a3.482 3.482 0 0 0-.58.417l-.004.004S.65 8.5.5 8.5C0 8.5 0 8 0 8c0-3.78 3.375-6.762 7.5-6.986V.5A.5.5 0 0 1 8 0z"/>
</svg>
<h3>Yên tâm</h3>
<p class="content-text">Nếu một sản phẩm không phù hợp với thú cưng của bạn, chúng tôi sẽ thu hồi sản phẩm đó — ngay cả khi nó đã được mở ra và ngay cả khi có vết bẩn trên đó.</p>
</div>
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>
<h3>Cộng đồng</h3>
<p class="content-text">Chúng tôi giúp bạn kết nối với những người nuôi thú cưng và làm việc cùng nhau để giúp đỡ những thú cưng vô gia cư.</p>
</div>
</div>
</div>
</div>
<!-- chèn html footer -->
<!-- <div w3-include-html="footer.html"></div> -->
<div id="footer"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById("footer").innerHTML = req.responseText;
}
</script>
<!-- function để chèn html -->
<script>
w3.includeHTML();
</script>
<!-- js mở chatbox và quay về đầu trang -->
<script src="./js/chatBox&returnTop-btn.js"></script>
<!-- js khi kéo xuống thì hiện 1 thanh nav cố định ở đầu trang web -->
<script src="./js/flat-menu.js"></script>
<!-- js xổ ra các mục nhỏ của footer khi trình duyệt thu nhỏ -->
<script src="./js/footer.js"></script>
<script src="./js/products_detail.js"></script>
<script src="./js/searchHeader.js"></script>
<script src="./js/searchdetails.js"></script>
<script src="./js/searchMobile.js"></script>
</body>
</html>