Saturday, March 27, 2021

 Exercise #5

<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {font-family: "Lato", sans-serif}

.mySlides {display: none}

</style>

<body>


<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->

<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">

  <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">BAND</a>

  <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">TOUR</a>

  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>

  <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">MERCH</a>

</div>


<!-- Page content -->

<div class="w3-content" style="max-width:2000px;margin-top:46px">


  <!-- Automatic Slideshow Images -->

  <div class="mySlides w3-display-container w3-center">

    <img src=https://i.ibb.co/xLyCqYQ/van-x-roberto-1-0.jpg" alt="van-x-roberto-1-0" style="width:100%">

    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">

      <h3>Los Angeles</h3>

      <p><b>We had the best time playing at Venice Beach!</b></p>   

    </div>

 


  <!-- The Band Section -->

  <div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">

    <h2 class="w3-wide">my works</h2>

    <p class="w3-opacity"><i>I love graphic art</i></p>

    <p class="w3-justify"> As you can see below this is my top 3 arts I like the most</p>

    <div class="w3-row w3-padding-32">

      <div class="w3-third">

        <p>Name</p>

        <img src="https://i.ibb.co/ZzfXK7k/John-Wick-4.png" alt="John-Wick-4" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">

      </div>

      <div class="w3-third">

        <p>Name</p>

        <img src="https://i.ibb.co/PWYysXm/black.png" alt="black"class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">

      </div>

      <div class="w3-third">

        <p>Name</p>

        <img src="https://i.ibb.co/wz3cqJQ/brand-logo-cstmz-1.png" alt="brand-logo-cstmz-1" class="w3-round" alt="Random Name" style="width:60%">

      </div>

    </div>

  </div>


 


 

  

<!-- End Page Content -->

</div>


<!-- Image of location/map -->

<img src="https://i.ibb.co/6H4p6Fg/ign.png" alt="ign"  class="w3-image w3-greyscale-min" style="width:100%">


<!-- Footer -->

<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">

  <i class="fa fa-facebook-official w3-hover-opacity"></i>

  <i class="fa fa-instagram w3-hover-opacity"></i>

  <i class="fa fa-snapchat w3-hover-opacity"></i>

  <i class="fa fa-pinterest-p w3-hover-opacity"></i>

  <i class="fa fa-twitter w3-hover-opacity"></i>

  <i class="fa fa-linkedin w3-hover-opacity"></i>

  <p class="w3-medium"> <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>

</footer>


<script>

// Automatic Slideshow - change image every 4 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, 4000);    

}



</script>


</body>

</html>


No comments:

Post a Comment