Skip to content

Commit 95b3c8d

Browse files
MainaGeorgeMainaGeorge
committed
added testimonials
1 parent 79432f1 commit 95b3c8d

File tree

2 files changed

+134
-2
lines changed

2 files changed

+134
-2
lines changed

‎index.html

+50-1
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,56 @@ <h2 class="features-text__content--title">Features</h2>
320320
</section>
321321

322322
<!--******* Testimonials ******* -->
323-
<section id="testimonials">Testimonials</section>
323+
<section id="testimonials">
324+
<div class="testimonials__card">
325+
<div class="testimonials__card--front">
326+
<h2>Clark</h2>
327+
</div>
328+
<div class="testimonials__card--back">
329+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corrupti.</p>
330+
</div>
331+
</div>
332+
<div class="testimonials__card">
333+
<div class="testimonials__card--front">
334+
<h2>Tony</h2>
335+
</div>
336+
<div class="testimonials__card--back">
337+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corrupti.</p>
338+
</div>
339+
</div>
340+
<div class="testimonials__card">
341+
<div class="testimonials__card--front">
342+
<h2>Black Widow</h2>
343+
</div>
344+
<div class="testimonials__card--back">
345+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corrupti.</p>
346+
</div>
347+
</div>
348+
<div class="testimonials__card">
349+
<div class="testimonials__card--front">
350+
<h2>Electra</h2>
351+
</div>
352+
<div class="testimonials__card--back">
353+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corrupti.</p>
354+
</div>
355+
</div>
356+
<div class="testimonials__card">
357+
<div class="testimonials__card--front">
358+
<h2>Wasp</h2>
359+
</div>
360+
<div class="testimonials__card--back">
361+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corrupti.</p>
362+
</div>
363+
</div>
364+
<div class="testimonials__card">
365+
<div class="testimonials__card--front">
366+
<h2>Wonder Woman</h2>
367+
</div>
368+
<div class="testimonials__card--back">
369+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corrupti.</p>
370+
</div>
371+
</div>
372+
</section>
324373

325374
<!--******* Footer ******* -->
326375
<footer id="footer">Footer</footer>

‎style.css

+84-1
Original file line numberDiff line numberDiff line change
@@ -783,13 +783,96 @@ section#features-content > div:last-child{
783783

784784
section#features-text {
785785
background-color: var(--color-secondary);
786+
786787
}
787788

788789
section#testimonials {
789-
background-color: var(--color-secondary);
790+
/* background-color: var(--color-primary); */
790791
grid-column: center-start / center-end;
792+
padding: var(--padding-section);
793+
794+
display: grid;
795+
grid-template-columns: repeat(auto-fit, 28rem);
796+
gap: 5rem;
797+
place-content: center;
798+
}
799+
800+
.testimonials__card {
801+
width: 28rem;
802+
height: 50rem;
803+
position: relative;
804+
}
805+
806+
.testimonials__card--front,
807+
.testimonials__card--back {
808+
background-repeat: no-repeat;
809+
background-size: cover;
810+
background-position: center;
811+
812+
position: absolute;
813+
top: 0;
814+
left: 0;
815+
width: 100%;
816+
height: 100%;
817+
transition: all var(--transition-duration) ease-in-out;
818+
backface-visibility: hidden;
819+
transform: perspective(100rem);
820+
821+
display: grid;
822+
justify-items: center;
823+
align-items: start;
824+
padding: 3rem;
825+
}
826+
827+
.testimonials__card--front h2 {
828+
background-color: var(--color-secondary-m-light);
829+
padding: 1rem;
830+
border-bottom-left-radius: 50%;
831+
border-bottom-right-radius: 50%;
832+
}
833+
834+
.testimonials__card--back p {
835+
align-self: center;
836+
font-size: 2rem;
837+
font-weight: 400;
838+
}
839+
840+
.testimonials__card:first-child .testimonials__card--front {
841+
background-image: url(img/Testimonials/testimonials-1.jpg);
842+
}
843+
844+
.testimonials__card:nth-child(2) .testimonials__card--front {
845+
background-image: url(img/Testimonials/testimonials-2.jpg);
846+
}
847+
848+
.testimonials__card:nth-child(3) .testimonials__card--front {
849+
background-image: url(img/Testimonials/testimonials-3.jpg);
791850
}
792851

852+
.testimonials__card:nth-child(4) .testimonials__card--front {
853+
background-image: url(img/Testimonials/testimonials-4.jpg);
854+
}
855+
856+
.testimonials__card:nth-child(5) .testimonials__card--front {
857+
background-image: url(img/Testimonials/testimonials-5.jpg);
858+
}
859+
860+
.testimonials__card:nth-child(6) .testimonials__card--front {
861+
background-image: url(img/Testimonials/testimonials-6.jpg);
862+
}
863+
864+
.testimonials__card--back {
865+
transform: perspective(100rem) rotateY(0.5turn);
866+
background-color: var(--color-secondary);
867+
}
868+
869+
.testimonials__card:hover .testimonials__card--front {
870+
transform: perspective(100rem) rotateY(0.5turn);
871+
}
872+
873+
.testimonials__card:hover .testimonials__card--back {
874+
transform: perspective(100rem) rotateY(1turn);
875+
}
793876
footer#footer {
794877
background-color: var(--color-primary);
795878
grid-column: container-start / container-end;

0 commit comments

Comments
 (0)