From 93cb219966d369776cbd01ede029428400ac2827 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 8 Aug 2024 00:12:40 +0530 Subject: [PATCH] Card after faqs improved --- css/style.css | 12 ++++--- index.html | 5 +++ main.css | 90 +++++++++++++++++++++++++++------------------------ 3 files changed, 61 insertions(+), 46 deletions(-) diff --git a/css/style.css b/css/style.css index 0f8cf4e2..936252d0 100644 --- 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 index a105cb3d..214fba39 100644 --- a/index.html +++ b/index.html @@ -1157,11 +1157,14 @@
David L.
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" /> +

"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."

+ +
@@ -1201,6 +1204,7 @@
Sarah J.
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" />
+

"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."

@@ -1246,6 +1250,7 @@
Emily R.
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" /> +

"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."

diff --git a/main.css b/main.css index caa78a1d..df97b46c 100644 --- a/main.css +++ b/main.css @@ -306,6 +306,7 @@ ul li { + /* Testimonial Section */ .testimonial-section { background: transparent; @@ -313,26 +314,18 @@ ul li { 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;