-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlandingpage.html
210 lines (202 loc) · 12.9 KB
/
landingpage.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
<!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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="stylelandingpage.css">
<title>Wisata Banjarmasin</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000f1;">
<div class="container">
<a class="navbar-brand" href="#" style="font-size: 25px;">WISATA BANJARMASIN</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galeri</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Social Media</a>
</li>
</div>
</div>
</nav>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#000000f1" fill-opacity="1" d="M0,128L48,128C96,128,192,128,288,122.7C384,117,480,107,576,138.7C672,171,768,245,864,256C960,267,1056,213,1152,176C1248,139,1344,117,1392,106.7L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
<h1 class="text-center">TOP 3 WISATA BANJARMASIN</h1>
<!-- Slider -->
<div class="container mt-4 ">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image/Pasar Terapung.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h4>PASAR TERAPUNG</h4>
</div>
</div>
<div class="carousel-item">
<img src="image/bekantan.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h4>PATUNG BEKANTAN</h4>
</div>
</div>
<div class="carousel-item">
<img src="image/Masjid_Raya_Sabilal_Muhtadi_depan.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h4>MASJID RAYA SABILAL MUHTADIN</h4>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#000000f1" fill-opacity="1" d="M0,128L48,128C96,128,192,128,288,122.7C384,117,480,107,576,138.7C672,171,768,245,864,256C960,267,1056,213,1152,176C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
<!-- Under slider -->
<section id="about" style="background-color: #000000f1;">
<div class="container mt-0">
<h2 class="text-center" style="color: white;">6 WISATA BANJARMASIN</h2>
<div class="row text-center mt-5">
<div class="col-4 mb-5">
<div class="card text-dark bg-light mb-3">
<img src="image/Pasar Terapung.jpg" class="card-img-top" alt="Pasar Terapung">
<div class="card-body">
<h5 class="card-title">Pasar Terapung</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate amet autem porro delectus dolorum sit nam suscipit, asperiores reiciendis modi.</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7966.455734767106!2d114.5655663!3d-3.293658!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de423bcc77ac74b%3A0xec15c28adf2ee240!2sPasar%20Terapung!5e0!3m2!1sid!2sid!4v1673242259943!5m2!1sid!2sid"
width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="col-4 mb-5">
<div class="card text-white bg-dark mb-3 border-light">
<img src="image/bekantan.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Patung Bekantan</h5>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore iste distinctio aliquid aut commodi a laudantium possimus id eligendi.</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.1148873426237!2d114.59228801482386!3d-3.3217774421703177!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de423c926b766e9%3A0xbca253ca873e42d0!2sPatung%20Bekantan!5e0!3m2!1sid!2sid!4v1673242810805!5m2!1sid!2sid" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="col-4 mb-5">
<div class="card text-dark bg-light mb-3">
<img src="image/Masjid_Raya_Sabilal_Muhtadi_depan.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Masjid Raya Sabilal Muhtadin</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta aliquid impedit officia ipsam incidunt sint optio, odit sed quas atque.</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.12631098678!2d114.58905581482381!3d-3.318945042157017!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de423c3a2fe085b%3A0xa11c32c86b5171f2!2sMasjid%20Raya%20Sabilal%20Muhtadin%20Banjarmasin!5e0!3m2!1sid!2sid!4v1673242986362!5m2!1sid!2sid" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-white bg-dark mb-3 border-light">
<img src="image/dutamall.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Duta Mall</h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat culpa, iste commodi voluptatum doloribus ducimus consequatur deleniti, debitis nihil quaerat accusantium?</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.1098931984593!2d114.60094731482381!3d-3.323014942176165!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de423e5bffd2075%3A0x91eb1e2406366f9a!2sDuta%20Mall%20Banjarmasin!5e0!3m2!1sid!2sid!4v1673243085527!5m2!1sid!2sid" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-dark bg-light mb-3 ">
<img src="image/pulau-kembang.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Pulau Kembang</h5>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur amet amet amet amet amet amet adipisicing elit. Excepturi iste consequuntur provident dicta mollitia dignissimos optio praesentium, eos neque. Nulla.</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31865.0659956352!2d114.52234693015252!3d-3.3172235261072123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de4220dac8c729b%3A0xa4ab0cf8d7724a7a!2sPulau%20Kembang!5e0!3m2!1sid!2sid!4v1673243135743!5m2!1sid!2sid" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-white bg-dark mb-3 border-light">
<img src="image/Menara_Pandang-BanjarmasinTourism.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Menara Pandang Siring</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum modi ea necessitatibus nostrum obcaecati consequuntur magnam consequatur voluptatem possimus et!
</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.134214798188!2d114.59093481482383!3d-3.316983942147789!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2de423c1879e1fb1%3A0xc531a6a5acab5a0!2sMenara%20Pandang%20Banjarmasin!5e0!3m2!1sid!2sid!4v1673243282953!5m2!1sid!2sid" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#000000f1" fill-opacity="1" d="M0,128L1440,64L1440,0L0,0Z"></path></svg>
<!-- footer -->
<footer>
<div class="footer-atas py-5 mt-0">
<div class="container">
<div class="row text-dark">
<div class="col-6">
<h4>Social Media</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item text-dark px-0">
<div class="social-media-img">
<a href="https://www.instagram.com/wisata.banjarmasin/?hl=id" target="_blank"><img src="image/icons8-instagram (1).svg" alt="Instagram Wisata Banjarmasin"></a>
</div>
</li>
<li class="list-group-item text-dark px-0">
<h6>Telepon</h6>
<p>0812-3456-789</p>
</li>
</ul>
</div>
<div class="col-6">
<h3>Information</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item px-0"><a href="#" class="text-dark text-decoration-none"><i
class="fas fa-chevron-right"></i> Information 1</a></li>
<li class="list-group-item px-0"><a href="#" class="text-dark text-decoration-none"><i
class="fas fa-chevron-right"></i> Information 2</a>
</li>
<li class="list-group-item px-0"><a href="#" class="text-dark text-decoration-none"><i
class="fas fa-chevron-right"></i> Information 3</a>
</li>
<li class="list-group-item px-0"><a href="#" class="text-dark text-decoration-none"><i
class="fas fa-chevron-right"></i> Information 4</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bawah text-center text-dark">
<div class="container">
<p class="m-0">© Copyright 2023 </p>
</div>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>