Merge pull request Its-Aman-Yadav#1359 from sau-mili/webdev2

Card after faqs improved
sau-mili · Aug 8, 2024 · aee1d1a · aee1d1a
2 parents 04eee86 + 93cb219
commit aee1d1a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 46 deletions.
diff --git a/css/style.css b/css/style.css
@@ -683,7 +683,7 @@ body.dark-mode .accordion-content {
   background: linear-gradient(to right, #e5e5be, #003973);
 }
 body.dark-mode .card1 {
-  background: linear-gradient(to right, #535353, #396a92);
+  background: linear-gradient(to bottom, #101010, #160633);
 }
 body.dark-mode .navbar nav.sticky {
   background: linear-gradient(rgb(6, 2, 36), rgba(3, 4, 70, 0.7));
@@ -694,7 +694,7 @@ body.dark-mode .navbar nav.sticky {
   backdrop-filter: blur(6px);
 }
 body.dark-mode .card1 .card-text {
-  color: #fff;
+  color: #dbdbdb;
 }
 
 body.dark-mode #contact .form .contact-info {
@@ -2613,7 +2613,7 @@ h3 {
   height: 100%;
 
   border-width: 5px;
-  border-color: #000;
+  border-color:  rgb(255, 204, 1);
 }
 
 .col-md-4 {
@@ -2629,7 +2629,11 @@ h3 {
 
 .img-fluid {
   border-radius: 50%;
-  border: 5px solid rgb(23, 23, 23);
+  border: 5px solid rgb(255, 166, 1);
+}
+
+body.dark-mode .img-fluid{
+  border:  5px solid #0082e6;
 }
 
 .card1:hover {

diff --git a/index.html b/index.html
@@ -1282,11 +1282,14 @@ <h5 class="card-title " style="font-size: 28px;font-weight: bold;">David L.</h5>
                       d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z" />
                   </svg>
                 </div>
+                <div class="lnkd"><i class="fa-brands fa-linkedin"></i></div>
               </div>
               <p class="card-text">"Joining this community has been one of the best decisions I've ever made. I've had
                 the opportunity to contribute to meaningful projects that have an impact on society."</p>
             </div>
+
           </div>
+
         </div>
       </div>
       <div class="card1 mb-3" >
@@ -1326,6 +1329,7 @@ <h5 class="card-title" style="font-size: 28px;font-weight: bold;">Sarah J.</h5>
                       d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                   </svg>
                 </div>
+                <div class="lnkd"><i class="fa-brands fa-linkedin"></i></div>
               </div>
               <p class="card-text">"Being a part of this community has been an incredible journey. I've found
                 like-minded individuals who share my deep passion for making a difference in the society."</p>
@@ -1371,6 +1375,7 @@ <h5 class="card-title" style="font-size: 28px;font-weight: bold;">Emily R.</h5>
                       d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                   </svg>
                 </div>
+                <div class="lnkd"><i class="fa-brands fa-linkedin"></i></div>
               </div>
               <p class="card-text">"As someone who values inclusivity, finding a space where everyone's voice is heard
                 and respected has been incredibly refreshing. It's empowering to collaborate here."</p>

diff --git a/main.css b/main.css
@@ -306,33 +306,26 @@ ul li {
 
 
 
+
 /* Testimonial Section */
 .testimonial-section {
   background: transparent;
   padding: 40px 0;
   overflow: scroll; 
   scroll-behavior: smooth;
 }
-body.dark-mode .testimonial-section{
-
-  background: linear-gradient(rgb(0, 0, 0), rgba(32, 32, 32, 0.847), #181818e4);
-}
 
 .testimonial-container {
   max-width: 1200px;
   margin: 0 auto;
 }
-
-.testimonial-container h2 {
-  font-size: 30px;
+.testimonial-container h2{
+    font-size: 30px;
   font-weight: 200;
   background: linear-gradient(135deg, #2937b3, #2afb7a 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
 }
-body.dark-mode .testimonial-section h2{
-  color: #acaaaa;
-}
 .testimonial-title {
   text-align: center;
   font-size: 2em;
@@ -364,15 +357,11 @@ body.dark-mode .testimonial-section h2{
   background: transparent;
   text-align: center;
   position: relative;
-  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-}
-body.dark-mode .testimonial-card{
-  background: #141414;
+  transition: transform 0.3s ease-in-out;
 }
 
 .testimonial-card:hover {
   transform: scale(1.05);
-  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .testimonial-img {
@@ -408,39 +397,19 @@ body.dark-mode .testimonial-card{
   align-items: center;
   flex-direction: column;
   text-align: center;
-  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
   pointer-events: none;
-  transform: translateY(100%);
 }
 
 .testimonial-card:hover .testimonial-text {
   opacity: 1;
   pointer-events: auto;
-  transform: translateY(0);
 }
 
 .testimonial-card:hover .testimonial-img img {
   transform: scale(1.2);
 }
 
-/* Adding animation for smooth transition */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.testimonial-text {
-  animation: fadeInUp 0.5s ease-in-out;
-}
-
-
-
 /* services section */
 .service-title{
   font-size: 20px;
@@ -503,13 +472,37 @@ body.dark-mode .testimonial-card{
 .card1 {
   backdrop-filter: blur(2px);
   max-width: 340px;
-  height: 400px;
-  border: 1px solid #ddd;
+  height: auto;
+  border: 4px solid  rgb(255, 166, 1);
   border-radius: 8px;
-  overflow: hidden;
+  /* overflow: hidden; */
   background-color: transparent; /* Dark background for the card */
 }
 
+body.dark-mode .card1{
+  border: 4px solid #0082e6;
+}
+.lnkd{
+  padding: 0px;
+  margin: 0px;
+}
+.lnkd i{
+  color: #0082e6;
+}
+.card1 img{
+  margin-left: auto;
+  margin-right: auto;
+  top:-30px;
+}
+
+.pic-col{
+  margin-left:auto;
+  margin-right: auto;
+  float: none;
+}
+.col-md-8{
+  float: none;
+}
 /* Card body styles */
 .card-body {
   color: gray; /* White text color */
@@ -527,14 +520,27 @@ body.dark-mode .testimonial-card{
 }
 
 /* Image styles */
+.pic-col{
+  z-index: 1;
+  height: auto;
+}
+.col-md-8{
+  z-index: 1;
+}
 .pic-col img {
   width: 100px;
-  margin: 10px;
+  /* margin: 10px; */
   /* margin-top: 100px; */
-  /* position: relative; */
+  transform: translateY(-50%);
+  position: relative;
   /* top: -55px; */
-}
+  z-index: 100;
+  margin-bottom: -80px;
 
+}
+.g-0{
+  overflow: visible;
+}
 .slider {
   width: 50px;
   height: 20px;