Merge pull request #4 from FAC29A/Paing-team-about-testimonial

added bg video to team, add sound to teaser video, and introduce testimonial

index.html

@@ -18,10 +18,10 @@
                     <img src="media/ecoecho.png" alt="Ecoecho Logo">
                 </div>
                 <ul class="menuBar">
-                    <li><a href="#">Home</a></li>
-                    <li><a href="#">About</a></li>
-                    <li><a href="#">The Team</a></li>
-                    <li><a href="#">Contact</a></li>
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#team">The Team</a></li>
+                    <li><a href="#contact">Contact</a></li>
                 </ul>
             </nav>
         </header>
@@ -32,29 +32,52 @@ <h1>Bringing a forest into a VR world</h1>
 
     <main>
         <section id="about">
-            <h2>See Our Products & Service</h2>
-            <p>A brief or detailed description about product, its features, benefits, and what makes it stand out in the market. Accompanying images can help in visual representation.</p>
+            <h2>About Our Agency</h2>
+            <p>A brief or detailed description about product, its features, benefits, and what makes it stand out in the
+                market. Accompanying images can help in visual representation.</p>
             <div class="about-content">
-                <img src="media/eco5.jpg" alt="Product Image">
-                <img src="media/eco3.jpg" alt="Product Image">
-                <img src="media/eco4.jpg" alt="Product Image">
+                <div class="text-wrapper">
+                    <div class="text">
+                        <h3>Who We Are?</h3>
+                        <p>At EcoEcho ....</p>
+                    </div>
+                    <div class="text">
+                        <h3>Services We Provide:</h3>
+                        <p>
+                            Bringing you to the forest...
+                        </p>
+                    </div>
+                </div>
+
+                <div class="about-img-wrapper">
+                    <img class="about-img" src="media/eco4.jpg" alt="Man using VR headset in the living room, standing in front of a TV.">
+                    <img class="about-img" src="media/eco5.jpg" alt="Woman from the waist up wearing a VR headset with nature images projected onto her chest and arms.">
+                    <img class="about-img" src="media/eco3.jpg" alt="Man using a VR headset while walking on a treadmill">
+                </div>
+
                 <button id="teaserButton">Watch teaser to feel the experience</button>
             </div>
             <div id="videoModal" class="modal">
                 <div class="modal-content">
                     <span class="close">&times;</span>
-                    <video controls>
-                        <source src="media/forest(360p).mp4" type="video/mp4">
+                    <video controls preload="metadata" id="forest-videor">
+                        <source src="media/forest.mp4" type="video/mp4">
                         Your browser does not support the video tag.
                     </video>
                 </div>
             </div>
+
         </section>
 
 
         <section id="team">
-            <h2>Meet The Team</h2>
 
+
+            <video id="background-video" autoplay muted loop>
+                <source src="media/bird.mp4">
+            </video>
+
+            <h2>Meet The Team</h2>
             <div class="team-section">
                 <div class="team-member">
                     <img src="media/marikaAI.jpg" alt="Marika's portrait">
@@ -65,7 +88,7 @@ <h2>Meet The Team</h2>
                 </div>
 
                 <div class="team-member">
-                    <img src="media/mark.jpg" alt="Makr's porttait">
+                    <img src="media/mark.jpg" alt="Makr's portrait">
                     <p><strong>Mark</strong></p>
                     <p>Position/Role</p>
                     <p>Description or any other details about Mark.</p>
@@ -97,6 +120,41 @@ <h2>Meet The Team</h2>
             </div>
         </section>
 
+        <section id="testimonials">
+            <h2>Testimonials</h2>
+            <div class="testimonial-wrapper">
+                <div class="reviews">
+
+                    <blockquote>
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        <cite>by John Smith, 2017</cite>
+                    </blockquote>
+                </div>
+                <div class="reviews">
+                    <blockquote>
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        <cite>by John Smith, 2017</cite>
+                    </blockquote>
+                </div>
+                <div class="reviews">
+
+                    <blockquote>
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        <cite>by John Smith, 2017</cite>
+                    </blockquote>
+                </div>
+                <div class="reviews">
+
+                    <blockquote>
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        <cite>by John Smith, 2017</cite>
+                    </blockquote>
+                </div>
+
+            </div>
+
+        </section>
+
         <section id="contact">
             <h2>Contact Us</h2>
             <form action="submit_form.php" method="post">
@@ -121,7 +179,7 @@ <h2>Contact Us</h2>
 
     </main>
 
-    <footer role="contentinfo">
+    <footer>
         <small>&copy; ecoecho2023_PM</small>
         <small>made by Paing & Marika</small>
     </footer>

style.css

@@ -18,7 +18,8 @@ a {
 }
 
 
-a:focus, a:hover {
+a:focus,
+a:hover {
     text-decoration: underline;
     outline: 2px solid #ffffff;
 }
@@ -82,7 +83,7 @@ img {
     transition: background-color 0.3s ease;
 }
 
-.menuBar li a:hover, 
+.menuBar li a:hover,
 .menuBar li a:focus {
     background-color: rgba(200, 218, 209, 0.287);
     outline: none;
@@ -111,15 +112,55 @@ img {
 }
 
 
-#about, #team {
+#about,
+#team,
+#testimonials {
     padding: 2rem;
     text-align: center;
     background-color: #f9f9f9;
 }
 
-.about-content img {
-    max-width: 100%;
-    margin-bottom: 1rem;
+h2 {
+    font-size: 1.75rem;
+    margin-top: 0.5em;
+    margin-bottom: 2rem;
+    color: black;
+    text-decoration: underline;
+}
+
+
+.text-wrapper {
+    display: block;
+    margin-bottom: 20px;
+}
+
+.text {
+    flex: 1;
+    padding: 5px;
+    box-sizing: border-box;
+    background-color: skyblue;
+    position: relative;
+    border: 2px solid #000;
+    border-radius: 15px;
+    box-shadow: 5px 5px #888888;
+    margin: 10px 0 20px 0px;
+}
+
+.text h3,
+p {
+    text-align: start;
+}
+
+.about-img-wrapper {
+    display: flex;
+    justify-content: space-around;
+    gap: 1rem;
+}
+
+.about-img {
+    width: 30%;
+    margin: 0 auto;
+    display: block;
 }
 
 
@@ -143,18 +184,32 @@ img {
     padding: 2rem;
     background-color: #fff;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    max-width: 80vw;
+    max-height: 80vh;
+    overflow: auto;
 }
 
 .close {
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+    padding: 5px 8px;
+}
+
+video {
+    width: 100%;
+    max-height: 70vh;
 }
 
+
+
 button {
+    font-size: 1rem;
     margin-top: 1rem;
-    padding: 0.5rem 1rem;
+    padding: 0.75rem 1rem;
     background-color: #333;
     color: #fff;
     border: none;
@@ -167,8 +222,26 @@ button:hover {
     background-color: #555;
 }
 
+#team {
+    position: relative;
+    overflow: hidden;
+}
+
+#background-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-height: 250vh;
+    object-fit: cover;
+    z-index: 1;
+}
+
 .team-section {
-    background-color: #f4f4f4;
+    position: relative;
+    z-index: 3;
+    color: black;
     padding: 2rem 0;
     display: flex;
     flex-wrap: wrap;
@@ -188,12 +261,69 @@ button:hover {
     text-align: center;
 }
 
+#team>h2 {
+    position: relative;
+    z-index: 5;
+    color: black;
+    text-align: center;
+}
+
 .team-member img {
     width: 150px;
     border-radius: 50%;
     margin-bottom: 10px;
+    border: 3px solid white;
+}
+
+
+/* Testimonials Section */
+#testimonials {
+    padding: 2rem;
+    background-color: #f9f9f9;
+    text-align: center;
+}
+
+
+.testimonial-wrapper {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.reviews {
+    width: 23%;
+    padding: 1rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 15%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    text-align: left;
+}
+
+blockquote {
+    font-size: 1em;
+    font-style: italic;
+    line-height: 1.5;
+    margin-bottom: 0.5rem;
 }
 
+cite {
+    font-size: 0.875em;
+    display: block;
+    margin-top: 0.5rem;
+    font-style: normal;
+    font-weight: bold;
+}
+
+
+@media (max-width: 768px) {
+    .reviews {
+        width: 100%;
+    }
+}
+
+
 #contact {
     padding: 2rem;
     background-color: #f5f5f5;
@@ -206,10 +336,6 @@ button:hover {
     opacity: 95%;
 }
 
-#contact h2 {
-    margin-top: 0;
-    color: #333;
-}
 
 .input-group {
     margin: 1rem 0;
@@ -221,7 +347,9 @@ button:hover {
 .input-group label {
     margin-bottom: 0.5rem;
     font-weight: bold;
-    color: #666;
+    color: black;
+    background-color: rgba(243, 248, 247, 0.287);
+
 }
 
 .input-group input,