<!DOCTYPE html>
<html lang="en">
<!--below is the head this contains the link for the bootstrap CDN'S to allow us to use the bootstrap grid,
to use the font awesome icons for my footer, the hover cdn to highlight when I hover over the font awesome icons and also the link snippet for my own CSS-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css">
<title>Eminem</title>
</head>
<body>
<header>
<!--"navbar taken from bootstrap documentation added the navbar-dark and bg-dark for a black background,
I also changed the active class on each list item to coincide with the current page and added a class to highlight it red to show you are on this page"-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link navfont" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="bio.html">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="music.html">Music</a>
</li>
<li class="nav-item active">
<a class="nav-link navfont" href="tour.html">Tour</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="comp.html">Competition</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-main">
<h1 class="text-uppercase text-white text-center">photos</h1>
</div>
</div>
<!--this is the photos section for the tour page with 4 carousels, they are displayed on top of each other on mobile devices and
they will be on 2 seperate rows and 2 carousels side by side on medium devices and up again keeping in line with the music page for good user
experience-->
<div class="row">
<div class="col-12 col-md-6 bg-main carousel-pad">
<div id="carouselExampleFade1" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner image-size">
<div class="carousel-item active">
<img src="assets/images/tour-image-1.jpg" class="d-block w-100" alt="tour-image-1">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-2.jpg" class="d-block w-100" alt="tour-image-2">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-3.jpg" class="d-block w-100" alt="tour-image-3">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-4.jpg" class="d-block w-100" alt="tour-image-4">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-12 col-md-6 bg-main carousel-pad">
<div id="carouselExampleFade2" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner image-size">
<div class="carousel-item active">
<img src="assets/images/tour-image-5.jpg" class="d-block w-100" alt="tour-image-5">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-6.jpg" class="d-block w-100" alt="tour-image-6">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-7.jpg" class="d-block w-100" alt="tour-image-7">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-8.jpg" class="d-block w-100" alt="tour-image-8">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 bg-main carousel-pad">
<div id="carouselExampleFade3" class="carousel slide carousel-fades" data-ride="carousel">
<div class="carousel-inner image-size">
<div class="carousel-item active">
<img src="assets/images/tour-image-9.jpg" class="d-block w-100" alt="tour-image-9">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-10.jpg" class="d-block w-100" alt="tour-image-10">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-11.jpg" class="d-block w-100" alt="tour-image-11">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-12.jpg" class="d-block w-100" alt="tour-image-12">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade3" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade3" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-12 col-md-6 bg-main carousel-pad">
<div id="carouselExampleFade4" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner image-size">
<div class="carousel-item active">
<img src="assets/images/tour-image-13.jpg" class="d-block w-100" alt="tour-image-13">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-14.jpg" class="d-block w-100" alt="tour-image-14">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-15.jpg" class="d-block w-100" alt="tour-image-15">
</div>
<div class="carousel-item">
<img src="assets/images/tour-image-16.jpg" class="d-block w-100" alt="tour-image-16">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!--this is the section for upcoming tour dates I created a unordered list as I wanted them to display in bullet points
again classes where added to change the background colour for the container and the colour of the text
The colour of backgrounds and text where changed to highlight the new section-->
<section class="bg-bottom">
<div class="container bg-bottom">
<div class="row">
<div class="col-12">
<h1 class="text-uppercase tour-text text-center tour-text-pad">upcoming tour dates</h1>
</div>
</div>
<div class="row">
<div class="col-4 tour-text">
<ul>
<li>New York</li>
<li>London</li>
<li>Dublin</li>
<li>Paris</li>
</ul>
</div>
<div class="col-4 tour-text">
<ul>
<li>Berlin</li>
<li>Switzerland</li>
<li>Detroit</li>
<li>Canada</li>
</ul>
</div>
<div class="col-4 tour-text">
<ul>
<li>Perth</li>
<li>Sydney</li>
<li>New Zealand</li>
<li>Egypt</li>
</ul>
</div>
</div>
<!--"this is the section where people can apply for when presale tickets become available
form was taken from bootstrap again the same classes where added as I had in the above to change the colours"-->
<div class="row">
<div class="col-12 bg-bottom">
<h5 class="tour-text musi text-center">Apply below to receive an email when presale tickets are available</h5>
</div>
</div>
<div class="row">
<div class="col-12 bg-bottom">
<form>
<div class="form-group tour-text-2">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control w-50" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group tour-text-2">
<label for="exampleInputPassword1">Confirm Email Address</label>
<input type="password" class="form-control w-50" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label tour-text" for="exampleCheck1">Verify</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</section>
<!--footer begins here, the footer code is taken from the resume project, I changed the highlight colours
I also only used the icons and links that would relate to this project-->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-bottom">
<ul class="list-inline social-links d-flex justify-content-end">
<li class="list-inline-item">
<a target="_blank" href="https://www.facebook.com/eminem/">
<i class="fa fa-facebook" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.youtube.com/user/EminemMusic/featured">
<i class="fa fa-youtube" aria-hidden="true"></i>
<span class="sr-only">Youtube</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.instagram.com/eminem/">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://twitter.com/Eminem">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!--bootstrap jquery CDN, this is added so that plugins like modals etc can work correctly without having to add my own javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>