Skip to content

Commit

Permalink
Merge pull request #2847 from sau-mili/patch-2
Browse files Browse the repository at this point in the history 
Testimonial Cards improved
  • Loading branch information
@RishabhDhawad
RishabhDhawad authored Aug 10, 2024
2 parents a9cf80c + ce55e37 commit e4641ab
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 13 deletions.
53 changes: 52 additions & 1 deletion assets/css/test-style.css
View file
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
Original file line number Diff line number Diff line change
Expand Up @@ -3149,6 +3149,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 @@ -3181,6 +3187,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 @@ -3212,15 +3224,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 @@ -3244,15 +3263,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 @@ -3275,15 +3301,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 @@ -3307,15 +3340,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

0 comments on commit e4641ab

Please sign in to comment.