Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Testimonial Cards improved #2847

Merged
merged 1 commit into from
Aug 10, 2024
Merged

Testimonial Cards improved #2847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion assets/css/test-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,34 +48,85 @@
width: 330px;
background-color: var(--seashell);
height: 350px;

}

.item-testimonial{
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.image-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;


}
.bio{
font-size: 12px;
margin: 15px 25px;
font-style: italic;
color:rgb(77, 33, 33);
}

body.dark-mode .bio{
color:aliceblue;
}

.image-content {
padding: 25px 0;
}
.rows-icons{
display: flex;
flex-direction: row;
justify-content: space-between;
gap:15px !important;
width: 50%;
}

.fa-linkedin-in{
color:dodgerblue;
}
.fa-github-alt{
color:rgb(42, 0, 80);
}

.fa-instagram{
color:crimson;
}

body.dark-mode .fa-linkedin-in{
color:rgb(170, 218, 255);
}

body.dark-mode .fa-github-alt{
color:rgb(209, 184, 255);
}
body.dark-mode .fa-instagram{
color:rgb(253, 190, 217);
}
.card-image {
height: 150px;
width: 150px;
border-radius: 50%;
background: #ffffff;
}


.card-image .card-img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 4px solid hsl(357, 37%, 62%);
}

.flip-card-front{
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
body.dark-mode .flip-card-front{
background: linear-gradient(black, #4f1919);
}
.flip-card-back {
background-color: transparent !important;
color: var(--old-rose) !important;
Expand Down
64 changes: 52 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3139,6 +3139,12 @@ <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
<img src="./assets/images/testimonials-4.jpg" alt="" class="card-img">
</div>
<h2 style="font-size: 20px;">Sonal K</h2>
<div class="bio">"I'm an avid reader who loves getting lost in the pages of a good book, always seeking new stories and perspectives."</div>
<div class="rows-icons">
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-github-alt"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>

<div class="rating">
Expand Down Expand Up @@ -3171,6 +3177,12 @@ <h2 style="font-size: 20px;">Sonal K</h2>
<img src="./assets/images/testimonials-2.jpg" alt="" class="card-img">
</div>
<h2 style="font-size: 20px;">Prem Sampath</h2>
<div class="bio">"I'm passionate about reading, exploring new worlds & ideas through books, whether it's fiction or non-fiction."</div>
<div class="rows-icons">
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-github-alt"></i>
<i class="fa-brands fa-instagram"></i>
</div>
</div>

<div class="rating">
Expand Down Expand Up @@ -3202,15 +3214,22 @@ <h2 style="font-size: 20px;">Prem Sampath</h2>
<img src="./assets/images/testimonials-3.jpg" alt="" class="card-img">
</div>
<h2 style="font-size: 20px;">Aron Loes</h2>
</div>

<div class="rating">
<div class="bio">"Books are my escape; I relish the adventure of exploring new worlds and perspectives with every page I turn."</div>
<div class="rows-icons">
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-github-alt"></i>
<i class="fa-brands fa-instagram"></i>
</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>


</div>
</div>
<div class="flip-card-back backs">
Expand All @@ -3234,15 +3253,22 @@ <h2 style="font-size: 20px;">Aron Loes</h2>
<img src="./assets/images/testimonials-1.jpg" alt="" class="card-img">
</div>
<h2 style="font-size: 20px;">B.Sharmila</h2>
</div>

<div class="rating">
<div class="bio">"I’m a book lover who enjoys immersing myself in different genres, always on the lookout for the next great story or thought-provoking read."</div>
<div class="rows-icons">
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-github-alt"></i>
<i class="fa-brands fa-instagram"></i>
</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>


</div>
</div>
<div class="flip-card-back backs">
Expand All @@ -3265,15 +3291,22 @@ <h2 style="font-size: 20px;">B.Sharmila</h2>
<img src="./assets/images/testimonials-5.jpg" alt="" class="card-img">
</div>
<h2 style="font-size: 20px;">Jane Doe</h2>
</div>

<div class="rating">
<div class="bio">"Reading is my passion—I’m always seeking out the next compelling book to fuel my love for storytelling and knowledge."</div>
<div class="rows-icons">
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-github-alt"></i>
<i class="fa-brands fa-instagram"></i>
</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>


</div>
</div>
<div class="flip-card-back backs">
Expand All @@ -3297,15 +3330,22 @@ <h2 style="font-size: 20px;">Jane Doe</h2>
<img src="./assets/images/testimonials-6.jpg" alt="" class="card-img">
</div>
<h2 style="font-size: 20px;">Maya Verma</h2>
</div>

<div class="rating">
<div class="bio">"I thrive on the thrill of reading, embracing every opportunity to delve into captivating narratives and diverse viewpoints."</div>
<div class="rows-icons">
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-github-alt"></i>
<i class="fa-brands fa-instagram"></i>
</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>


</div>
</div>
<div class="flip-card-back backs">
Expand Down
Loading