FEWD-CTEC3905/index.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>
Initial commit 2024-02-04 16:29:54 +00:00			`<!doctype html>`
			`<html lang="en">`
Changed background image to use colour selector 2024-02-19 20:42:24 +00:00			`<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>`
Working desktop carousel 2024-02-23 23:56:16 +00:00			`<div id="landing">`
Changed background image to use colour selector 2024-02-19 20:42:24 +00:00			`<div id="background"></div>`
			`<div id="background-transition"></div>`
			`<h1 id="titleBanner" class="black">Tom Cornes</h1>`
			`<div id="colorSelector">`
Background now changes on transition with colourpicker 2024-02-19 22:13:06 +00:00			`<label for="bgColour">Background Color:</label>`
			`<input id="bgColour" type="color" value="#ffffff">`
Changed background image to use colour selector 2024-02-19 20:42:24 +00:00			`</div>`
			`</div>`
Added about and added hover effect for title 2024-03-08 17:40:37 +00:00			`<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>`
Working desktop carousel 2024-02-23 23:56:16 +00:00			`</div>`
			`</div>`
			`</div>`
Added about and added hover effect for title 2024-03-08 17:40:37 +00:00
Changed background image to use colour selector 2024-02-19 20:42:24 +00:00			`</main>`
Set a title and background image with some effects 2024-02-08 17:21:26 +00:00			`<script src="js/scripts.js"></script>`
Changed background image to use colour selector 2024-02-19 20:42:24 +00:00			`</body>`
Initial commit 2024-02-04 16:29:54 +00:00			`</html>`