Skip to content

Commit

Permalink
Enhanced Styling of Testimonials Section (#669)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pranjal6955
Pranjal6955 authored Feb 2, 2025
1 parent c22ada7 commit 015b253
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 79 deletions.
164 changes: 164 additions & 0 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,3 +558,167 @@ ul {
transform: translateY(1px); /* Makes the button appear pressed when clicked */
box-shadow: 0 2px 5px rgba(255, 204, 0, 0.4); /* Adds a subtle shadow effect when the button is active */
}

/* Testimonial Styling */

#testimonials {
background-color: #3b3b4f; /* Change the background color */
padding: 5rem 0;
}

.testimonials-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}

.testimonials-header {
text-align: center;
margin-bottom: 8px;
}

.testimonials-title {
font-size: 2.5rem;
color: white;
margin-bottom: 1rem;
font-weight: 700;
letter-spacing: -0.5px;
}

.testimonials-subtitle {
font-size: 1.1rem;
color: white;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

.testimonial-carousel-wrapper {
position: relative;
padding: 0 2rem;
}

.testimonial-card {
background: white;
border-radius: 1rem;
padding: 2.5rem;
margin: 1rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}

.testimonial-card:hover {
transform: translateY(-5px);
}

.testimonial-content {
position: relative;
}

.testimonial-text {
font-size: 1.1rem;
color: #4a5568;
line-height: 1.8;
margin-bottom: 1.5rem;
position: relative;
padding-left: 2rem;
}

.testimonial-text::before {
content: "“";
position: absolute;
left: -1rem;
top: -1rem;
font-size: 4rem;
color: #48bb78;
font-family: Georgia, serif;
opacity: 0.3;
}

.testimonial-author {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.author-name {
font-weight: 600;
color: #2c3e50;
font-size: 1rem;
}

.author-role {
color: #718096;
font-size: 0.9rem;
}

/* Owl Carousel Customization */
.owl-dots {
text-align: center;
margin-top: 2rem;
}

.owl-dot {
height: 12px;
width: 12px;
margin: 0 5px;
border-radius: 50%;
background: #cbd5e0 !important;
transition: all 0.3s ease;
}

.owl-dot.active {
background: #48bb78 !important;
transform: scale(1.2);
}

.owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
color: #48bb78 !important;
font-size: 1.5rem !important;
}

.owl-nav button:hover {
background: #48bb78 !important;
color: white !important;
}

.owl-prev {
left: -50px;
}

.owl-next {
right: -50px;
}

@media (max-width: 768px) {
.testimonials-title {
font-size: 2rem;
}

.testimonial-card {
padding: 1.5rem;
margin: 0.5rem;
}

.testimonial-text {
font-size: 1rem;
padding-left: 1.5rem;
}

.owl-nav button {
width: 35px;
height: 35px;
font-size: 1.2rem !important;
}
}
115 changes: 36 additions & 79 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,87 +194,44 @@ <h4 data-target="170" class="count">0</h4>
</div>
</section>

<!-- Testimonials -->
<section id="call-to-action">
<div class="container customMargin3">
<div class="row">
<div class="col-md-12" >
<div class="row justify-content-center">
<div class="col-md-8 col-md-push-2" >
<div class="section-title text-center">
<h2>What we hear</h2>
</div>
<div>
<p>This is what we've heard about Sugar Labs from students, teachers, parents, and growing developers.</p>
</div>
<!-- Testimonials Section -->
<section id="testimonials">
<div class="testimonials-container">
<div class="testimonials-header">
<h2 class="testimonials-title">What We Hear</h2>
<p class="testimonials-subtitle">Hear from students, teachers, parents, and developers about their Sugar Labs experiences.</p>
</div>
<div class="testimonials-carousel-wrapper">
<div class="testimonial-carousel owl-carousel">

<!-- Testimonial Item 1 -->
<div class="testimonial-card">
<div class="testimonial-content">
<p class="testimonial-text">"This summer was super fun and filled with learning! I enjoyed testing over 60+ activities with kids to get first-hand feedback which had a positive impact in the way they approach problems..."</p>
<div class="testimonial-author">
<span class="author-name">Sourabha G.</span>
<span class="author-role">GSoC 2021 Student</span>
</div>
</div>
</div>
<div class="row justify-content-around">
<div class="col-md-5 col-md-push-1 customPadding4" >
<div class="testimonial-carousel customPadding4 borderNone">
<div id="testimonial-slider2" class="owl-carousel customPadding4">
<div>
<p class="leftAlign">"This summer
was super fun and filled with
learning! I enjoyed testing over
60+ activities with kids to get
first-hand feedback which had a
positive impact in the way they
approach problems. The fact that
these activities are used by kids
as a tool of learning motivates me
to contribute more and more. I'm
going to continue to contribute
and be a part of Sugar
Labs."</p>
<div class="user">
<p><span>Sourabha G., </span>GSoC 2021 student</p>
</div>
</div>
<div>
<p class="leftAlign">"I would like
to thank my mentors Walter Bender
and Devin Ulibarri for their
constant guidance and
motivation. A big thanks to Sugar
Labs community and Google Summer
of Code (GSoC) for providing such
a wonderful opportunity for
learning and helping me to be an
active member of Open Source
Community."</p>
<div class="user">
<p><span>Riya Lohia, </span>GSoC 2018 student</p>
</div>
</div>
<div>
<p class="leftAlign">"I think
Music Blocks will inspire many
young folks to become programmers,
mathematicians, composers, and
music theorists. It will also
provide important experiences to
other young folk who pursue other
fields. You are to be
congratulated on your
efforts."</p> <!-- Move Hermann to MB and give Alan Kay's quote more context somewhere else.
<div class="user">
<p><span>Richard Hermann, PhD, </span>Prof. of Music Theory and Composition, University of New Mexico</p>
</div>
</div>
<div>
<p class="leftAlign">"A successful technology creates problems that only it can solve."</p>
<div class="user">
<p><span>Alan Kay</span></p>
</div>
</div>-->
<div>
<p class="leftAlign">"Fedora-Based Sugar on a Stick Is One Sweet Desktop."</p>
<div class="user">
<p><span>LinuxInsider</span></p>
</div>
</div>
</div>

<!-- Testimonial Item 2 -->
<div class="testimonial-card">
<div class="testimonial-content">
<p class="testimonial-text">"I would like to thank my mentors Walter Bender and Devin Ulibarri for their constant guidance and motivation..."</p>
<div class="testimonial-author">
<span class="author-name">Riya Lohia</span>
<span class="author-role">GSoC 2018 Student</span>
</div>
</div>
</div>

<!-- Testimonial Item 3 -->
<div class="testimonial-card">
<div class="testimonial-content">
<p class="testimonial-text">"Fedora-Based Sugar on a Stick Is One Sweet Desktop."</p>
<div class="testimonial-author">
<span class="author-name">LinuxInsider</span>
</div>
</div>
</div>
Expand Down

0 comments on commit 015b253

Please sign in to comment.