Skip to content

Commit edbbbc4

Browse files
HuXn-WebDevHuXn-WebDev
committed
Testimonal Box Switcher HTML, CSS, JS
1 parent e48ffdf commit edbbbc4

File tree

3 files changed

+173
-0
lines changed

3 files changed

+173
-0
lines changed

‎79. Testimonal Box Switcher/app.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const testimonialsContainer = document.querySelector(".testimonial-container");
2+
const testimonial = document.querySelector(".testimonial");
3+
const userImage = document.querySelector(".user-avater");
4+
const username = document.querySelector(".username");
5+
const twitterHandle = document.querySelector(".twitter-handle");
6+
7+
const testimonials = [
8+
{
9+
name: "Guillermo Rauch",
10+
position: "@rauchg",
11+
photo:
12+
"https://pbs.twimg.com/profile_images/1450115233205272576/CFTTK-0I_400x400.jpg",
13+
text: "If I had to recommend a way of getting into programming today, it would be HTML + CSS with @tailwindcss The RoI is just incredible. This responsive demo is just ~21 custom CSS props. The whole thing is mostly built-in tailwind classes and vanilla HTML.",
14+
},
15+
{
16+
name: "Dacey Nolan",
17+
position: "@dacey_nolan",
18+
photo:
19+
"https://pbs.twimg.com/profile_images/1356685491127656449/db8jKmuZ_400x400.jpg",
20+
text: "I started using @tailwindcss. I instantly fell in love with their responsive modifiers, thorough documentation, and how easy it was customizing color palettes.",
21+
},
22+
{
23+
name: "Sarah Dayan",
24+
position: "@frontstuff_io",
25+
photo:
26+
"https://pbs.twimg.com/profile_images/977873484759158784/mOItIR7M_400x400.jpg",
27+
text: "Tailwind CSS is bridging the gap between design systems and products. It's becoming the defacto API for styling.",
28+
},
29+
{
30+
name: "Igor Randjelovic",
31+
position: "@igor_randj",
32+
photo:
33+
"https://pbs.twimg.com/profile_images/970109919444824064/X0XU8ZD9_400x400.jpg",
34+
text: "Tailwind clicked for me almost immediately. I can't picture myself writing another BEM class ever again. Happy user since the first public release! Productivity is at an all time high, thanks to @tailwindcss",
35+
},
36+
{
37+
name: "Dan Malone",
38+
position: "@ohhdanm",
39+
photo:
40+
"https://pbs.twimg.com/profile_images/1523786296308736000/aJ7nC2LN_400x400.jpg",
41+
text: "CSS has always been the hardest part of offering a digital service. It made me feel like a bad developer. Tailwind gives me confidence in web development again. Their docs are my first port of call.",
42+
},
43+
{
44+
name: "Sergio Peris",
45+
position: "@sertxudev",
46+
photo:
47+
"https://pbs.twimg.com/profile_images/1526657447326371842/vtmVANH7_400x400.jpg",
48+
text: "I thought 'Why would I need Tailwind CSS? I already know CSS and use Bootstrap', but after giving it a try I decided to switch all my projects to Tailwind.",
49+
},
50+
{
51+
name: "marckohlbrugge.eth",
52+
position: "@marckohlbrugge",
53+
photo:
54+
"https://pbs.twimg.com/profile_images/1517414077534191616/fUc3KRh6_400x400.jpg",
55+
text: "Before Tailwind CSS I was banging my head against the wall trying to make sense of my CSS spaghetti. Now I am banging my head against the wall wondering why I didn't try it earlier. My head hurts and my wall has a big hole in it. But at least using CSS is pleasant again!",
56+
},
57+
];
58+
59+
let counter = 1;
60+
61+
function showNextTestimonial() {
62+
const { name, position, photo, text } = testimonials[counter];
63+
64+
testimonial.innerHTML = text;
65+
userImage.src = photo;
66+
username.innerHTML = name;
67+
twitterHandle.innerHTML = position;
68+
69+
counter++;
70+
71+
if (counter > testimonials.length - 1) {
72+
counter = 0;
73+
}
74+
}
75+
76+
setInterval(showNextTestimonial, 10000);

‎79. Testimonal Box Switcher/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Testionial Box</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="testimonial-container">
11+
<div class="user">
12+
<img
13+
src="https://pbs.twimg.com/profile_images/1196645005378478080/79mVokZP_400x400.jpg"
14+
class="user-avater"
15+
/>
16+
<div class="user-info">
17+
<h4 class="username">Ben Furfie</h4>
18+
<div class="twitter-handle">@frontendben</div>
19+
</div>
20+
</div>
21+
<p class="testimonial">
22+
I've been writing CSS for over 20 years, and up until 2017, the way I
23+
wrote it changed frequently. It's not a coincidence Tailwind was
24+
released the same year. It might look wrong, but spend time with it and
25+
you'll realise semantic CSS was a 20 year mistake.
26+
</p>
27+
<div class="line"></div>
28+
</div>
29+
30+
<script src="app.js"></script>
31+
</body>
32+
</html>

‎79. Testimonal Box Switcher/style.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background: rgb(28, 28, 28);
7+
font-family: sans-serif;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
overflow: hidden;
14+
}
15+
16+
.testimonial-container {
17+
background-color: rgb(19, 19, 19);
18+
color: #fff;
19+
padding: 5rem 8rem;
20+
max-width: 800px;
21+
position: relative;
22+
box-shadow: 0 2px 4px 2px rgb(19, 19, 19);
23+
}
24+
25+
.testimonial {
26+
line-height: 25px;
27+
text-align: center;
28+
}
29+
30+
.user {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
37+
.user-avater {
38+
border-radius: 100px;
39+
height: 100px;
40+
width: 100px;
41+
object-fit: cover;
42+
}
43+
44+
.user .user-info {
45+
margin-top: 10px;
46+
text-align: center;
47+
}
48+
49+
.user .username {
50+
margin: 0;
51+
}
52+
53+
.line {
54+
background: crimson;
55+
height: 4px;
56+
width: 100%;
57+
margin-top: 20px;
58+
animation: animation 10s linear infinite;
59+
}
60+
61+
@keyframes animation {
62+
0% {
63+
transform: scaleX(0);
64+
}
65+
}

0 commit comments

Comments
 (0)