Final Commit
This commit is contained in:
@ -1,242 +1,165 @@
|
||||
<div id = "testimonials" class="section-full p-t120 p-b90 site-bg-white twm-testimonial-v-area">
|
||||
<style>
|
||||
<style>
|
||||
.testimonials-container {
|
||||
max-width: 900px;
|
||||
margin: 10px auto;
|
||||
line-height: 1.9;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonials-container section {
|
||||
padding: 20px 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.testimonials-container h2 {
|
||||
font-size: 40px;
|
||||
line-height: 1.2;
|
||||
font-family: "Poppins", sans-serif;
|
||||
position: relative;
|
||||
font-size: 40px;
|
||||
line-height: 1.2;
|
||||
font-family: "Poppins", sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.testimonials-container h2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: red;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: red;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
section.dark h2::before {
|
||||
height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.testimonials-container .logos-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
place-items: center;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.1);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
place-items: center;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.testimonials-container .logos-container img {
|
||||
height: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.testimonial video {
|
||||
height: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.testimonial .video {
|
||||
margin: -16px;
|
||||
margin-bottom: 0;
|
||||
margin: -16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.testimonial .bottom {
|
||||
margin-top: auto;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.testimonial .name {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
margin-top: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.testimonial .designation {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.testimonials-container button,
|
||||
.testimonials-container a.btn {
|
||||
padding: 8px 32px;
|
||||
border: none;
|
||||
margin: 24px 0;
|
||||
font-size: 16px;
|
||||
background: #003049;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 8px 32px;
|
||||
border: none;
|
||||
margin: 24px 0;
|
||||
font-size: 16px;
|
||||
background: #003049;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.testimonials-container a.btn {
|
||||
text-decoration: none;
|
||||
background: #e63946;
|
||||
font-size: 24px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 4px 32px;
|
||||
margin-top: 8px;
|
||||
text-decoration: none;
|
||||
background: #e63946;
|
||||
font-size: 24px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 4px 32px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
section.dark {
|
||||
background: #003049;
|
||||
color: #fff;
|
||||
padding: 24px 32px;
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
background: #003049;
|
||||
color: #fff;
|
||||
padding: 24px 32px;
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
section.dark p {
|
||||
margin-top: -16px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.testimonials-container h2 {
|
||||
font-size: 28px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.testimonial video {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.testimonials-container .logos-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="testimonials-container">
|
||||
|
||||
<section>
|
||||
<h2>Testimonials</h2><br><br>
|
||||
<div class="testimonials"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const data = [
|
||||
{
|
||||
videoUrl: "videos/testimonial1.mp4",
|
||||
review: "UK Visa success without IELTS/PTE in London with Raffles",
|
||||
name: "Shreya Bajrayi",
|
||||
designation: "UK Visa Success",
|
||||
},
|
||||
{
|
||||
videoUrl: "videos/testimonial2.mp4",
|
||||
review:
|
||||
"UK Visa success without IELTS/PTE in London with Raffles",
|
||||
name: "Sarita Tamang",
|
||||
designation: "UK Visa Success",
|
||||
},
|
||||
{
|
||||
videoUrl: "videos/testimonial3.mp4",
|
||||
review: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.",
|
||||
name: "Emily Johnson",
|
||||
designation: "Senior Accountant, QRS Solutions",
|
||||
},
|
||||
{
|
||||
videoUrl: "videos/testimonial4.mp4",
|
||||
review:
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, enim.",
|
||||
name: "Sarah Thompson",
|
||||
designation: "Graphic Designer, PQR Studios",
|
||||
},
|
||||
{
|
||||
videoUrl: "videos/testimonial5.mp4",
|
||||
review:
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, enim.",
|
||||
name: "Robert Wilson",
|
||||
designation: "Sales Executive, MNO Corporation",
|
||||
},
|
||||
];
|
||||
|
||||
const showMoreBtn = document.querySelector(
|
||||
".testimonials-container .show-more-btn"
|
||||
);
|
||||
const testimonials = document.querySelector(".testimonials");
|
||||
let latestTestimonialIndex = 0;
|
||||
|
||||
const generateTestimonial = (videoUrl, review, name, designation) => {
|
||||
const htmlCode = `<div class="testimonial">
|
||||
<div class="video">
|
||||
<video
|
||||
controls
|
||||
width="100%"
|
||||
src="{{asset('raffels/assets')}}/${videoUrl}"
|
||||
></video>
|
||||
</div>
|
||||
<div class="review">
|
||||
${review}
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="name">${name}</div>
|
||||
<div class="designation">${designation}</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
return htmlCode;
|
||||
};
|
||||
|
||||
const showTestimonial = () => {
|
||||
let index = latestTestimonialIndex;
|
||||
|
||||
for (let i = index; i < index + 2; i++) {
|
||||
if (!data[i]) {
|
||||
showMoreBtn.style.display = "none";
|
||||
return;
|
||||
.testimonials-container h2 {
|
||||
font-size: 28px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
testimonials.innerHTML += generateTestimonial(
|
||||
data[i].videoUrl,
|
||||
data[i].review,
|
||||
data[i].name,
|
||||
data[i].designation
|
||||
);
|
||||
.testimonials {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
latestTestimonialIndex++;
|
||||
.testimonial video {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.testimonials-container .logos-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 60px;
|
||||
}
|
||||
}
|
||||
};
|
||||
</style>
|
||||
<div class="testimonials-container">
|
||||
|
||||
showTestimonial();
|
||||
|
||||
showMoreBtn.addEventListener("click", showTestimonial);
|
||||
</script>
|
||||
<section>
|
||||
<h2>Testimonials</h2><br><br>
|
||||
<div class="testimonials">
|
||||
@foreach ($testimonials as $item)
|
||||
<div class="testimonial">
|
||||
<div class="video">
|
||||
<video controls width="100%" src="{{ asset('raffels/assets/videos') }}/{{$item->video_url}}"></video>
|
||||
</div>
|
||||
<div class="review">{{$item->review}}</div>
|
||||
<div class="bottom">
|
||||
<div class="name">{{$item->name}}</div>
|
||||
<div class="designation">{{$item->designation}}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user