55 lines
2.3 KiB
HTML
55 lines
2.3 KiB
HTML
<!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="below-landing">
|
|
<section id="about" class="content-column">
|
|
<h2>About This Website</h2>
|
|
<p>
|
|
I am a student at DMU studying Computer Science. I have a passion for programming and web development. I have created this website as part of my coursework to display my skills and knowledge in web development.
|
|
Above, you can see the landing portion of my page. This consists of a title banner and a colour selector. The colour selector allows you to change the background image to the image that most closely matches the colour you have entered. The background colour is stored in local storage so that it will persist even after the page is reloaded.
|
|
If you are on desktop, this also changes the colour of the borders around this text!
|
|
</p>
|
|
</section>
|
|
<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>
|
|
</div>
|
|
|
|
</main>
|
|
<script src="js/scripts.js"></script>
|
|
</body>
|
|
</html>
|