Bemvindu ba maluk sira hotu neebe akopamha ona iha bloger ida ne'e tuir mai ita sei aprende oinsa ita halo slideshow ba ita nia website header , ita boot sira bele copy nia koding ,,
nia koding mak hanesan tuir mai nee :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> ::.Sistem Informasi.::</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/icons-main/font/bootstrap-icons.css">
<style type="text/css">
.categoria{
background-color: palevioletred;
width: 220px;
float: left;
padding: 10px;
}
.categoria ul li a{
text-decoration: none;
font-family: Arial Narrow;
color: white;
}
.categoria ul li{
list-style: none;
}
.categoria h3{
background-color: goldenrod;
padding: 10px;
}
.categoria ul li a:hover{
background-color: yellowgreen;
color: black;
border-radius: 3px;
border: solid darkred;}
</style>
</head>
<body>
<div class="container">
<header>
<h1>WEBSITE COMPANY OFFICIAL LDA</h1>
<div class="slideshow">
<img class="active" src="img/kk.jpg" alt="Gambar 1">
<img src="img/jj.jpg" alt="Gambar 2">
<img src="img/mmm.jpg" alt="Gambar 3">
<span class="prev">❮</span>
<span class="next">❯</span>
</div>
</header>
<nav>
<ul>
<li><a href="index.html"> <i class="bi bi-5-circle-fill"></i> Veranda</a></li>
<li><a href="pages/municipio.html">Municipiu</a></li>
<li><a href="pages/nacional.html">Nacional</a></li>
<li><a href="">Internacional</a></li>
<li><a href="">Economia</a></li>
<li><a href="">Edukasaun</a></li>
<li><a href="">Contakee</a></li>
</ul>
</nav>
<!--info konten-->
<div class="categoria">
<h3>Media Social</h3>
<ul>
<li><a href=""><li><a href="#"><i class="bi bi-facebook m-4"></i> Facabook</a></li>
<li><a href=""><i class="bi bi-youtube"></i>Youtobe</a></li>
</ul>
<h3>kategoria Informsaun</h3>
<ul>
<li><a href="pages/info.html">informasan akademic</a></li>
<li><a href="Pages/infoMun.html">Informasaun municipiu</a></li>
<li><a href="pages/railaran.html">Informasaun Rai laran</a></li>
</ul>
</div>
<div class="content">
<br>
<p style="font-size: 20px; text-align: center;" ><u>SELAMAT DATANG WEBSITE COURSE</u></p>
</div>
<!--and info konten-->
<footer>
GrigorioG3 @ 2023
</footer>
</div>
<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img");
var prevBtn = document.getElementsByClassName("prev")[0];
var nextBtn = document.getElementsByClassName("next")[0];
showSlides();
function showSlides() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // Ubah gambar setiap 3 detik
}
prevBtn.onclick = function() {
slideIndex--;
if (slideIndex < 1) {
slideIndex = slides.length;
}
showSlides();
};
nextBtn.onclick = function() {
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
showSlides();
};
</script>
</body>
</html>
.container{
border:4px solid hotpink;
max-width: 1000px;
position: relative;
margin: auto;
}
header{
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: relative;
border: 3px solid red;
}
.slideshow {
position: relative;
max-height: 400px;
overflow: hidden;
}
.slideshow img {
display: none;
width: 100%;
height:190px;
}
.slideshow img.active {
display: block;
}
.slideshow .prev,
.slideshow .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 30px;
cursor: pointer;
}
.slideshow .prev {
left: 20px;
}
.slideshow .next {
right: 20px;
}
header h1 {
font-size: 36px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
nav{
padding: 10px;
background-color: seagreen;
display: flex;
border: 4px solid yellowgreen;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
margin-right: 10px;
}
nav ul li a{
text-decoration: none;
padding: 10px;
display: block;
color: white;
border: none;
outline: none;
}
li a:hover{
background-color: grey;
color: black;
border-radius: 3px;
border: solid darkred;
border: none;
outline: none;
}
section{
margin: 20px;
}
footer{
background-color: seagreen;
padding: 20px;
color: white;
text-align: center;
clear: both;
}
h2{
color: red;
}
.content{
margin-left: 260px;
}
