Creating a Testimonial.

docker-compose.yml

@@ -1,37 +1,37 @@
-services:
-  mongodb:
-    image: mongo:latest
-    container_name: mongo
-    ports:
-      - "27017:27017"
-    volumes:
-      - mongodb_data:/data/db
-    restart: always
-
-  backend:
-    build:
-      context: ./backend
-    container_name: backend
-    env_file:
-      - ./backend/.env
-    ports:
-      - "3000:3000"
-    depends_on:
-      - mongodb
-    restart: always
-    volumes:
-      - ./backend:/usr/src/app
-      - /usr/src/app/node_modules
-
-  frontend:
-    image: nginx:latest
-    container_name: frontend
-    ports:
-      - "8080:80"
-    volumes:
-      - ./frontend:/usr/share/nginx/html:ro
-    restart: always
-
-volumes:
-  mongodb_data:
-    external: false
+services:
+  mongodb:
+    image: mongo:latest
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongodb_data:/data/db
+    restart: always
+
+  backend:
+    build:
+      context: ./backend
+    container_name: backend
+    env_file:
+      - ./backend/.env
+    ports:
+      - "3000:3000"
+    depends_on:
+      - mongodb
+    restart: always
+    volumes:
+      - ./backend:/usr/src/app
+      - /usr/src/app/node_modules
+
+  frontend:
+    image: nginx:latest
+    container_name: frontend
+    ports:
+      - "8080:80"
+    volumes:
+      - ./frontend:/usr/share/nginx/html:ro
+    restart: always
+
+volumes:
+  mongodb_data:
+    external: false

dockerfile

@@ -0,0 +1,8 @@
+# Use an official nginx image
+FROM nginx:alpine
+
+# Copy HTML files to the nginx directory
+COPY . /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80

frontend/index.html

@@ -86,6 +86,16 @@ <h4>Data Structures in Java</h4>
             <button class="btn-secondary">View Course</button>
           </div>
         </div>
+        <div class="testimonial-section">
+          <div class="testimonial">
+              <p>"This platform has greatly improved my skills!"</p>
+              <h4>- John Doe</h4>
+          </div>
+          <div class="testimonial">
+              <p>"A rewarding and fun way to learn."</p>
+              <h4>- Jane Smith</h4>
+          </div>
+      </div>      
       </div>
     </section>
     <footer class="site-footer">

frontend/styles.css

@@ -237,6 +237,34 @@ body {
   color: #555;
   flex-grow: 1;
 }
+.testimonial-section {
+  display: flex;
+  justify-content: space-around;
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.testimonial {
+  width: 30%;
+  padding: 10px;
+  text-align: center;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+.testimonial p {
+  font-size: 18px;
+  font-style: italic;
+  color: #333;
+}
+
+.testimonial h4 {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #666;
+}
+
 
 /* Button styling */
 .btn-secondary {
@@ -502,4 +530,4 @@ body {
         width: 100%;
       }
     }
-  }
+  }