Merge pull request #164 from sowmya-1313/students_testimonials

Adding testimonials section

index.html

@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <style>
 
 
@@ -209,6 +210,47 @@
         <br>
     </div>
 
+    <!--students testimonials section-->
+    <div class="testimonial_wrapper">
+      <h1>Instights from studentify users</h1>
+      <h5>Experiences from Our Students ..</h5>
+      <!--cards-->
+      <div class="cards">
+        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+          <img src="./img/testimonial users/user (1).jpg" alt="user1">
+          <p class="para" style="color:#fff;">Student-ify transformed my learning experience, providing the perfect tools
+            for collaborative projects and making online study sessions more effective.</p>
+          <h4 class="h4">Priya</h4>
+          <h4 class="h4">CSE Major</h4>
+          <i class="fa-solid fa-quote-left"></i>
+        </div>
+        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+          <img src="./img/testimonial users/user(2).jpg" alt="user2">
+          <p class="para" style="color:#fff;">Thanks to Student-ify, I've been able to connect with peers and access
+            resources that have significantly boosted my academic performance.</p>
+          <h4 class="h4">Arjun</h4>
+          <h4 class="h4"> IT student</h4>
+          <i class="fa-solid fa-quote-left"></i>
+        </div>
+        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+          <img src="./img/testimonial users/user3.jpg" alt="user3">
+          <p class="para" style="color:#fff;">Student-ify has made remote learning so much easier, offering a seamless
+            platform for teamwork and accessing study materials.<br />.Absolutely, "Approved!" 🚀.</p>
+          <h4 class="h4">Pragna</h4>
+          <h4 class="h4">Developer</h4>
+          <i class="fa-solid fa-quote-left"></i>
+        </div>
+        <div class="card" style="background-color: rgba(159, 213, 234, 0.5);">
+          <img src="./img/testimonial users/user (4).jpg" alt="user4">
+          <p class="para" style="color:#fff;">Interactive study tools and peer support on Studentify have boosted my
+            academic performance. It's been essential for staying motivated and on track.</p>
+          <h4 class="h4">Roy</h4>
+          <h4 class="h4">Analyst</h4>
+          <i class="fa-solid fa-quote-left"></i>
+        </div>
+      </div>
+    </div>
+
 <footer>
 
   <div class="footer-content" style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 20px; background-color: white; color: black;">

style.css

@@ -749,6 +749,113 @@ li a,a:visited{
     background-color: #ff8533;
 }
 
+
+/* styling testimonial cards **/
+.testimonial_wrapper{
+  margin: 0 auto;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family:Verdana, Geneva, Tahoma, sans-serif;
+  background: url('./img/back.jpg') no-repeat center/cover;
+
+}
+.testimonial_wrapper h1{
+  font-size: 60px;
+  font-weight: 500;
+  margin: 30px;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #f5f8f8;
+}
+.testimonial_wrapper h5{
+  font-size: 20px;
+  text-align: center;
+  font-weight: 300;
+  margin-bottom: 50px;
+  color: #f5f8f8;
+
+}
+.cards{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width:100%;
+  margin: 25px 0;
+}
+.card{
+  width:380px;
+  height:250px;
+  border-radius: 15px;
+  margin: 7px;
+  padding: 20px 30px;
+  position: relative;
+
+  color: #f5f8f8;
+  box-shadow: 10px 20px 25px rgba(15, 15, 15, 0.2);
+  transition: 0.5s;
+
+}
+
+.card img{
+  height:90px;
+  width: 90px;
+  border:2px solid #f5f8f8;
+  border-radius: 100%;
+  margin-top:-58px;
+  left:20px;
+}
+.card p{
+  font-size: 13px;
+  margin-top: 20px;/**/
+  margin-bottom: 30px;
+
+}
+.card h2{
+  font-weight: 500;
+  margin-bottom: 4px;
+
+ }
+ .card .h4 , .fa-quote-left{
+   color:#fff;
+   font-weight: 400;
+   font-size: 16px;
+}
+.card i{
+  font-size:60px;
+  position:absolute;
+  bottom: 5px;
+  right:25px;
+/*  color:#b2bec3; */
+
+}
+.card:hover{
+  transform: scale(1.2);
+  color:#fff;
+  background-color: rgba(135, 206, 235, 0.5);
+  z-index: 1000;
+
+}
+.para:hover{
+  color:#fff;
+}
+
+/* responsive tetimonials */
+@media(max-width:768px){
+  .cards{
+      width:100%;
+      flex-direction: column;
+      flex-wrap: wrap;
+
+  }
+  .card{
+      margin: 20px 0;
+  }
+}
+
+
 /* Footer Styling */
 footer {
     background-color: black;