<!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">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://kit.fontawesome.com/c62ab2423f.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<nav class="w3-bar w3-black">
<a href="#" class="w3-button w3-bar-item">home</a>
<a href="#" class="w3-button w3-bar-item">Blog</a>
<a href="#" class="w3-button w3-bar-item">Portfolio</a>
<a href="#" class="w3-button w3-bar-item">Contact</a>
</nav>
<!--picture section-->
<section>
<img class="mySlides" src="images/atre too.jpg" alt="this is an image" width="100%" height="400px">
<img class="mySlides" src="images/fashion poster.jpg" alt="this is an image" width="100%" height="400px">
<img class="mySlides" src="images/2 girls dancing.png" alt="this is an image" width="100%" height="400px">
</section>
<!--band description-->
<section class="w3-container w3-content w3-center">
<h1 class="w3-wide">THE BAND</h1>
<p class="w3-opacity"><i>WE LVOE MUSIC</i></p>
<p class="w3-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, est aspernatur? Nobis, quibusdam facilis fugit facere dicta debitis, laborum atque magnam quisquam odio sapiente magni nemo iusto autem officia cupiditate asperiores reprehenderit adipisci ipsam quam ducimus, distinctio dolores quis. Quis eum sint mollitia, sapiente repellendus quam? Debitis, optio dolor? Impedit nobis unde quas consequuntur tempore natus. Ipsa provident maiores necessitatibus?</p>
</section>
<!--row padding section-->
<section class="w3-row-padding w3-center w3-light-gray">
<article class="w3-third">
<p>John</p>
<img src="images/boy smiling.jpg" alt="this is an image" style="height: 150px; width: 100%;">
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article class="w3-third">
<p>John</p>
<img src="images/boy smiling.jpg" alt="this is an image" style="height: 150px; width: 100%;">
<p>Lorem ipsum dolor sit amet.</p></article>
<article class="w3-third">
<p>John</p>
<img src="images/boy smiling.jpg" alt="this is an image" style="height: 150px; width: 100%;">
<p>Lorem ipsum dolor sit amet.</p></article>
</section>
<!--footer section-->
<footer class="w3-container w3-center w3-padding-64 w3-xxlarge w3-black">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-flickr"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<p class="w3-small">
Powered by <a href="#" target="_blank">w3.css</a>
</p>
</footer>
<!--javascript-->
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
</body>
</html>
Comments
Post a Comment