-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (118 loc) · 6.22 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
<!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>Tugas - Pemrograman Web</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="my.css">
</head>
<body>
<div class="navbar">
<div class="item-left">
<img src="logo-web.png" alt="Logo Website" class="logo-website">
<h2 class="title-website">Pesona Tanah Borneo</h2>
</div>
<div class="item-right">
<a href="#" onclick="event.preventDefault();document.getElementById('budaya').scrollIntoView({behavior: 'smooth'});">Budaya</a>
<a href="#" onclick="event.preventDefault();document.getElementById('flora-fauna').scrollIntoView({behavior: 'smooth'});">Flora & Fauna</a>
<a href="#" onclick="event.preventDefault();document.getElementById('kuliner').scrollIntoView({behavior: 'smooth'});">Kuliner</a>
<a href="#" class="btn-berlangganan" onclick="event.preventDefault();document.getElementById('login').scrollIntoView({behavior: 'smooth'});">Berlangganan</a>
</div>
</div>
<div class="img-primary">
<h3 class="m-0 text-img-primary">The Land Of A Thousand Beauties</h3>
</div>
<div class="container">
<div class="article" id="budaya">
<h3 class="title-article">Budaya</h3>
<div class="content-article">
<img class="image-content" src="budaya.jfif" alt="Image Budaya">
<p class="paragraf-right">
Dayak secara kaidah bahasa sebenarnya bukan nama untuk sebuah suku. Sebutan “orang Dayak” dalam bahasa Kalimantan pada umumnya berarti “orang pedalaman”, yang mana mereka jauh dari kehidupan kota. Panggilan “orang Dayak” bukanlah dikhususkan pada satu suku saja, tetapi berbagai macam suku. Sebagai contoh, Dayak Kenyah, Dayak Tunjung, Dayak Punan, dan puluhan anak suku lainnya.
Adat istiadat yang dimiliki oleh Suku Dayak sangat kentara yakni, terlihat dari bagaimana cara mereka berpakaian, bagaimana cara mereka menjalani kehidupannya, serta upacara/ritual yang mereka lakukan.
Selain itu, mereka juga memiliki bahasa khas dan tarian-tarian Dayak. Berbagai macam adat istiadat inilah yang menjadi corak kebudayaan mereka.
<br><br>
<a href="https://www.detik.com/tag/kebudayaan-suku-dayak" class="btn-read-more" target="_blank">
Selengkapnya
</a>
</p>
</div>
</div>
<div class="article mt-40" id="flora-fauna">
<h3 class="title-article">Flora & Fauna</h3>
<div class="content-article">
<img class="image-content image-content-left" src="fauna.jfif" alt="Image Fauna">
<p class="paragraf-left">
Kalimantan adalah wilayah geografis (provinsi) di Indonesia yang sangat kaya dengan alam dan hasil buminya. Berbagai macam jenis flora dan fauna ada di wilayah seluas lebih dari 125 ribu kilometer persegi tersebut.
Namun, sayangnya, keberadaan dari beberapa spesies di Kalimantan sudah dalam keadaan yang memprihatinkan. Saat ini, bahkan populasi mereka sudah terancam hilang dari muka Bumi.
<br><br>
<a href="https://ilmugeografi.com/biogeografi/flora-dan-fauna-kalimantan" class="btn-read-more" target="_blank">
Selengkapnya
</a>
</p>
<img class="image-content image-content-right" src="fauna.jfif" alt="Image Fauna">
</div>
</div>
<div class="article mt-40" id="kuliner">
<h3 class="title-article">Kuliner</h3>
<div class="content-article">
<img class="image-content" src="kuliner.jpg" alt="Image Kuliner">
<p class="paragraf-right">
Selain beragam budaya , flora dan fauna, Kalimantan juga memiliki beragam makanan khas yang sangat lezat dan unik. Dengan resep dan bumbu olahan rempah-rempah yang bermacam-macam, membuat kuliner khas Kalimantan memiliki rasa yang begitu spesial bagi penikmatnya. Mulai dari nasi kuning, ketupat kandangan, soto banjar, manday, nasi bekepor dan ratusan makanan lainnya yang sayang untuk dilewatkan jika kalian berkunjung ke Kalimantan.
<br><br>
<a href="https://www.idntimes.com/food/dining-guide/dian-nita/rekomendasi-makanan-khas-kalimantan-exp-c1c2/1" class="btn-read-more" target="_blank">
Selengkapnya
</a>
</p>
</div>
</div>
<div class="section-subscribe mt-50" id="login">
<div class="container-login">
<form action="#" method="post">
<h4 class="text-center mb-0">Ingin Berlangganan Berita ?</h4>
<h5 class="text-center mt-0">Masukan email-mu dibawah ini</h5>
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" class="input" name="nama" id="nama" placeholder="Masukan nama anda" required autocomplete="off">
</div>
<div class="form-group">
<label>Alamat Email</label>
<input type="email" class="input" name="email" id="email" placeholder="Masukan alamat email anda" autocomplete="off" required>
</div>
<button type="submit" class="btn-login" onclick="submitLogin()">
Submit
</button>
</form>
</div>
</div>
</div>
<footer class="footer mt-40">
100% made with <i class="fa fa-heart"></i> by <a href="https://www.instagram.com/ini.aduuy/" target="_blank" class="credit">Yuda Pratama</a>
</footer>
<script type="text/javascript">
function submitLogin() {
event.preventDefault();
var nama = document.querySelector('#nama');
var email = document.querySelector('#email');
if (nama.value != "" && email.value != "") {
alert(`Hai ${nama.value}, kamu berhasil berlangganan berita dari Pesona Tanah Borneo :)`);
} else {
alert('Harap mengisi form dengan benar !');
}
nama.value = "";
email.value = "";
}
let indexImage = 2;
setInterval(function() {
document.querySelector('.img-primary').style.background = `linear-gradient(rgb(99 99 99 / 70%), rgb(0 0 0 / 70%)), url('img-primary${indexImage}.jpg')`;
document.querySelector('.img-primary').style.backgroundPosition = (indexImage == 3) ? `top` : `center`;
document.querySelector('.img-primary').style.backgroundSize = `cover`;
document.querySelector('.img-primary').style.backgroundRepeat = `no-repeat`;
indexImage = (indexImage != 3) ? (indexImage + 1) : 1;
}, 3200);
</script>
</body>
</html>