<!DOCTYPE html>
<html>
<head>
<title>Home Town</title>
<link rel="icon" type="image/x-icon" href="image/myofficialimage.jpg">
<style>
body {
background-image: url('image/tanjungdawai.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
margin:0;
padding:0;
}
ul {
list-style-type: none;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: grey;
}
.active {
background-color: white;
}
body, html {
height: 50%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("image/oora.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="hometown.html">Home Town</a></li>
<li><a href="familymembers.html">Family Members</a></li>
<li><a href="friends.html">Friends</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="personalinterest.html">Personal Interest</a></li>
<li style="float:right"><a class="active" href="aboutme.html">About Me</a></li>
</ul>
<a name="top"></a>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">My Home Town</h1>
</div>
</div>
<h2 align="center" style="font-size:50px; background-color:orange;">This Is My Begining</h2>
<div class="mapouter"><div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&height=400&hl=en&q=Bagan datuk&t=&z=14&ie=UTF8&iwloc=B&output=embed"></iframe><a href="https://mcpedls.com/">minecraft download</a></div><style>.mapouter{position:relative;text-align:right;width:100%;height:400px;}.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:400px;}.gmap_iframe {height:400px!important;}</style></div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/bbagandatuk.jpeg" alt="Bagan Datuk" style="width:100%;" border="3">
<div class="content">
<h1>Bagan Datuk</h1>
<p>Bagan Datuk, used to called Bagan Datoh is the newest addition of district in the yellow state of Perak. Bagan Datuk wasn't its own district until 2016. It was part of the larger Hlir Perak district until the Sultan of Perak, approaved the establishment of the new district.</p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/jeti.jpg" alt="Jeti Bagan Datuk" style="width:100%;" border="3">
<div class="content">
<h1>Jeti Bagan Datuk</h1>
<p>Jeti Bagan Datuk is widely considered the main attraction of Bagan Datuk. The jetty used to be a busy place where fishermans load their catch on to land but has long forgotten. Its not until there is an effort to turn Bagan Datuk into a tourist destination, the jeti has been transform into a tuorist attraction where people come to witness beautiful sunset from the jetty. </p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/beras.jpg" alt="Beting Beras Basah" style="width:100%;" border="3">
<div class="content">
<h1>Jeti Beting Beras Basah</h1>
<p> Beting Beras Basah is a unique one. This place looks ordinary at first. However this place contain a very rich hstory for the state and the people of Perak. This is where the Sultan coronation ceremony ends. So it's a big deal. Also some says that this place is haunted. You have been warned!</p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/sabda.jpg" alt="SABDA" style="width:100%;" border="3">
<div class="content">
<h1>Sekolah Menengah Sains Bagan Datoh</h1>
<p> Bagan Datuk is home to one of the most elite school in Malaysia. Sekolah Menengah Sains Bagan Datoh or SABDA for short is a Cluster School of Excellence (CSE) established in 2007. The school gathers hundreds of brilliant students from all over the country who eager to learn about science stream. The school had produced many excellent graduates and its achievement helps put Bagan Datuk on the map. </p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/sunflower.jpg" alt="Sunflower Garden" style="width:100%;" border="3">
<div class="content">
<h1>Sunflower Garden</h1>
<p>Welcome and witness the beautiful and blooming sunflowers. Not just that, there are also Koi fishes and cute ducks Great for flora and fauna lovers. Wedding photography heaven.</p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/sembilan.jpg" alt="Pulau Sembilan" style="width:100%;" border="3">
<div class="content">
<h1>Pulau Sembilan</h1>
<p>Pulau Sembilan the beautiful new additional islands for Bagan Datuk. Before that, islands were under the juristiction of the district of Manjung. The beach glows a lumination blue during night time. </p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<img src="image/zahid.jpg" alt="Dato' Seri Ahmad Zahid bin Hamidi" style="width:100%;" border="3">
<div class="content">
<h1>Dato' Seri Dr. Ahmad Zahid bin Hamidi</h1>
<p>Fun fact, Dato' Seri Dr. Ahmad Zahid bin Hamidi, the Deputy Prime Minister of Malaysia (2022-now) is from Bagan Datuk. More specifically, Rungkup. </p>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<center>
<h2>Lagu Bagan Datuk</h2>
<br>
<p><a href="https://youtu.be/f5NTnXY-gLw" target="_blank"><img src="image/yt.png" width="250" height="150"></a></p>
</center>
<br>
<center>
<a href="#top"><img src="image/gotop.png"></a>
</center>
<br>
<footer>
<p align="center" style="background-color:orange;">Copyright © 2022 Muhammad Zulhilmi Saifol Bahri. All right reserved.
</footer>
</body>
</html>