<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P2672045</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<main>
<div id="landing">
<div id="background"></div>
<div id="background-transition"></div>
<h1 id="titleBanner" class="black">Tom Cornes</h1>
<div id="colorSelector">
<label for="bgColour">Background Color:</label>
<input id="bgColour" type="color" value="#ffffff">
</div>
</div>
<div id="carousel">
<div id="carousel-container">
<div class="carousel-item" id="carousel-1">
<p class="carousel-id">1</p>
<p class="carousel-title">Night Trees</p>
</div>
<div class="carousel-item" id="carousel-2">
<p class="carousel-id">2</p>
<p class="carousel-title">Rocket Head</p>
</div>
<div class="carousel-item" id="carousel-3">
<p class="carousel-id">3</p>
<p class="carousel-title">Spaceship</p>
</div>
<div class="carousel-item" id="carousel-4">
<p class="carousel-id">4</p>
<p class="carousel-title">Fantasy Archer</p>
</div>
</div>
</div>
</main>
<script src="js/scripts.js"></script>
</body>
</html>