feat(ui): redesign testimonials with avatars, stars, and improved typography
This commit is contained in:
58
index.html
58
index.html
@@ -458,12 +458,64 @@
|
|||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
|
|
||||||
<div class="card testimonial-card h-100">
|
<div class="card testimonial-card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body d-flex flex-column h-100">
|
||||||
|
<div class="testimonial-quote-icon">“</div>
|
||||||
|
|
||||||
|
<div class="testimonial-header">
|
||||||
|
<div class="testimonial-avatar">MP</div>
|
||||||
|
<div class="testimonial-meta">
|
||||||
|
<h5>Margaret Pemu</h5>
|
||||||
|
<small>Pemu Counseling and Wellness</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="testimonial-rating" aria-label="5 out of 5 stars">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="testimonial-content mb-4 flex-grow-1">
|
||||||
<p class="card-text testimonial-excerpt">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."</p>
|
<p class="card-text testimonial-excerpt">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision..."</p>
|
||||||
<p class="card-text testimonial-full">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"</p>
|
<p class="card-text testimonial-full">"It was a pleasure working with Dustin on my counseling practice website. Throughout the process, he was thoughtful, responsive, and truly understood my vision. In addition to bringing my ideas to life with a clean, professional design, he made the entire process enjoyable and easy. His attention to detail, creativity, and technical skills are excellent. As a result of Dustin's work, I now have a website that truly represents my practice. There is no better person to recommend than him!"</p>
|
||||||
<p class="card-text testimonial-author">- Margaret Pemu, Pemu Counseling and Wellness</p>
|
|
||||||
<button class="testimonial-toggle" aria-label="Read full testimonial">Read More</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button class="testimonial-toggle align-self-start" aria-label="Read full testimonial">Read More</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card testimonial-card h-100">
|
||||||
|
<div class="card-body d-flex flex-column h-100">
|
||||||
|
<div class="testimonial-quote-icon">“</div>
|
||||||
|
|
||||||
|
<div class="testimonial-header">
|
||||||
|
<div class="testimonial-avatar">L</div>
|
||||||
|
<div class="testimonial-meta">
|
||||||
|
<h5>Laura</h5>
|
||||||
|
<small>Woman-Owned Small Business</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="testimonial-rating" aria-label="5 out of 5 stars">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="testimonial-content mb-4 flex-grow-1">
|
||||||
|
<p class="card-text testimonial-excerpt">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill..."</p>
|
||||||
|
<p class="card-text testimonial-full">"Working with Dustin at d@n tech was an absolute pleasure from start to finish. He is funny, engaging, and listens well. He offered grace for my lack of technical skill and worked from simple examples provided, which translated into a functional and funky-professional website that represents my brand.
|
||||||
|
His patience and technical skills are truly impressive. Furthermore, he was responsive throughout the entire process, always open to feedback, and quick to implement changes. What I appreciated most was how he spent time working toward what I wanted and was supportive in my goals."</p>
|
||||||
|
</div>
|
||||||
|
<button class="testimonial-toggle align-self-start" aria-label="Read full testimonial">Read More</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
|
|||||||
119
styles.css
119
styles.css
@@ -588,17 +588,97 @@ footer {
|
|||||||
/* ===== INTERACTIVE TESTIMONIALS ===== */
|
/* ===== INTERACTIVE TESTIMONIALS ===== */
|
||||||
.testimonial-card {
|
.testimonial-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: visible;
|
overflow: hidden;
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-alt .testimonial-card {
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-soft);
|
||||||
|
border-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-avatar {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(135deg, var(--color-coffee-medium), var(--color-coffee-dark));
|
||||||
|
color: var(--color-cream);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 2px solid var(--border-subtle);
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-meta h5 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-meta small {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
color: var(--color-coffee-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-rating {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--color-gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-quote-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 8rem;
|
||||||
|
line-height: 1;
|
||||||
|
font-family: serif;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
opacity: 0.1;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-full, .testimonial-excerpt {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: var(--text-body);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.testimonial-full {
|
.testimonial-full {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.testimonial-excerpt {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-card.expanded .testimonial-excerpt {
|
.testimonial-card.expanded .testimonial-excerpt {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -607,19 +687,10 @@ footer {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.testimonial-author {
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: italic;
|
|
||||||
color: var(--color-coffee-medium);
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-toggle {
|
.testimonial-toggle {
|
||||||
margin-top: 1rem;
|
background: transparent;
|
||||||
background: var(--color-secondary);
|
color: var(--color-primary);
|
||||||
color: var(--color-coffee-dark);
|
border: 2px solid var(--color-primary);
|
||||||
border: none;
|
|
||||||
padding: 0.5rem 1.5rem;
|
padding: 0.5rem 1.5rem;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -627,19 +698,31 @@ footer {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
transition: transform 0.2s, background-color 0.2s;
|
transition: all 0.2s;
|
||||||
|
margin-top: auto;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.testimonial-toggle:hover {
|
.testimonial-toggle:hover {
|
||||||
background: var(--color-primary);
|
background: var(--color-primary);
|
||||||
color: white;
|
color: white;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 10px rgba(29, 120, 116, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.testimonial-toggle:active {
|
.testimonial-toggle:active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.testimonial-meta h5 {
|
||||||
|
color: var(--color-cream);
|
||||||
|
}
|
||||||
|
.testimonial-meta small {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Custom Coffee Outline Button */
|
/* Custom Coffee Outline Button */
|
||||||
.btn-outline-coffee {
|
.btn-outline-coffee {
|
||||||
color: var(--color-coffee-dark);
|
color: var(--color-coffee-dark);
|
||||||
|
|||||||
Reference in New Issue
Block a user