-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
65 lines (62 loc) · 3.87 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
<!DOCTYPE html>
<html lang="th">
<head>
<title>ตัวอย่าง Element แผนที่ประเทศจีนจาก thaibizchina.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chakra+Petch" rel="stylesheet">
<style>
/*
* Extra utilities
*/
@media (min-width: 768px) {
.flex-md-equal > * {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
}
}
.overflow-hidden { overflow: hidden; }
</style>
<script src="js/lib/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- Start Heading -->
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-white text-center bg-dark">
<div class="col-md-12 p-lg-12 mx-auto">
<h1 class="display-5 font-weight-normal">ตัวอย่าง Code แผนที่ประเทศจีน แบบ Interactive</h1>
<p class="lead font-weight-normal">เทคโนโลยีที่ใช้ HTML, CSS, Javascript (Jquery), รูปภาพและข้อมูลจากทีมงาน</p>
<a class="btn btn-outline-secondary" href="https://thaibizchina.com" target="_blank">ตัวอย่างใช้จริง : ศูนย์ข้อมูลเพื่อธุรกิจไทยในจีน </a>
<a class="btn btn-outline-secondary" href="https://github.com/Porrapat/chinamap-html" target="_blank">Source Code : Github</a>
<a class="btn btn-outline-secondary" href="https://www.ideavivat.com" target="_blank">By Ideavivat Team</a>
</div>
</div>
<!-- End Heading -->
<!-- Start Portfolio Layout -->
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-dark mr-md-3 pt-3 pt-md-3 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">แผนที่ศูนย์ธุรกิจ</h2>
<p class="lead">เมื่อ Hover แต่ละหมุดบนแผนที่จะแสดง Popup</p>
<p class="lead"><a href="map1.html" target="_blank">คลิกเพื่อดูตัวอย่าง</a></p>
</div>
<div class="w-100" style="height: 400px;">
<a href="map1.html" target="_blank"><img src="images/example-map-01-business.png" class="img-fluid" alt="ภาพตัวอย่างแผนที่ศูนย์ธุรกิจ" style="min-height: 400px;" /></a>
</div>
</div>
<div class="bg-light mr-md-3 pt-3 pt-md-3 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">แผนที่รายมณฑล</h2>
<p class="lead">เมื่อ Click แต่ละมณฑลจะแสดงข้อมูลรายละเอียดเพิ่มเติม</p>
<p class="lead"><a href="map2.html" target="_blank">คลิกเพื่อดูตัวอย่าง</a></p>
</div>
<div class="w-100" style="height: 400px;">
<a href="map2.html" target="_blank"><img src="images/example-map-02-province.png" class="img-fluid" alt="ภาพตัวอย่างแผนที่รายมณฑล" style="min-height: 400px;" /></a>
</div>
</div>
</div>
<!-- End Portfolio Layout -->
</body>
</html>