Skip to content

Commit

Permalink
Add testimonials section
Browse files Browse the repository at this point in the history
  • Loading branch information
@coxde
coxde committed Nov 14, 2023
1 parent 5992dc1 commit 932ac88
Show file tree
Hide file tree
Showing 7 changed files with 264 additions and 1 deletion.
83 changes: 83 additions & 0 deletions digitalcraft/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,3 +189,86 @@
font-size: 1.8rem;
line-height: 1.8;
}

/************************/
/* TESTIMONIALS SECTION */
/************************/

.section-testimonials {
padding: 9.6rem 0;
background-color: #e7f5ff;
overflow: hidden;
}

.testimonial__grid {
gap: 4.8rem;
}

.testimonial__box {
display: flex;
flex-direction: column;
gap: 2.4rem;
padding: 4.8rem;
background-color: #fff;
border: 1px solid rgba(231, 245, 255, 0.5);
border-radius: 25px;
box-shadow: 0 0.8rem 1.6rem rgba(2, 10, 17, 0.08);
transition: all 0.5s;
}

.testimonial__box:hover {
transform: scale(1.05);
box-shadow: 0 3.2em 6.4rem rgba(2, 10, 17, 0.04);
}

.testimonial__avatar-box {
display: grid;
grid-template-columns: 1fr 3fr;
column-gap: 2.4rem;
row-gap: 0.4rem;
align-items: center;
justify-items: start;
}

.testimonial__text-box {
position: relative;
}

.testimonial__quote-img {
position: absolute;
width: 3.6rem;
height: 3.6rem;
top: -1.8rem;
left: -0.8rem;
}

.testimonial__text {
font-size: 1.6rem;
line-height: 1.6;
letter-spacing: 0.75px;
/* Only effective when setting any position other than static */
position: relative;
z-index: 1;
}

.testimonial__name {
align-self: end;
font-size: 1.6rem;
font-weight: 500;
}

.testimonial__name-description {
grid-column: 2 / 3;
align-self: start;
font-size: 1.2rem;
color: #6f6f6f;
}

.testimonial__img {
grid-row: 1 / 3;
justify-self: end;
width: 6.4rem;
height: 6.4rem;
border-radius: 50%;
border: 4px solid #a3c1dd;
}
Binary file added digitalcraft/img/people/alex.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added digitalcraft/img/people/david.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added digitalcraft/img/people/emily.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added digitalcraft/img/people/sarah.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions digitalcraft/img/quote.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
137 changes: 136 additions & 1 deletion digitalcraft/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,142 @@ <h2 class="heading--secondary feature__heading">
</div>
</section>

<section class="section-testimonials"></section>
<section class="section-testimonials">
<div class="container">
<span class="subheading">Testimonials</span>
<h2 class="heading--secondary text--blue-darker">
Don't just take our words
</h2>
</div>

<div
class="container grid testimonial__grid grid--2-cols grid--center-v"
>
<div class="testimonial__box">
<div class="testimonial__text-box">
<object
class="testimonial__quote-img"
data="img/quote.svg"
type="image/svg+xml"
aria-label="A quote mark image"
></object>
<blockquote class="testimonial__text">
DigitalCraft Studio understood my vision and
brought it to life. The team's creativity and
technical proficiency were evident throughout
the project. I highly recommend them for anyone
seeking an
<span class="text--highlight">affordable</span>
and top-notch web solution.
</blockquote>
</div>
<div class="testimonial__avatar-box">
<img
class="testimonial__img"
src="img/people/david.jpg"
alt="Photo of customer David Kim"
/>
<p class="testimonial__name">David Kim</p>
<p class="testimonial__name-description">
Small Business Owner
</p>
</div>
</div>

<div class="testimonial__box">
<div class="testimonial__text-box">
<object
class="testimonial__quote-img"
data="img/quote.svg"
type="image/svg+xml"
aria-label="A quote mark image"
></object>
<blockquote class="testimonial__text">
The collaboration with DigitalCraft Studio was
exceptional. Their attention to detail and
commitment to
<span class="text--highlight">quality</span>
resulted in a website that exceeded our
expectations. A reliable partner for any digital
venture.
</blockquote>
</div>
<div class="testimonial__avatar-box">
<img
class="testimonial__img"
src="img/people/alex.jpg"
alt="Photo of customer Alex Rodriguez"
/>
<p class="testimonial__name">Alex Rodriguez</p>
<p class="testimonial__name-description">
Founder, CodeWave Innovations
</p>
</div>
</div>

<div class="testimonial__box">
<div class="testimonial__text-box">
<object
class="testimonial__quote-img"
data="img/quote.svg"
type="image/svg+xml"
aria-label="A quote mark image"
></object>
<blockquote class="testimonial__text">
DigitalCraft Studio transformed our online
presence. Their innovative designs and
<span class="text--highlight"
>user-centric</span
>
approach have significantly enhanced our brand
image. Truly a team of digital artisans!
</blockquote>
</div>
<div class="testimonial__avatar-box">
<img
class="testimonial__img"
src="img/people/sarah.jpg"
alt="Photo of customer Sarah Thompson"
/>
<p class="testimonial__name">Sarah Thompson</p>
<p class="testimonial__name-description">
CEO, InnovateTech Solutions
</p>
</div>
</div>

<div class="testimonial__box">
<div class="testimonial__text-box">
<object
class="testimonial__quote-img"
data="img/quote.svg"
type="image/svg+xml"
aria-label="A quote mark image"
></object>
<blockquote class="testimonial__text">
Working with DigitalCraft Studio was a breeze.
Their expertise in both design and development
ensured a seamless process from concept to
launch. The website not only looks fantastic but
also
<span class="text--highlight">performs</span>
very well.
</blockquote>
</div>
<div class="testimonial__avatar-box">
<img
class="testimonial__img"
src="img/people/emily.jpg"
alt="Photo of customer Emily Carter"
/>
<p class="testimonial__name">Emily Carter</p>
<p class="testimonial__name-description">
Marketing Director, NexGen Enterprises
</p>
</div>
</div>
</div>
</section>
<section class="section-blogs"></section>
<section class="section-cta" id="cta"></section>
</main>
Expand Down

0 comments on commit 932ac88

Please sign in to comment.