Put all images in folder

public/bdashboard.html

@@ -10,7 +10,7 @@
     <header>
       <div class="header-container">
         <div class="logo-container">
-          <img src="logo.png" alt="PageTurners Logo" class="logo" />
+          <img src="images/logo.png" alt="PageTurners Logo" class="logo" />
           <span class="site-title">PageTurners</span>
         </div>
         <nav class="nav-container">
@@ -56,7 +56,7 @@
     <!-- Edge-to-edge Image Carousel Section -->
     <section class="image-carousel">
       <div class="carousel">
-        <img id="carousel-image" src="first1.png" alt="First Picture" />
+        <img id="carousel-image" src="images/first1.png" alt="First Picture" />
       </div>
       <div class="carousel-controls">
         <span class="dot" onclick="changeImage(1)"></span>
@@ -81,39 +81,39 @@ <h3>Our Book Genres</h3>
 
         <div class="genres-grid">
           <div class="genre-card">
-            <img src="fiction.jpeg" alt="Fiction" />
+            <img src="images/fiction.jpeg" alt="Fiction" />
             <h4>Fiction</h4>
           </div>
           <div class="genre-card">
-            <img src="non-fiction.jpg" alt="Non-fiction" />
+            <img src="images/non-fiction.jpg" alt="Non-fiction" />
             <h4>Non-fiction</h4>
           </div>
           <div class="genre-card">
-            <img src="fantasy.jpg" alt="Fantasy" />
+            <img src="images/fantasy.jpg" alt="Fantasy" />
             <h4>Fantasy</h4>
           </div>
           <div class="genre-card">
-            <img src="action.jpeg" alt="Action" />
+            <img src="images/action.jpeg" alt="Action" />
             <h4>Action</h4>
           </div>
           <div class="genre-card">
-            <img src="adventure.jpeg" alt="Adventure" />
+            <img src="images/adventure.jpeg" alt="Adventure" />
             <h4>Adventure</h4>
           </div>
           <div class="genre-card">
-            <img src="drama.jpeg" alt="Drama" />
+            <img src="images/drama.jpeg" alt="Drama" />
             <h4>Drama</h4>
           </div>
           <div class="genre-card">
-            <img src="romance.jpeg" alt="Romance" />
+            <img src="images/romance.jpeg" alt="Romance" />
             <h4>Romance</h4>
           </div>
           <div class="genre-card">
-            <img src="historical.jpg" alt="Historical" />
+            <img src="images/historical.jpg" alt="Historical" />
             <h4>Historical</h4>
           </div>
           <div class="genre-card">
-            <img src="crime.jpeg" alt="Crime" />
+            <img src="images/crime.jpeg" alt="Crime" />
             <h4>Crime</h4>
           </div>
         </div>
@@ -126,36 +126,36 @@ <h3>Featured Books</h3>
         </div>
         <div class="books-grid">
           <div class="book-card">
-            <img src="featuredbook1.jpg" alt="Featured Book 1" />
+            <img src="images/featuredbook1.jpg" alt="Featured Book 1" />
           </div>
           <div class="book-card">
-            <img src="featuredbook2.jpg" alt="Featured Book 2" />
+            <img src="images/featuredbook2.jpg" alt="Featured Book 2" />
           </div>
           <div class="book-card">
-            <img src="featuredbook3.jpg" alt="Featured Book 3" />
+            <img src="images/featuredbook3.jpg" alt="Featured Book 3" />
           </div>
           <div class="book-card">
-            <img src="featuredbook4.jpg" alt="Featured Book 4" />
+            <img src="images/featuredbook4.jpg" alt="Featured Book 4" />
             <!--   <h4>Don't forget to write</h4> -->
             <!-- <p>Sara Goodman Confino</p> -->
           </div>
           <div class="book-card">
-            <img src="featuredbook5.jpg" alt="Featured Book 5" />
+            <img src="images/featuredbook5.jpg" alt="Featured Book 5" />
           </div>
           <div class="book-card">
-            <img src="featuredbook6.jpg" alt="Featured Book 6" />
+            <img src="images/featuredbook6.jpg" alt="Featured Book 6" />
           </div>
           <div class="book-card">
-            <img src="featuredbook7.jpg" alt="Featured Book 7" />
+            <img src="images/featuredbook7.jpg" alt="Featured Book 7" />
           </div>
           <div class="book-card">
-            <img src="featuredbook8.jpg" alt="Featured Book 8" />
+            <img src="images/featuredbook8.jpg" alt="Featured Book 8" />
           </div>
           <div class="book-card">
-            <img src="featuredbook9.jpg" alt="Featured Book 9" />
+            <img src="images/featuredbook9.jpg" alt="Featured Book 9" />
           </div>
           <div class="book-card">
-            <img src="featuredbook10.jpg" alt="Featured Book 10" />
+            <img src="images/featuredbook10.jpg" alt="Featured Book 10" />
           </div>
         </div>
       </section>
@@ -167,17 +167,17 @@ <h3>Trending Book Clubs</h3>
         </div>
         <div class="clubs-grid">
           <div class="club-card">
-            <img src="bookclub1.jpeg" alt="Book Club 1" />
+            <img src="images/bookclub1.jpeg" alt="Book Club 1" />
             <h4>Lily's Book Club</h4>
             <p>5 members</p>
           </div>
           <div class="club-card">
-            <img src="bookclub2.jpeg" alt="Book Club 2" />
+            <img src="images/bookclub2.jpeg" alt="Book Club 2" />
             <h4>The Authors Club</h4>
             <p>3 members</p>
           </div>
           <div class="club-card">
-            <img src="bookclub3.jpeg" alt="Book Club 3" />
+            <img src="images/bookclub3.jpeg" alt="Book Club 3" />
             <h4>We love books</h4>
             <p>10 members</p>
           </div>
@@ -193,7 +193,7 @@ <h3>Trending Group Discussions</h3>
         <div class="trending-scroll">
           <div class="trending-card">
             <img
-              src="trendinggroupdiscussion1.jpeg"
+              src="images/trendinggroupdiscussion1.jpeg"
               alt="Trending Group Discussion 1"
             />
             <div class="trending-content">
@@ -204,7 +204,7 @@ <h4>Why do we read books?</h4>
           </div>
           <div class="trending-card">
             <img
-              src="trendinggroupdiscussion2.jpeg"
+              src="images/trendinggroupdiscussion2.jpeg"
               alt="Trending Group Discussion 2"
             />
             <div class="trending-content">
@@ -215,7 +215,7 @@ <h4>We are all different</h4>
           </div>
           <div class="trending-card">
             <img
-              src="trendinggroupdiscussion3.webp"
+              src="images/trendinggroupdiscussion3.webp"
               alt="Trending Group Discussion 3"
             />
             <div class="trending-content">
@@ -226,7 +226,7 @@ <h4>What did you learn from this book?</h4>
           </div>
           <div class="trending-card">
             <img
-              src="trendinggroupdiscussion4.jpeg"
+              src="images/trendinggroupdiscussion4.jpeg"
               alt="Trending Group Discussion 4"
             />
             <div class="trending-content">
@@ -237,7 +237,7 @@ <h4>Was Frankenstein book satisfying to read?</h4>
           </div>
           <div class="trending-card">
             <img
-              src="trendinggroupdiscussion5.jpeg"
+              src="images/trendinggroupdiscussion5.jpeg"
               alt="Trending Group Discussion 5"
             />
             <div class="trending-content">
@@ -258,30 +258,30 @@ <h3>Top 3 Recommendations for You</h3>
       <div class="recommendations-grid">
         <div class="recommendation-item">
           <span class="number">1</span>
-          <img src="bookrecommendations1.jpg" alt="Book Recommendation 1" />
+          <img src="images/bookrecommendations1.jpg" alt="Book Recommendation 1" />
         </div>
         <div class="recommendation-item">
           <span class="number">2</span>
-          <img src="bookrecommendations2.jpg" alt="Book Recommendation 2" />
+          <img src="images/bookrecommendations2.jpg" alt="Book Recommendation 2" />
         </div>
         <div class="recommendation-item">
           <span class="number">3</span>
-          <img src="bookrecommendations3.jpg" alt="Book Recommendation 3" />
+          <img src="images/bookrecommendations3.jpg" alt="Book Recommendation 3" />
         </div>
       </div>
     </section>
     <script>
       const images = [
-        "first1.png",
-        "second2.jpg",
-        "third3.jpg",
-        "fourth4.webp",
-        "fifth5.jpg",
-        "sixth6.jpg",
-        "seventh7.jpeg",
-        "eigth8.jpg",
-        "ninth9.jpg",
-        "tenth10.jpg",
+        "images/first1.png",
+        "images/second2.jpg",
+        "images/third3.jpg",
+        "images/fourth4.webp",
+        "images/fifth5.jpg",
+        "images/sixth6.jpg",
+        "images/seventh7.jpeg",
+        "images/eigth8.jpg",
+        "images/ninth9.jpg",
+        "images/tenth10.jpg",
       ];
 
       function changeImage(index) {

club.html → public/club.html

@@ -11,7 +11,7 @@
     <header>
       <div class="header-container">
         <div class="logo-container">
-          <img src="logo1.png" alt="PageTurners Logo" class="logo" />
+          <img src="images/logo1.png" alt="PageTurners Logo" class="logo" />
           <span class="site-title"
             ><a href="dashboard.html">PageTurners</a></span
           >
@@ -122,7 +122,7 @@ <h1>Give Your Club a Name</h1>
         <section class="club-creation-container">
           <!-- Left side with form -->
           <div class="club-form-section">
-            <img src="club-icon.jpg" alt="Club Icon" class="club-icon" />
+            <img src="images/club-icon.jpg" alt="Club Icon" class="club-icon" />
             <form action="#" method="POST" class="club-creation-form">
               <label for="club-name" class="club-label">Club Name</label>
               <input
@@ -144,7 +144,7 @@ <h1>Give Your Club a Name</h1>
           <!-- Right side preview section -->
           <div class="preview-section">
             <img
-              src="choose2.jpg.avif"
+              src="images/choose2.jpg.avif"
               alt="Club Preview on Mobile"
               class="preview-img"
             />

invite.html → public/invite.html

@@ -11,7 +11,7 @@
     <header>
       <div class="header-container">
         <div class="logo-container">
-          <img src="logo1.png" alt="PageTurners Logo" class="logo" />
+          <img src="images/logo1.png" alt="PageTurners Logo" class="logo" />
           <span class="site-title"
             ><a href="dashboard.html">PageTurners</a></span
           >
@@ -121,7 +121,7 @@ <h1>Want to add members?</h1>
         <section class="club-creation-container">
           <!-- Left side with form -->
           <div class="club-form-section">
-            <img src="club-icon.jpg" alt="Club Icon" class="club-icon" />
+            <img src="images/club-icon.jpg" alt="Club Icon" class="club-icon" />
             <form action="#" method="POST" class="club-creation-form">
               <label for="club-name" class="club-label"
                 >INVITE PEOPLE TO YOUR CLUB</label
@@ -141,7 +141,7 @@ <h1>Want to add members?</h1>
           <!-- Right side preview section -->
           <div class="preview-section">
             <img
-              src="13.jpg"
+              src="images/13.jpg"
               alt="Club Preview on Mobile"
               class="preview-img"
             />

join.html → public/join.html

@@ -12,7 +12,7 @@
     <header>
         <div class="header-container">
             <div class="logo-container">
-                <img src="logo1.png" alt="PageTurners Logo" class="logo">
+                <img src="images/logo1.png" alt="PageTurners Logo" class="logo">
                 <span class="site-title"><a href="dashboard.html">PageTurners</a></span>
             </div>
             <nav class="nav-container">
@@ -71,7 +71,7 @@
                 const clubProfile = document.createElement("div");
                 clubProfile.classList.add("club-profile");
                 const profileImg = document.createElement("img");
-                profileImg.src = "club-profile.jpg";
+                profileImg.src = "images/club-profile.jpg";
                 profileImg.alt = "Profile Picture";
                 profileImg.classList.add("profile-picture");
                 clubProfile.appendChild(profileImg);

meetings.html → public/meetings.html

@@ -11,7 +11,7 @@
       <aside class="sidebar">
         <div class="profile-container">
           <img
-            src="default-club.jpg"
+            src="images/default-club.jpg"
             alt="Club Profile Picture"
             class="club-profile-pic"
           />
@@ -38,6 +38,6 @@ <h2>Club Meetings</h2>
         </p>
       </main>
     </div>
-    <script src="club.js"></script>
+    <script src="scripts/club.js"></script>
   </body>
 </html>

overview.html → public/overview.html

@@ -11,7 +11,7 @@
       <aside class="sidebar">
         <div class="profile-container">
           <img
-            src="default-club.jpg"
+            src="images/default-club.jpg"
             alt="Club Profile Picture"
             class="club-profile-pic"
             id="profile-pic"