Added about and added hover effect for title

css/styles.css

@@ -3,15 +3,17 @@
 /* applies to screens smaller than 500px (first breakpoint) */
 /* and above unless overwritten below */
 
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..600&display=swap');
 
 :root {
-  
+  --bgColor: #ffffff;
 }
 
 
 body {
   font-family: 'Outfit', sans-serif;
+  font-weight: 600;
+  font-size: 1.5em;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -72,7 +74,11 @@ h1 {
 #titleBanner {
   padding-left: 5%;
   padding-right: 5%;
-  transition: color 1s, background-color 1s;
+  transition: color 1s, background-color 1s, border-radius 0.5s ease;
+}
+
+#titleBanner:hover {
+  border-radius: 1em;
 }
 
 .black {
@@ -108,6 +114,19 @@ h1 {
   font-size: 1.5em;
 }
 
+/* BELOW LANDING STYLES */
+
+#below-landing {
+  background-color: #0d0d0d;
+  overflow: auto;
+  color: white;
+  padding: 50px;
+}
+
+p {
+  font-weight: 200;
+}
+
 /* CAROUSEL STYLES */
 
 #carousel {
@@ -121,7 +140,7 @@ h1 {
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 50px;
+  padding: 50px 0px;
 }
 
 .carousel-item {
@@ -150,6 +169,7 @@ h1 {
   text-align: center;
   line-height: 70px;
   font-size: 50px;
+  font-weight: 400;
   margin: 0;
   margin-bottom: 15px;
   color: white;
@@ -165,6 +185,7 @@ h1 {
   transform: translate(100px, -35px);
   color: white;
   font-size: 25px;
+  font-weight: 550;
   margin: 0;
   text-shadow: black 3px 3px 3px;
   width: 500px;
@@ -248,4 +269,16 @@ h1 {
     font-size: 50px;
   }
 
+  .content-column {
+    max-width: 1300px;
+    margin: auto;
+  }
+
+  section {
+    padding: 0px 50px;
+    border-style: solid;
+    border-width: 1px;
+    border-image : linear-gradient(to bottom, #fff0 0%, #fff0 10%, var(--bgColor) 50%, #fff0 90%, #fff0 100%) 1;
+  }
+
 }

index.html

@@ -17,26 +17,37 @@
           <input id="bgColour" type="color" value="#ffffff">
         </div>
       </div>
-      <div id="carousel">
+      <div id="below-landing">
-        <div id="carousel-container">
+        <section id="about" class="content-column">
-          <div class="carousel-item" id="carousel-1">
+          <h2>About This Website</h2>
-            <p class="carousel-id">1</p>
+          <p>
-            <p class="carousel-title">Night Trees</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.
-          </div>
+            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.
-          <div class="carousel-item" id="carousel-2">
+            If you are on desktop, this also changes the colour of the borders around this text!
-            <p class="carousel-id">2</p>
+          </p>
-            <p class="carousel-title">Rocket Head</p>
+        </section>
-          </div>
+        <div id="carousel">
-          <div class="carousel-item" id="carousel-3">
+          <div id="carousel-container">
-            <p class="carousel-id">3</p>
+            <div class="carousel-item" id="carousel-1">
-            <p class="carousel-title">Spaceship</p>
+              <p class="carousel-id">1</p>
-          </div>
+              <p class="carousel-title">Night Trees</p>
-          <div class="carousel-item" id="carousel-4">
+            </div>
-            <p class="carousel-id">4</p>
+            <div class="carousel-item" id="carousel-2">
-            <p class="carousel-title">Fantasy Archer</p>
+              <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>

js/scripts.js

@@ -89,6 +89,7 @@ bgColour.addEventListener("input", () => {
     const B = parseInt(bgColour.value.substring(5, 7), 16);
     changeBackground(R, G, B);
     localStorage.setItem("bgColour", bgColour.value);
+    document.documentElement.style.setProperty("--bgColor", bgColour.value);
 });
 
 function transitionBackground(newUrl, blackwhite) {
@@ -210,6 +211,7 @@ const initR = parseInt(bgColour.value.substring(1, 3), 16);
 const initG = parseInt(bgColour.value.substring(3, 5), 16);
 const initB = parseInt(bgColour.value.substring(5, 7), 16);
 changeBackground(initR, initG, initB);
+document.documentElement.style.setProperty("--bgColor", bgColour.value);
 // Initialize carousel
 initCarousel();
 carouselExpand(1);