Skip to content

Commit 33190d1

Browse files
CheeseLadCheeseLad
committed
what our members say section
1 parent 6751978 commit 33190d1

File tree

2 files changed

+120
-0
lines changed

2 files changed

+120
-0
lines changed

‎mps_site/templates/components/home/what_our_members_say.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Member Testimonials</title>
7+
<!-- Swiper.js CSS -->
8+
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
9+
<!-- Custom Styles -->
10+
<style>
11+
/* Swiper Container */
12+
.swiper-container {
13+
width: 90%;
14+
height: 100%;
15+
margin: 20px auto;
16+
position: relative;
17+
overflow: hidden; /* Ensure that the overflow is hidden */
18+
}
19+
20+
/* Testimonial Box */
21+
.testimonial-box {
22+
background-color: #202E4E;
23+
color: white;
24+
border-radius: 15px;
25+
padding: 20px;
26+
text-align: center;
27+
}
28+
29+
/* Swiper Navigation Arrows */
30+
.swiper-button-next, .swiper-button-prev {
31+
color: white;
32+
}
33+
34+
/* Swiper Pagination Dots */
35+
.swiper-pagination {
36+
position: relative;
37+
margin-top: -15px;
38+
left: 0;
39+
width: 100%;
40+
text-align: center;
41+
}
42+
43+
.swiper-pagination-bullet {
44+
background: rgba(255, 255, 255, 0.8); /* Lighter color for better contrast */
45+
width: 12px; /* Slightly larger dots */
46+
height: 12px; /* Slightly larger dots */
47+
border-radius: 50%;
48+
margin: 0 4px; /* Spacing between dots */
49+
opacity: 0.7; /* Slightly transparent */
50+
}
51+
52+
.swiper-pagination-bullet-active {
53+
background: white; /* White color for active dot */
54+
opacity: 1; /* Fully opaque */
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<div class="container">
60+
<h1>What Our Members Say</h1>
61+
<h5><i>Read why they love MPS so much!</i></h5>
62+
<div class="col-md-12 custom-box shadow-lg bg-body">
63+
<div class="swiper-container">
64+
<div class="swiper-wrapper">
65+
<!-- Slide 1 -->
66+
<div class="swiper-slide">
67+
<div class="testimonial-box">
68+
<p>"MPS is love, MPS is life"</p>
69+
<h5>- Jake Farrell</h5>
70+
<small>2nd Year Computer Science</small>
71+
</div>
72+
</div>
73+
<div class="swiper-slide">
74+
<div class="testimonial-box">
75+
<p>"MPS is love, MPS is life"</p>
76+
<h5>- Jake Farrell</h5>
77+
<small>2nd Year Computer Science</small>
78+
</div>
79+
</div>
80+
<div class="swiper-slide">
81+
<div class="testimonial-box">
82+
<p>"MPS is love, MPS is life"</p>
83+
<h5>- Jake Farrell</h5>
84+
<small>2nd Year Computer Science</small>
85+
</div>
86+
</div>
87+
</div>
88+
<!-- Add Pagination -->
89+
<div class="swiper-pagination"></div>
90+
<!-- Add Navigation -->
91+
<div class="swiper-button-next"></div>
92+
<div class="swiper-button-prev"></div>
93+
</div>
94+
</div>
95+
</div>
96+
97+
<!-- Swiper.js JS -->
98+
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
99+
<script>
100+
var swiper = new Swiper('.swiper-container', {
101+
slidesPerView: 1,
102+
spaceBetween: 10,
103+
loop: true,
104+
autoplay: {
105+
delay: 3000,
106+
disableOnInteraction: false,
107+
},
108+
pagination: {
109+
el: '.swiper-pagination',
110+
clickable: true,
111+
},
112+
navigation: {
113+
nextEl: '.swiper-button-next',
114+
prevEl: '.swiper-button-prev',
115+
},
116+
});
117+
</script>
118+
</body>
119+
</html>

‎mps_site/templates/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ <h5><i>We know you'll love it!</h5></i>
1818
{% include "components/subgroup.html" with subgroups_data=subgroups_data %}
1919
{% include 'components/stats.html' with title="Media Production Society In Numbers" subtitle="See how we've grown!" animate_seconds=5 stats=stats_data %}
2020
{% include "components/home/why_join.html" %}
21+
{% include "components/home/what_our_members_say.html" %}
2122
{% include 'components/home/awards_history.html' with homepage_awards=homepage_awards %}
2223
{% include "components/home/sponsors.html" %}
2324
{% include 'components/testimonials.html' %}

0 commit comments

Comments
 (0)