Style changes, fading effect added

index.html

@@ -7,19 +7,19 @@
   <link
     href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
     rel="stylesheet">
-    <link rel="stylesheet" href="./src/style.css">
+  <link rel="stylesheet" href="./src/style.css">
 
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Coding Club</title>
 
-   
+
 
 
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  
-<script type="module" src="/coding_club/src/bouncing_ball.js"></script>
+
+  <script type="module" src="/coding_club/src/bouncing_ball.js"></script>
 
 </head>
 
@@ -35,12 +35,24 @@
 
 
   <h1>Welcome</h1>
-  <p class="smallheading">Hello everyone this is the newly created Website for the Coding Club, enjoy.
-  </p>
-  <p>The blue bouncing ball that you can see, is for your enjoyment.  It has been scripted with Javascript, with help from <a href="https://observablehq.com/@jarrettmeyer/bouncing-ball">Observable.</a> Please use with care.</p>
-
+  <div class="fading">
+    <p class="smallheading">Hello everyone this is the newly created Website for the Coding Club, enjoy.
+    </p>
+    <p>The blue bouncing ball that you can see, is for your enjoyment. It has been scripted with Javascript, with help
+      from <a href="https://observablehq.com/@jarrettmeyer/bouncing-ball">Observable.</a> Please use with care.</p>
+  </div>
   <div id="Ball"></div>
 </body>
 
+<script>
+  document.querySelectorAll("p").forEach(paragraph => {
+
+    const letters = paragraph.textContent.split("");
+
+    paragraph.innerHTML = letters.map(letter => {return letter === " " ? " " : `<span>${letter}</span>`;}).join("");
+
+  });
+
+</script>
 
 </html>

src/style.css

@@ -1,29 +1,32 @@
 html {
-    background-color: #cbeef9;
+    background-color: #ffffff;
     font-family: "Raleway";
 }
 
 p {
-    font-size: 20px;
+    font-size: 30px;
     margin-left: 7%;
     margin-right: 22%;
     line-height: 30px;
     margin-block: 10px;
-    font-weight: 300;
+    font-weight: 400;
 }
+
 .smallheading {
-    font-weight:600;
+    font-weight: 600;
 }
+
 /* Menu bar styles */
 .menu-bar {
     display: flex;
-    background-color: #333;
+    background-color: #ffffff;
     justify-content: flex-start;
     position: fixed;
     top: 0;
     width: 100%;
     left: 0;
     z-index: 1000;
+
 }
 
 body {
@@ -33,12 +36,14 @@ body {
 
 .menu-item {
     padding: 8px 20px;
+
 }
 
 .menu-item a {
-    color: white;
+    color:midnightblue;
     text-decoration: none;
     text-align: center;
+    font-weight: 600;
 }
 
 .menu-item a:hover {
@@ -86,8 +91,26 @@ li {
 
 h1 {
     text-align: center;
-    color:midnightblue;
+    color: midnightblue;
     font-size: 45px;
     margin-bottom: 7%;
     margin-top: 8%;
+}
+
+.fading {
+    display: inline-block;
+}
+
+.fading span {
+    display: inline-block;
+    opacity: 1;
+    /* Start with faded letters */
+    transition: opacity 1.5s ease;
+    /* Smooth transition */
+}
+
+.fading span:hover {
+    opacity: 0;
+    transition: opacity 0.1s ease;
+    /* Full opacity on hover */
 }