Skip to content

Commit 97e2866

Browse files
solygambassolygambas
committed
add testimonial box switcher
1 parent 7ea2887 commit 97e2866

File tree

3 files changed

+213
-0
lines changed

3 files changed

+213
-0
lines changed

‎47-testimonial box switcher/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Testimonial Box</title>
14+
</head>
15+
<body>
16+
<div class="testimonial-container">
17+
<div class="progress-bar"></div>
18+
<div class="fas fa-quote-left fa-quote"></div>
19+
<div class="fas fa-quote-right fa-quote"></div>
20+
<p class="testimonial">
21+
I've worked with literally hundreds of HTML/CSS developers and I have to
22+
say the top spot goes to this guy. This guy is an amazing developer. He
23+
stresses on good, clean code and pays heed to the details. I love
24+
developers who respect each and every aspect of a throughly thought out
25+
design and do their best to put it in code. He goes over and beyond and
26+
transforms ART into PIXELS - without a glitch, every time.
27+
</p>
28+
<div class="user">
29+
<img
30+
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
31+
alt="user"
32+
class="user-image"
33+
/>
34+
<div class="user-details">
35+
<h4 class="username">Miyah Myles</h4>
36+
<p class="role">Marketing</p>
37+
</div>
38+
</div>
39+
</div>
40+
<script src="script.js"></script>
41+
</body>
42+
</html>

‎47-testimonial box switcher/script.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const testimonialsContainer = document.querySelector(".testimonials-container");
2+
const testimonial = document.querySelector(".testimonial");
3+
const userImage = document.querySelector(".user-image");
4+
const username = document.querySelector(".username");
5+
const role = document.querySelector(".role");
6+
7+
const testimonials = [
8+
{
9+
name: "Miyah Myles",
10+
position: "Marketing",
11+
photo:
12+
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6",
13+
text:
14+
"I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.",
15+
},
16+
{
17+
name: "June Cha",
18+
position: "Software Engineer",
19+
photo: "https://randomuser.me/api/portraits/women/44.jpg",
20+
text:
21+
"This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!",
22+
},
23+
{
24+
name: "Iida Niskanen",
25+
position: "Data Entry",
26+
photo: "https://randomuser.me/api/portraits/women/68.jpg",
27+
text:
28+
"This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.",
29+
},
30+
{
31+
name: "Renee Sims",
32+
position: "Receptionist",
33+
photo: "https://randomuser.me/api/portraits/women/65.jpg",
34+
text:
35+
"This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.",
36+
},
37+
{
38+
name: "Jonathan Nunfiez",
39+
position: "Graphic Designer",
40+
photo: "https://randomuser.me/api/portraits/men/43.jpg",
41+
text:
42+
"I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!",
43+
},
44+
{
45+
name: "Sasha Ho",
46+
position: "Accountant",
47+
photo:
48+
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb",
49+
text:
50+
"This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!",
51+
},
52+
{
53+
name: "Veeti Seppanen",
54+
position: "Director",
55+
photo: "https://randomuser.me/api/portraits/men/97.jpg",
56+
text:
57+
"This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.",
58+
},
59+
];
60+
61+
let index = 1;
62+
63+
const updateTestimonial = () => {
64+
const { name, position, photo, text } = testimonials[index];
65+
testimonial.innerHTML = text;
66+
userImage.src = photo;
67+
username.innerHTML = name;
68+
role.innerHTML = position;
69+
index++;
70+
if (index > testimonials.length - 1) index = 0;
71+
};
72+
73+
setInterval(updateTestimonial, 10000);

‎47-testimonial box switcher/style.css

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #f4f4f4;
9+
font-family: "Montserrat", sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
overflow: hidden;
16+
margin: 0;
17+
padding: 10px;
18+
}
19+
20+
.testimonial-container {
21+
background-color: #476ce4;
22+
color: #fff;
23+
border-radius: 15px;
24+
margin: 20px auto;
25+
padding: 50px 80px;
26+
max-width: 768px;
27+
position: relative;
28+
}
29+
30+
.fa-quote {
31+
color: rgba(255, 255, 255, 0.3);
32+
font-size: 28px;
33+
position: absolute;
34+
top: 70px;
35+
}
36+
37+
.fa-quote-left {
38+
left: 40px;
39+
}
40+
41+
.fa-quote-right {
42+
right: 40px;
43+
}
44+
45+
.testimonial {
46+
line-height: 28px;
47+
text-align: justify;
48+
}
49+
50+
.user {
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
}
55+
56+
.user .user-image {
57+
border-radius: 50%;
58+
height: 75px;
59+
width: 75px;
60+
object-fit: cover;
61+
}
62+
63+
.user .user-details {
64+
margin-left: 10px;
65+
}
66+
67+
.user .username {
68+
margin: 0;
69+
}
70+
71+
.user .role {
72+
font-weight: normal;
73+
margin: 10px 0;
74+
}
75+
76+
.progress-bar {
77+
background-color: #fff;
78+
height: 4px;
79+
width: 100%;
80+
transform-origin: left;
81+
animation: grow 10s linear infinite;
82+
}
83+
84+
@keyframes grow {
85+
0% {
86+
transform: scaleX(0);
87+
}
88+
}
89+
90+
@media (max-width: 768px) {
91+
.testimonial-container {
92+
padding: 20px 30px;
93+
}
94+
95+
.fa-quote {
96+
display: none;
97+
}
98+
}

0 commit comments

Comments
 (0)