Untitled

<!DOCTYPE html>
<html lang="en-gb">
	<head>
		<title>SEO - Sample Projects</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Meta is a Void tag -->
		<meta name="author" content="">
		<meta name="description" content="An effective SEO description of the page.">
		<meta name="keywords" content="An, effective, SEO description, of, the, page">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Google Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Secular+One" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
		<link rel="stylesheet" href="css/styles.css">
		<link rel="stylesheet" href="css/custom.css">
		<link rel="stylesheet" href="css/media.css">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="   crossorigin="anonymous"></script>
		<script type="javascript" src="js/alterClass.js"></script>
		<script>
			 $(document).ready(function(){
				// DOM is Ready

				var sliding = false;

				$('#next').click(function(){
					if(sliding === false){
						sliding = true;
						$('.slide').css("transition","all 2s");
						var obj = $('#slideshow img:first-child');
						var w = obj.width();
						w = "-=" + w + "px";

						$('.slide').css("left",w);

						$('#slideshow-outer i').css("color","#404040");
						$('#slideshow-outer i').css("border-color","#404040");
						$('#slideshow-outer i').css("cursor", "auto");

						setTimeout(function(){
							obj.remove();
							$('#slideshow').append(obj);
							$('.slide').css("transition","none");
							$('.slide').css("left", '0');
							$('#slideshow-outer i').attr("style","");
							sliding = false;
						},2000);
					}

				});


					$('#prev').click(function(){

						if(sliding === false){
							$('.slide').css("transition","none");
							sliding = true;
							var obj = $('#slideshow img:last-child');
							obj.remove();
							$('#slideshow').prepend(obj);
							var w = obj.width();
							w = "-=" + w + "px";
							$('.slide').css("left",y);
							$('.slide').css("transition","all 2s");
							$('.slide').css("left","0");

							$('#slideshow-outer i').css("color","#404040");
							$('#slideshow-outer i').css("border-color","#404040");
							$('#slideshow-outer i').css("cursor", "auto");

							setTimeout(function(){
								$('#slideshow-outer i').attr("style","");
								sliding = false;
							},2000);
						}

					});

			}); // DOC Ready
		</script>

		<h1>The Wire Car Collection</h1>

		<nav id="top-nav" role="navigation">
			<ul>
				<a href=".html">All Cars</a>
				<a href=".html">Shop</a>
				<a href=".html">Commission</a>
				<a href=".html">Proress</a>
				<a href=".html">About</a>
			</ul>
		</nav>

		<div id="slideshow-outer">
			<i id="prev" class="fas fa-angle-left" title="Click to view previous model"></i>
			<div id="slideshow">
				<img class="slide" src="assets/cars/rwb-porsche.png" alt="RWB Porsche" longdesc="wire model of a rwb porsche against black background">
				<img class="slide" src="assets/cars/ferrari-f40.png" alt="Ferrari F40" longdesc="wire model of a ferrari f40 against black background">
				<img class="slide" src="assets/cars/honda-nsx.png" alt="Honda NSX" longdesc="wire model of a honda nsx against black background">
			</div>
			<i id="next" class="fas fa-angle-right" title="Click to view next model"></i>
		</div>

	</head>
	<body>
	<header>

	</header>
	<nav>

	</nav>
	<main>

	</main>
		<footer class="invert txt-r">
		<i class="fa fa-facebook"></i>
		<i class="fa fa-twitter"></i>
		<i class="fa fa-instagram"></i>
		<i class="fa fa-youtube-play"></i>

	</footer>
	</body>
</html>