Merge pull request #2 from CTEC3905-2022/Text-Content

Text content

css/styles.css

@@ -3,15 +3,16 @@
 /* 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-size: 1.5em;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -65,6 +66,7 @@ body {
 
 h1 {
   font-size: 10vw;
+  font-weight: 600;
   text-align: center;
   user-select: none;
 }
@@ -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,11 +114,70 @@ h1 {
   font-size: 1.5em;
 }
 
+/* BELOW LANDING STYLES */
+
+#below-landing {
+  background-color: #101010;
+  overflow: auto;
+  color: white;
+  padding: 50px;
+}
+
+p {
+  font-weight: 200;
+}
+
+h2 {
+  font-size: 3em;
+  font-weight: 400;
+  margin: 0;
+  text-decoration: underline;
+  text-decoration-color: var(--bgColor);
+}
+
+h3 {
+  font-size: 1.5em;
+  font-weight: 300;
+  margin: 0;
+
+}
+
+.features {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#features-intro p {
+  text-align: center;
+}
+
+#table-heading {
+  margin-bottom: 25px;
+}
+
+.feature-showcase {
+  display: flex;
+  flex-direction: column;
+  border-radius: 40px;
+  background-color: #181818;
+}
+
+.feature-showcase-item {
+  padding: 30px;
+  border-bottom: 1px solid var(--bgColor);
+}
+
+#modern-css {
+  border-bottom: none;
+}
+
 /* CAROUSEL STYLES */
 
 #carousel {
   height: 100vh;
-  background-color: #0d0d0d;
+  background-color: #101010;
   position: relative;
   display: flex;
 }
@@ -121,7 +186,7 @@ h1 {
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 50px;
+  padding: 50px 0px;
 }
 
 .carousel-item {
@@ -131,8 +196,8 @@ h1 {
   width: calc(100% - 34px);
   min-height: 100px;
   margin: 12px;
-  border-radius: 55px;
+  border-radius: 52px;
-  border: 5px solid black;
+  border: 3px solid var(--bgColor);
   overflow: hidden;
 
   transition: width 1s ease, height 1s ease;
@@ -147,13 +212,9 @@ h1 {
   height: 70px;
   background-color: #202020;
   border-radius: 40px;
-  text-align: center;
-  line-height: 70px;
-  font-size: 50px;
   margin: 0;
   margin-bottom: 15px;
-  color: white;
+  border: 3px solid var(--bgColor);
-  border: 5px solid black;
   text-shadow: black 5px 5px 5px;
   user-select: none;
 }
@@ -165,8 +226,9 @@ h1 {
   transform: translate(100px, -35px);
   color: white;
   font-size: 25px;
+  font-weight: 550;
   margin: 0;
-  text-shadow: black 3px 3px 3px;
+  text-shadow: rgb(0, 0, 0) 3px 3px 3px;
   width: 500px;
 }
 
@@ -175,25 +237,19 @@ h1 {
 }
 
 #carousel-container #carousel-1 {
-  background-image: url("/assets/photos/space-4678686_1920.jpg");
+  background-image: linear-gradient(to top, #0008, #0000), url("/assets/photos/code-1839406_1920.jpg");
   background-size: cover;
   background-position: center;
 }
 
 #carousel-container #carousel-2 {
-  background-image: url("/assets/photos/universe-1622107_1920.jpg");
+  background-image: linear-gradient(to top, #000a, #0000), url("/assets/photos/software-3682509_1920.jpg");
   background-size: cover;
   background-position: center;
 }
 
 #carousel-container #carousel-3 {
-  background-image: url("/assets/photos/science-fiction-2907434_1920.jpg");
+  background-image: linear-gradient(to top, #000a, #0000), url("/assets/photos/keyboard-5466431_1920.jpg");
-  background-size: cover;
-  background-position: center;
-}
-
-#carousel-container #carousel-4 {
-  background-image: url("/assets/photos/fantasy-2770468_1920.jpg");
   background-size: cover;
   background-position: center;
 }
@@ -227,7 +283,7 @@ h1 {
     height: 800px;
     width: 150px;
     min-width: 150px;
-    border-radius: 80px;
+    border-radius: 74px;
   }
 
   .carousel-item .carousel-id {
@@ -248,4 +304,44 @@ h1 {
     font-size: 50px;
   }
 
+  .content-column {
+    max-width: 1300px;
+    margin: auto;
+  }
+
+  /* BELOW LANDING STYLES */
+
+  .feature-showcase {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+  }
+  
+  .feature-showcase-item {
+    padding: 30px;
+  }
+  
+  #interactive-ui {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    border-right: 1px solid var(--bgColor);
+  }
+  
+  #responsive-design {
+    grid-column: 2 / 2;
+    grid-row: 2 / 3;
+  }
+  
+  #user-input {
+    grid-column: 1 / 2;
+    grid-row: 3 / 3;
+    border-right: 1px solid var(--bgColor);
+    border-bottom: none;
+  }
+  
+  #modern-css {
+    grid-column: 2 / 2;
+    grid-row: 3 / 3;
+  }
+
 }

index.html

@@ -17,26 +17,73 @@
           <input id="bgColour" type="color" value="#ffffff">
         </div>
       </div>
+
+      <div id="below-landing">
+        <section id="features-intro" class="content-column features">
+          <h2>Features</h2>
+          <p>
+            This webpage has been designed to display a variety of different web development skills and features.
+          </p>
+        </section>
+
         <div id="carousel">
           <div id="carousel-container">
             <div class="carousel-item" id="carousel-1">
-            <p class="carousel-id">1</p>
+              <svg class="carousel-id" viewBox="-100 -50 450 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M255.555 70.766l-23.241 260.36-104.47 28.962-104.182-28.922L.445 70.766h255.11z" fill="#E44D26"></path><path d="M128 337.95l84.417-23.403 19.86-222.49H128V337.95z" fill="#F16529"></path><path d="M82.82 155.932H128v-31.937H47.917l.764 8.568 7.85 88.01H128v-31.937H85.739l-2.919-32.704zM90.018 236.542h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58l-.14.037-35.568-9.604-2.274-25.471z" fill="#EBEBEB"></path><path d="M24.18 0h16.23v16.035h14.847V0h16.231v48.558h-16.23v-16.26H40.411v16.26h-16.23V0zM92.83 16.103H78.544V0h44.814v16.103h-14.295v32.455h-16.23V16.103h-.001zM130.47 0h16.923l10.41 17.062L168.203 0h16.93v48.558h-16.164V24.49l-11.166 17.265h-.28L146.35 24.49v24.068h-15.88V0zM193.21 0h16.235v32.508h22.824v16.05h-39.06V0z"></path><path d="M127.89 220.573h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576H127.89v31.937zM127.89 155.854v.078h77.143l.64-7.178 1.456-16.191.763-8.568H127.89v31.86z" fill="#FFF"></path></g></svg>
-            <p class="carousel-title">Night Trees</p>
+              <p class="carousel-title">HTML</p>
             </div>
             <div class="carousel-item" id="carousel-2">
-            <p class="carousel-id">2</p>
+              <svg class="carousel-id" viewBox="-100 -50 450 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M127.844 360.088L23.662 331.166.445 70.766h255.11l-23.241 260.36-104.47 28.962z" fill="#264DE4"></path><path d="M212.417 314.547l19.86-222.49H128V337.95l84.417-23.403z" fill="#2965F1"></path><path d="M53.669 188.636l2.862 31.937H128v-31.937H53.669zM47.917 123.995l2.903 31.937H128v-31.937H47.917zM128 271.58l-.14.037-35.568-9.604-2.274-25.471h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58z" fill="#EBEBEB"></path><path d="M60.484 0h38.68v16.176H76.66v16.176h22.506v16.175H60.484V0zM106.901 0h38.681v14.066h-22.505v2.813h22.505v32.352h-38.68V34.46h22.505v-2.813H106.9V0zM153.319 0H192v14.066h-22.505v2.813H192v32.352h-38.681V34.46h22.505v-2.813H153.32V0z"></path><path d="M202.127 188.636l5.765-64.641H127.89v31.937h45.002l-2.906 32.704H127.89v31.937h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576z" fill="#FFF"></path></g></svg>
-            <p class="carousel-title">Rocket Head</p>
+              <p class="carousel-title">CSS</p>
             </div>
             <div class="carousel-item" id="carousel-3">
-            <p class="carousel-id">3</p>
+              <svg class="carousel-id" viewBox="-0 -0 250 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M0 0h256v256H0V0z" fill="#F7DF1E"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996M152.381 211.354l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247L210.29 147.43c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574"></path></g></svg>
-            <p class="carousel-title">Spaceship</p>
+              <p class="carousel-title">Javascript</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>
+        
+        <section id="feature-showcase-1" class="content-column features">
+          <h2 id="table-heading" class="content-column">A Few Features</h2>
+          <div class="feature-showcase">
+            <div class="feature-showcase-item" id="interactive-ui">
+              <h3>Interactive UI</h3>
+              <p>
+                This website has been designed to provide satisfying user feedback. From using javscript to expand the carousel, to using css to change the shape of the title on the landing page; the website has been designed to provide an outstanding user experience.
+              </p>
+            </div>
+
+            <div class="feature-showcase-item" id="responsive-design">
+              <h3>Responsive Design</h3>
+              <p>
+                The website has been designed to support a variety of different devices and aspect ratios. The website will adapt to the size of the window and display the content in a way that is easy to read and navigate.
+              </p>
+            </div>
+
+            <div class="feature-showcase-item" id="user-input">
+              <h3>User Input</h3>
+              <p>
+                The website has been designed to allow the user to interact with the website. This includes the ability to change the background color of the website.
+              </p>
+            </div>
+
+            <div class="feature-showcase-item" id="modern-css">
+              <h3>Modern CSS</h3>
+              <p>
+                The website has been designed to use modern css features such as the flex layout and grids to provide a visually appealing layout.
+              </p>
+            </div>
+          </div>
+        </section>
+<!--
+        <section id="feature-showcase-2" class="content-column">
+          <div class="feature-showcase-item" id="animation"></div>
+          <div class="feature-showcase-item" id="api-useage"></div>
+          <div class="feature-showcase-item" id="browser-data"></div>
+          <div class="feature-showcase-item" id="great-website"></div>
+        </section>
+      </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);

readme.md

@@ -20,3 +20,5 @@ The `js/scripts.js` file contains a simple console.log statement to confirm that
 ## assets/photos
 
 All images inside `assets/photos` folder are from https://pixabay.com and used under the licence outlined here https://pixabay.com/service/terms/
+
+All SVG Vectors are from https://www.svgrepo.com