-
Notifications
You must be signed in to change notification settings - Fork 262
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1105 from ayush-848/main
Enhanced the testimonials
- Loading branch information
Showing
3 changed files
with
172 additions
and
240 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,252 +1,177 @@ | ||
| .testimonals { | ||
| position: relative; | ||
| left: 30%; | ||
| width: 40%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .testimonals-item { | ||
| background-color: #ede6e6; | ||
| padding: 30px; | ||
| border-radius: 30px; | ||
| } | ||
|
|
||
| .rating { | ||
| width: 180px; | ||
| } | ||
| .testimonals-content { | ||
| position: relative; | ||
| width: 50%; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .section-title { | ||
| color: white !important; | ||
| font-size: 48px; | ||
| margin-bottom: 2rem; | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .rating__star { | ||
| font-size: 20px; | ||
| cursor: pointer; | ||
| color: #dabd18b2; | ||
| } | ||
|
|
||
| .testimonals-item img { | ||
| max-width: 70px; | ||
| border-radius: 50%; | ||
| margin-right: 20px; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| /* Testimonals Section */ | ||
|
|
||
| .testimonals-item { | ||
| background-color: #1c413b; | ||
| padding: 30px; | ||
| border-radius: 30px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .testimonals-item img { | ||
| max-width: 80px; | ||
| border-radius: 50%; | ||
| margin-right: 20px; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .testimonals-item .info { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .testimonals-item .name { | ||
| font-size: 24px; | ||
| text-transform: capitalize; | ||
| font-weight: 800; | ||
| color: white; | ||
| line-height: 1.2; | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .testimonals-item p { | ||
| margin-top: 20px; | ||
| color: white; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .testimonals-item .rating { | ||
| margin-top: 15px; | ||
| font-size: 14px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .testimonals .swiper-pagination { | ||
| position: relative; | ||
| margin-top: 40px; | ||
| bottom: auto; | ||
| } | ||
|
|
||
| .testimonals .swiper-pagination-bullet { | ||
| height: 12px; | ||
| width: 12px; | ||
| background-color: white !important; | ||
| } | ||
|
|
||
| .testimonals-item .job { | ||
| text-transform: capitalize; | ||
| color: white; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .testimonals-item p { | ||
| margin-top: 20px; | ||
| color: white; | ||
| } | ||
|
|
||
| .testimonals-item .rating { | ||
| margin-top: 15px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .testimonals .swiper-pagination { | ||
| position: relative; | ||
| margin-top: 40px; | ||
| bottom: auto; | ||
| } | ||
| .testimonals-item { | ||
| background: linear-gradient(145deg, #223b26, #1c413b); | ||
| padding: 30px; | ||
| border-radius: 20px; | ||
| text-align: center; | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; | ||
| height: 350px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| #test { | ||
| .testimonals-item:hover { | ||
| transform: translateZ(10px); | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); | ||
| background: linear-gradient(145deg, #2a5a3f, #1e6b4b); | ||
| } | ||
|
|
||
| margin-left: 2rem; | ||
| margin-right: 2rem; | ||
|
|
||
| .testimonals { | ||
| min-height: 100vh; | ||
| max-width: 80% !important; | ||
| .rating { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| background-color: #198754; | ||
| margin-top: auto; | ||
| } | ||
|
|
||
| .slide-content { | ||
| margin: 0 40px; | ||
| overflow: hidden; | ||
| border-radius: 25px; | ||
| .rating i { | ||
| color: #ffcc00; | ||
| font-size: 20px; | ||
| } | ||
| .card { | ||
| position: relative; | ||
| border-radius: 25px; | ||
| background-color: #1c413b; | ||
| height: 300px; | ||
| transition: transform 0.5s ease; | ||
|
|
||
| .section-title { | ||
| color: #e0f7fa; | ||
| font-size: 48px; | ||
| margin-bottom: 2rem; | ||
| margin-top: 40px; | ||
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .image-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 25px 0; | ||
| .rating__star { | ||
| font-size: 20px; | ||
| cursor: pointer; | ||
| color: #ffcc00; | ||
| } | ||
|
|
||
| .card-image { | ||
| height: 150px; | ||
| width: 150px; | ||
| .testimonals-item img { | ||
| max-width: 80px; | ||
| border-radius: 50%; | ||
| background: #1c413b; | ||
| margin-right: 20px; | ||
| vertical-align: middle; | ||
| border: 3px solid #198754; | ||
| } | ||
|
|
||
| .card-image .card-img { | ||
| height: 100%; | ||
| width: 100%; | ||
| object-fit: cover; | ||
| border-radius: 50%; | ||
| border: 4px solid #1c413b; | ||
| .testimonals-item .info { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .swiper-navBtn { | ||
| color: white !important; | ||
| transition: color 0.3s ease; | ||
| .testimonals-item .name { | ||
| font-size: 24px; | ||
| text-transform: capitalize; | ||
| font-weight: 800; | ||
| color: #e0f7fa; | ||
| line-height: 1.2; | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .swiper-navBtn:hover { | ||
| color: #198754; | ||
| .testimonals-item p { | ||
| margin-top: 20px; | ||
| color: #f1f8e9; | ||
| text-align: left; | ||
| flex: 1; | ||
| } | ||
|
|
||
| .swiper-navBtn::before, | ||
| .swiper-navBtn::after { | ||
| font-size: 35px; | ||
| .testimonals .swiper-pagination { | ||
| position: relative; | ||
| margin-top: 40px; | ||
| bottom: auto; | ||
| } | ||
|
|
||
| .swiper-button-next { | ||
| right: 0; | ||
| .testimonals .swiper-pagination-bullet { | ||
| height: 12px; | ||
| width: 12px; | ||
| background-color: #e0f7fa !important; | ||
| } | ||
|
|
||
| .testimonals-item .job { | ||
| text-transform: capitalize; | ||
| color: #e0f7fa; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .swiper-button-next, | ||
| .swiper-button-prev { | ||
| left: 0; | ||
| color: #e0f7fa !important; | ||
| transition: color 0.3s ease; | ||
| position: absolute; | ||
| top: 40%; | ||
| width: auto; | ||
| margin-top: -22px; | ||
| padding: 16px; | ||
| cursor: pointer; | ||
| z-index: 10; | ||
| } | ||
|
|
||
| .swiper-pagination-bullet { | ||
| background-color: white !important; | ||
| opacity: 1; | ||
| .swiper-button-next { | ||
| right: -60px; | ||
| } | ||
|
|
||
| .swiper-pagination-bullet-active { | ||
| background-color: grey !important; | ||
| .swiper-button-prev { | ||
| left: -60px; | ||
| } | ||
|
|
||
| @media screen and (max-width: 768px) { | ||
| .slide-content { | ||
| margin: 0 10px; | ||
| .swiper-button-next:hover, | ||
| .swiper-button-prev:hover { | ||
| color: #198754 !important; | ||
| } | ||
|
|
||
| @keyframes fadeInUp { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| .swiper-navBtn { | ||
| display: none; | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| .card:hover .fronts { | ||
| opacity: 0; | ||
| transform: translateY(-100%); | ||
| .testimonals-item { | ||
| animation: fadeInUp 0.5s ease-out; | ||
| } | ||
|
|
||
| .card .fronts { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| backface-visibility: hidden; | ||
| } | ||
| @media screen and (max-width: 768px) { | ||
| .testimonals { | ||
| width: 90%; | ||
| } | ||
|
|
||
| .backs { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| backface-visibility: hidden; | ||
| opacity: 0; | ||
| border: 2px solid #198754; | ||
| background-color: #1c413b; | ||
| border-radius: 50px; | ||
| font-size: 1em; | ||
| padding: 10px 40px; | ||
| transition: opacity 0.5s ease; | ||
| } | ||
| .testimonals-content { | ||
| width: 100%; | ||
| font-size: 10px; | ||
| } | ||
|
|
||
| .card:hover .backs { | ||
| opacity: 1; | ||
| } | ||
| .testimonals-item { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .rating i { | ||
| color: #ffc107; | ||
| } | ||
| .section-title { | ||
| font-size: 36px; | ||
| } | ||
|
|
||
| @media screen and (max-width: 700px) { | ||
| .backs { | ||
| font-size: 15px; | ||
| .swiper-button-next, | ||
| .swiper-button-prev { | ||
| width: 30px; | ||
| padding: 8px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 520px) and (max-width: 550px) { | ||
| .backs { | ||
| font-size: 13px; | ||
| .swiper-button-next { | ||
| right: -20px; | ||
| } | ||
|
|
||
| .swiper-button-prev { | ||
| left: -20px; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.