Tugas Kelompok Pemrograman Web 1

TUGAS KELOMPOK PEMROGRAMAN WEB 1
Tema : Pariwisata
Anggota :
1. Peri sopian nurhasin / 181011450285

2. Muhammad zulfathi / 201011401601
3. Syahrul rakasiwi / 201011400139
Screenshoot :
Source code :
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no" />


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/
css/bootstrap.min.css" integrity="sha384-
B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjE
UQouq2+l" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/bootstrap-

grid.min.css">
<title>Pandeglang</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-
primary fixed-top" id="mainNav"">
<a class="navbar-brand text-white navbar-brand"
href="#home">
<img src="icon/badak.png" width="60" height="30"
alt="">
Pandeglang
</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link text-white"
href="#home">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger text-
white" href="#wisataPantai">Wisata Pantai</a>
</li>
white" href="#wisataPulau">Wisata Pulau</a>
</li>
white" href="#wisataGunung">Wisata Gunung</a>
</li>
white" href="#wisataAlam">Wisata Alam</a>
</li>
</li>
</ul>
</div>
</nav>
<section id="home">
<div id="carouselExampleIndicators"
class="carousel slide mb-5" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
data-slide-to="0" class="active"></li>
data-slide-to="1"></li>
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/ayey.jpg" class="d-block w-
100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karang.jpg" class="d-block w-
100" alt="...">
</div>
<img src="img/curug.jpg" class="d-block w-
100" alt="...">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section id="menu">
<div class="container-fluid">
<div class="row mb-2 d-flex justify-content-
center text-center">
<div class="col-lg-3 col-sm-6">
<img src="icon/pantai.png" class="img-fluid"
alt="Pantai">
<a href="#wisataPantai" class="btn btn-
primary">Wisata Pantai</a>
</div>
<img src="icon/pulau.png" class="img-fluid"
alt="Pulau">
<a href="#wisataPulau" class="btn btn-
primary">Wisata Pulau</a>
</div>
<img src="icon/gunung.png" class="img-fluid"
alt="Gunung">
<a href="#wisataGunung" class="btn btn-
primary">Wisata Gunung</a>
</div>
<img src="icon/curug.png" class="img-fluid"
alt="Alam">
<a href="#wisataAlam" class="btn btn-
primary">Wisata Alam</a>
</div>
</div>
</div>
</section>
<section id="wisataPantai">
<div class="container-fluid mt-5 mb-5">
<div class="row">
<div class="col mb-3">
<h4>Wisata Pantai</h4>
</div>
</div>
<div class="row">
<img src="img/pantai/pantai.png" class="img-
fluid" alt="pantai">
</div>
<div class="col-lg-4 col-sm-6 d-flex justify-
content-center">
<ul>
<li><h5>Rekomendasi Pantai</h5></li>
<hr>
<li>Pantai Tanjung Lesung</li>
<li>Pantai Batu Hideung</li>
<li>Pantai Kharisma</li>
<li>Pantai Carita</li>
<li>Pantai Florida 2 Anyer</li>
<li>Pantai Matahari Carita</li>
<li>Pantai Caringin</li>
<li>Coconut Island Waterpark</li>
<li>Pantai Cipenyu</li>
</ul>
</div>
</div>
</div>
</section>
<section id="wisataPulau">
<div class="row">
<h4>Wisata Pulau</h4>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 ">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Sequi hic, odio ipsam cupiditate
quidem deleniti. Ut temporibus laudantium modi
doloremque maiores dicta sed tempora fugit? Odio
voluptates provident incidunt consectetur.
</div>
<div class="col-lg-8 col-sm-6 ml-auto">
<img src="img/pulau/pulauumang.jpg"
class="img-fluid rounded float-right" alt="Umang">
</div>
</div>
</div>
</section>
<section id="wisataGunung">
<div class="row">
<h4>Wisata Gunung</h4>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<img src="img/gunung/pulosari.jpg"
class="img-fluid" alt="Gunung">
</div>
<ul>
<li>Rekomendasi Gunung</li>
<hr>
<li>Gunung Aseupan</li>
<li>Gunung Honje</li>
<li>Gunung Karang</li>
<li>Gunung Pulosari</li>
</ul>
</div>
</div>
</div>
</section>
<section id="wisataAlam">
<div class="row">
<h4>Wisata alam</h4>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 ">
<ul>
<li style="text-align:
center;"><h5>Rekomendasi Wisata Alam</h5></li>
<hr>
<li>Curug Putri Carita</li>
<li>Air Terjun Curug Tomo Pandeglang</li>
<li>Curug Putri Pulosari</li>
<li>Curug Cinoyong</li>
<li>Curug Kembar</li>
<li>Air Terjun Curug Ciajeung
Pandeglang</li>
<li>Curug Cimanggung</li>
<li> Curug Leuwi Bumi</li>
<li>Airterjun Curug Goong</li>
<li>Curug Sawer Cigelis</li>
<li>Cikoromoy</li>
<li> Taman Nasional Ujung Kulon</li>
<li>Persawahan Desa Cinoyong Kecamatan
Carita</li>
<li>Mata Air Citaman</li>
</ul>
</div>
<div class="col-lg-8 col-sm-6 ml-auto">
<img src="img/alam/curug.jpg" class="img-
fluid rounded float-right" alt="Alam">
</div>
</div>
</div>
</section>
<section id="wisata">
<div class="container-fluid">
<div class="row">
<div class="col">
<h4 style="text-align: center;" class="mb-
3">30 Wisata diKabupaten Pandeglang</h4>
</div>
</div>
<div class="row">
<ul>
<li>Curug Leuwi Bumi</li>
<li>Pantai Batu Hideung</li>
<li>Kadujangkung</li>
<li>Pantai Carita</li>
<li>Pulau Badul</li>
<li>Cikoromoy</li>
<li>Pantai Cipenyu</li>
<li>Taman Nasional Ujung Kulon</li>
<li>Pulau Peucang</li>
</ul>
</div>
<ul>
<li>Pulau Panaitan</li>
<li>Pulau Handeuleum</li>
<li>Pulau Umang</li>
<li>Persawahan Desa Cinoyong Kecamatan
Carita</li>
<li>Pulau Oar</li>
<li>Pantai Daplangu</li>
<li>Turalak Outbond & Adventure</li>
<li>Gunung Karang</li>
<li>Gunung Pulosari</li>
</ul>
</div>
<ul>
<li>Mata Air Citaman</li>
<li>Coconut Island Carita</li>
<li>Bukit Padi</li>
<li>Pantai Bugel Mega Camara</li>
<li>Pulau Liwungan</li>
<li>Tanjung Lesung</li>
<li>Pasir Peuteuy</li>
<li>Curug Ciajeung</li>
<li>Tugu Asmaul Husna</li>
</ul>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0
0 1440 320"><path fill="black" fill-opacity="1"
d="M0,32L48,48C96,64,192,96,288,106.7C384,117,480,107,57
6,90.7C672,75,768,53,864,48C960,43,1056,53,1152,80C1248,
107,1344,149,1392,170.7L1440,192L1440,320L1392,320C1344,
320,1248,320,1152,320C1056,320,960,320,864,320C768,320,6
72,320,576,320C480,320,384,320,288,320C192,320,96,320,48
,320L0,320Z"></path></svg>
</section>
<footer id="footer">
<p><i class="bi bi-star"></i> Created © <i
class="bi bi-star"></i></p>
<p>
<i class="bi bi-arrow-return-right"></i> | <a h"
class="text-white" target="_blank"><i class="bi bi-
facebook"></i></a> |
<a href=" " class="text-white" target="_blank"> <i
class="bi bi-github"></i> </a> |
<a href="" class="text-white" target="_blank">
<i class="bi bi-instagram"></i> </a> |
<a href" class="text-white" target="_blank"> <i
class="bi bi-linkedin"></i> </a> |
<a href" class="text-white" target="_blank"> <i
class="bi bi-twitter"></i> </a> | <i class="bi bi-arrow-
return-left text-white"></i>
</p>
</footer>

<script src="assets/js/bootstrap.js.map"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+O
rCXaRkfj" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.bundle.min.js"
integrity="sha384-
Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQf
GII0yAns" crossorigin="anonymous"></script>
</body>
</html>

Tugas Kelompok Pemrograman Web 1

Uploaded by

Document Information

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

Tugas Kelompok Pemrograman Web 1

Uploaded by

Copyright:

Available Formats

TUGAS KELOMPOK PEMROGRAMAN WEB 1

1. Peri sopian nurhasin / 181011450285

<link rel="stylesheet" href="assets/css/bootstrap-

<!-- Option 1: jQuery and Bootstrap Bundle (includes

You might also like