Charlie Curtis - Stoneweft/title> <link rel="stylesheet" type="text/css" href="styleSheet.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet"> </head> <body> <script src="mwScript.js"></script> <div name="navbar"> <img src="Images/newmwcomNavLogo.png" style="float:left; padding: 5px 10px 0px 10px;"> <ul class="navbar"> <li class="navbar"><a href="index.html">HOME</a></li> <li class="navbar"><a href="sketch.html">SKETCHBOOK</a></li> <li class="navbar"><a href="Projects.html">PORTFOLIO</a></li> <li class="navbar"><a href="contact.html">CONTACT</a></li> <li class="navbar"><a href="about.html">ABOUT</a></li> </ul> </div> <div> <img src="Images/Boa_Vista/boaBanner.jpg" style="width:100%; margin-left:0px;"> </div> <div> <h1 align="left" style="text-align:center;">BOA VISTA - CAPE VERDE</h1> <div style="position:relative; right: 70%;"> <a class="backProjects" href="Projects.html"><img src="Images/arrowLeft.png" class="bkImg"></a>  </div> </div>   <div class="container"> <a class="prev" onClick="plusSlides(-1)"><img src="Images/arrowLeft.png"></a> <a class="next" onClick="plusSlides(1)"><img src="Images/arrowRight.png"></a>  <div class="frame"> <div class="mySlides" align="center"> <img src="Images/Boa_Vista/boaSlide1.jpg" style="width:45%; align:middle; display:block; padding: 0 0 0 0;"> </div> <div class="mySlides" align="center"> <img src="Images/Boa_Vista/boaSlide2.jpg" style="width:46.75%; align:middle; display:block; padding: 0% 0 0% 0;"> </div> <div class="mySlides" align="center"> <img src="Images/Boa_Vista/boaSlide3.jpg" style="width:45%; align:middle; display:block; padding: 0% 0 0% 0;"> </div> <div class="mySlides" align="center"> <img src="Images/Boa_Vista/boaSlide4.jpg" style="width:45%; align:middle; display:block; padding: 0% 0 0% 0;"> </div> <div class="mySlides" align="center"> <img src="Images/Boa_Vista/boaSlide5.jpg" style="width:45%; align:middle; display:block; padding: 0% 0 0% 0;"> </div> <div class="mySlides" align="center"> <img src="Images/Boa_Vista/boaSlide6.jpg" style="width:45%; align:middle; display:block; padding: 0% 0 0% 0;">  </div>   <div class="row"> <div class="column"> <img class="demo cursor" src="Images/Boa_Vista/boaMini1.jpg" style="width:100%; height:150px; padding-right: 2px;" onClick="currentSlide(1)" alt="REVISIT"> </div> <div class="column"> <img class="demo cursor" src="Images/Boa_Vista/boaMini2.jpg" style="width:100%; height:150px; padding-right: 2px;" onClick="currentSlide(2)" alt="Cinque Terre"> </div> <div class="column"> <img class="demo cursor" src="Images/Boa_Vista/boaMini3.jpg" style="width:100%; height:150px; padding-right: 2px;" onClick="currentSlide(3)" alt="Mountains and fjords"> </div> <div class="column"> <img class="demo cursor" src="Images/Boa_Vista/boaMini4.jpg" style="width:100%; height:150px; padding-right: 2px;" onClick="currentSlide(4)" alt="Northern Lights"> </div> <div class="column"> <img class="demo cursor" src="Images/Boa_Vista/boaMini5.jpg" style="width:100%; height:150px; padding-right: 2px;" onClick="currentSlide(5)" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="Images/Boa_Vista/boaMini6.jpg" style="width:100%; height:150px;" onClick="currentSlide(6)" alt="Snowy Mountains"> </div> </div> </div> </div> <script> var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script>  </body> </html>