Nohamart/html/elephant.html
2022-12-21 00:15:57 +01:00

189 lines
6.4 KiB
HTML

<html>
<head>
<title>Elephant</title>
<link rel="shortcut icon" href="../assets/icon/Elephant/Elephant.ico">
<link rel="stylesheet" href="../css/elephant.css">
<script src="../js/elephant.js"></script>
<style>
* {
box-sizing: border-box
}
.mySlides1,
.mySlides2 {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
max-height: 400px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover,
.next:hover {
background-color: #f1f1f1;
color: black;
}
</style>
</head>
<body>
<nav data-toggled="false" data-transitionable="false">
<div id="nav-logo-section" class="nav-section">
<a href="../index.html">
<img src="../assets/icon.ico" alt="logo" height="110px" width="110px" id="logo"></i>
</a>
</div>
<div id="nav-mobile-section">
<div id="nav-social-section" class="nav-section">
<a href="https://www.instagram.com/no.0ham/">
<img src="../assets/social/insta.png" alt="insta" width="50px" height="50px">
</a>
<a href="https://twitter.com/Noo0ham">
<img src="../assets/social/twitter.png" alt="Twitter" width="50px" height="50px">
</a>
<a href="https://github.com/NohamR">
<img src="../assets/social/github.png" alt="github" width="50px" height="50px">
</a>
</div>
</div>
</nav>
<main>
<article>
<div class="article-title-section">
<h1 class="texte-titre">Elephant</h1>
</div>
</article>
<div class="slideshow-container">
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (1).JPG" alt="img1" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (2).JPG" alt="img2" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (3).JPG" alt="img3" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (4).JPG" alt="img4" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (5).JPG" alt="img5" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (6).JPG" alt="img6" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (7).JPG" alt="img7" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (8).JPG" alt="img8" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (9).JPG" alt="img9" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (10).JPG" alt="img10" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (11).JPG" alt="img11" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (12).JPG" alt="img12" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (13).JPG" alt="img13" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (14).JPG" alt="img14" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (15).JPG" alt="img15" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (16).JPG" alt="img16" width="auto" height="400px">
</div>
<div class="mySlides1">
<img src="../assets/Article/Elephant/Final/Elephant (17).JPG" alt="img17" width="auto" height="400px">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>
<script>
let slideIndex = [1, 1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) { slideIndex[no] = 1 }
if (n < 1) { slideIndex[no] = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no] - 1].style.display = "block";
}
</script>
</main>
<footer>
Dev by √(noham)² with &#10084;
</footer>
</body>
</html>