Skip to content

Commit fc72bf7

Browse files
jephlandichojephlandicho
committed
fix testimonials
1 parent 513bc0e commit fc72bf7

File tree

3 files changed

+78
-53
lines changed

3 files changed

+78
-53
lines changed

‎projects/testimonial-slider/index.html

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
76
<title>Testimonial Slider</title>
8-
<link rel="stylesheet" href="style.css" />
9-
</head>
10-
<body>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
1110
<div class="testimonial-container">
12-
<button class="arrow prev" onclick="prevTestimonial()">&#10094;</button>
13-
<img
14-
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80"
15-
alt="user-image"
16-
/>
17-
<p class="text">
18-
This is simply unbelievable! I would be lost without Apple. The very
19-
best. Not able to tell you how happy I am with Apple.
20-
</p>
21-
<h4 class="username">Cherise G</h4>
22-
<button class="arrow next" onclick="nextTestimonial()">&#10095;</button>
11+
<img />
12+
<p class="text"></p>
13+
<h4 class="username"></h4>
14+
15+
<button class="arrow prev" onclick="prevTestimonial()"> &#10094; </button>
16+
<div class="rating"></div>
17+
<button class="arrow next" onclick="nextTestimonial()"> &#10095; </button>
2318
</div>
2419
<script src="index.js"></script>
25-
</body>
20+
</body>
2621
</html>

‎projects/testimonial-slider/index.js

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
const testimonials = [
22
{
3-
name: "Cherise G",
3+
name: "Marcus Lee",
44
photoUrl:
5-
"https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
6-
text: "This is simply unbelievable! I would be lost without Apple. The very best. Not able to tell you how happy I am with Apple.",
5+
"https://img.freepik.com/free-photo/smiling-man-with-arms-crossed_1149-1711.jpg?size=626&ext=jpg&ga=GA1.1.1700460183.1712188800&semt=ais",
6+
text: "While the idea behind the service is promising, my experience was underwhelming. The recommendations felt generic, and the customer support was less responsive than I had hoped for. It has potential but needs improvement.",
7+
rating: 1,
78
},
89
{
9-
name: "Rosetta Q",
10+
name: "Sofia Alvarez",
1011
photoUrl:
11-
"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
12-
text: "I would also like to say thank you to all your staff. Wow what great service, I love it! Apple impressed me on multiple levels.",
12+
"https://media.istockphoto.com/id/1389348844/photo/studio-shot-of-a-beautiful-young-woman-smiling-while-standing-against-a-grey-background.jpg?s=612x612&w=0&k=20&c=anRTfD_CkOxRdyFtvsiPopOluzKbhBNEQdh4okZImQc=",
13+
text: "The level of personalization and attention to detail in their travel recommendations is phenomenal. Each journey planned using their insights has been a unique and unforgettable experience. Truly a top-notch service for travelers.",
14+
rating: 4,
1315
},
1416
{
15-
name: "Constantine V",
17+
name: "Raj Patel",
1618
photoUrl:
1719
"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
18-
text: "Thank you for making it painless, pleasant and most of all hassle free! I wish I would have thought of it first. The very best.",
20+
text: "This platform changed my travel planning game! The hidden gems and detailed guides provided have made every trip unforgettable. The attention to detail in their recommendations is unmatched. A game-changer for explorers at heart!",
21+
rating: 5,
1922
},
2023
];
2124

@@ -28,10 +31,13 @@ let idx = 0;
2831
updateTestimonial();
2932

3033
function updateTestimonial() {
31-
const { name, photoUrl, text } = testimonials[idx];
34+
const { name, photoUrl, text, rating } = testimonials[idx];
3235
imgEl.src = photoUrl;
3336
textEl.innerText = text;
3437
usernameEl.innerText = name;
38+
39+
const ratingEl = document.querySelector('.rating');
40+
ratingEl.innerHTML = '★'.repeat(rating) + '☆'.repeat(5 - rating);
3541
}
3642

3743
function nextTestimonial() {

‎projects/testimonial-slider/style.css

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,79 @@ body {
22
margin: 0;
33
display: flex;
44
justify-content: center;
5-
height: 100vh;
65
align-items: center;
7-
font-family: cursive;
6+
height: 100vh;
7+
background-color: #f4f4f4;
8+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
89
}
910

1011
.testimonial-container {
1112
position: relative;
12-
width: 500px;
13-
height: 100px;
14-
background-color: slateblue;
15-
border-radius: 10px;
16-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
17-
min-width: 400px;
18-
padding: 70px 20px;
19-
margin: 5px;
13+
width: 350px;
14+
min-height: 150px;
15+
background: linear-gradient(135deg, #6dd5ed, #2193b0);
16+
border-radius: 15px;
17+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
18+
padding: 30px 15px 15px;
19+
text-align: center;
2020
color: white;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
2124
}
2225

2326
img {
24-
width: 100px;
25-
height: 100px;
27+
width: 80px;
28+
height: 80px;
2629
border-radius: 50%;
27-
position: absolute;
28-
left: 50%;
29-
transform: translateX(-50%);
30-
top: -50px;
30+
border: 3px solid white;
31+
margin-bottom: 10px;
32+
}
33+
34+
.text {
35+
margin: 10px 0;
36+
font-size: 14px;
37+
line-height: 1.4;
3138
}
3239

3340
.username {
3441
font-size: 13px;
35-
font-weight: 100;
42+
font-weight: 500;
43+
margin-bottom: 5px;
44+
}
45+
46+
.rating {
47+
color: #ffd700;
48+
font-size: 18px;
49+
margin-bottom: 10px;
3650
}
3751

3852
.arrow {
39-
position: absolute;
40-
top: 50%;
41-
transform: translateY(-50%);
42-
background: none;
53+
background-color: #ffffff40;
4354
border: none;
55+
border-radius: 100%;
4456
color: white;
45-
font-size: 24px;
57+
font-size: 20px;
4658
cursor: pointer;
47-
margin: 70px;
59+
padding: 5px;
60+
margin: 0 5px;
61+
transition: background-color 0.3s ease;
62+
}
63+
64+
.arrow:hover {
65+
background-color: #ffffff80;
4866
}
4967

5068
.arrow.prev {
51-
left: 10px;
69+
position: absolute;
70+
left: -10px;
71+
top: 50%;
72+
transform: translateY(-50%);
5273
}
5374

5475
.arrow.next {
55-
right: 10px;
76+
position: absolute;
77+
right: -10px;
78+
top: 50%;
79+
transform: translateY(-50%);
5680
}

0 commit comments

Comments
 (0)