Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit edbbbc4

Browse files
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);
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>
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)

AltStyle によって変換されたページ (->オリジナル) /