Merge pull request #25 from n-aggarwal/issue-13

Mockups (issue #10)
n-aggarwal · Oct 4, 2023 · 83d09c9 · 83d09c9
2 parents c549889 + 2340fc6
commit 83d09c9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/pages/testimonials.html b/pages/testimonials.html
@@ -38,6 +38,24 @@
                 </li>
             </ul>            
         </div>
+        <div id = testimonial-heading>
+            Testimonials
+            </div>
+            <div class="container">
+            <img src="../public/music-5833695_1920.jpg" alt="Avatar" style="width:90px">
+            <p><span>Chris Fox.</span> CEO at Mighty Schools. &bigstar; &bigstar; &bigstar; &bigstar; &bigstar;</p>
+            <p>One of the best music rating apps</p>
+            </div>
+            <div class="container">
+            <img src="../public/music-7009823_1920.png" alt="Avatar" style="width:90px">
+            <p><span>Rebecca Flex.</span> CEO at YouTube. &bigstar; &bigstar; &bigstar; &bigstar; &bigstar;</p>
+            <p>Amazing discussion community of music lovers</p>
+            </div>
+            <div class="container">
+            <img src="../public/android-1635207_1280.png" alt="Avatar" style="width:90px">
+            <p><span>Anan Afrida.</span> CEO at Google Music. &bigstar; &bigstar; &bigstar; &bigstar; &bigstar;</p>
+            <p>Taylor Swift still reigns and it is authenticated through this app</p>
+            </div>
         <script src="" async defer></script>
     </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -305,4 +305,46 @@ font-size: 56px;
     font-size: x-large;
     font-weight: bold;
 
-}
+}
+
+/*
+* Styling the Testimonial section
+*/
+#testimonial-heading {
+    color: white;
+    text-align: center;
+    padding-top: 20px;
+    font-size: 56px;
+    }
+    .container {
+    border: 2px rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 5px;
+    padding: 16px;
+    margin: 16px 0
+    }
+    .container::after {
+    content: "";
+    clear: both;
+    display: table;
+    }
+    .container img {
+    float: left;
+    margin-right: 20px;
+    border-radius: 50%;
+    }
+    .container span {
+    font-size: 20px;
+    margin-right: 15px;
+    }
+    @media (max-width: 500px) {
+    .container {
+    text-align: center;
+    }
+    .container img {
+    margin: auto;
+    float: none;
+    display: block;
+    }
+}
+