-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (131 loc) · 7.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testimonials | Aigle</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid m-0">
<div class="container-fluid p-5 bg-dark text-white mb-4 text-center">
<h1 class="display-4 fw-bold">Testimonials <small class="fw-light">by Aigle</small></h1>
</div>
<div id="test-grp-one" class="container-fluid mr-3 mb-4 row">
<!--testimonial one-->
<div id="test-one" class="col">
<div id="bubble-one" class="bg-dark text-white p-4 m-4">
<p class="text text-break">The team was professional and efficient. They went above and beyond to ensure everything was perfect.</p>
<p class="text lead">I couldn’t be happier!</p>
</div>
<div id="person-one" class="d-flex flex-row ms-auto">
<!--Photo by Rachel McDermott on Unsplash-->
<img id="person-one-img" class="img-round rounded-circle ml-3" src="https://images.unsplash.com/photo-1506863530036-1efeddceb993?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cG9ydHJhaXR8ZW58MHx8MHx8fDI%3D">
<div id="person-one-info">
<h4 class="text">Dana Carews | <small>Senior App Developer</small></h4>
<a href="site.html#test-one" class="btn btn-dark">Get this template</a>
</div>
</div>
</div>
<!--testimonial-two-->
<div id="test-two" class="col">
<div class="card p-4 m-4">
<div class="card-body">
<div id="test-two-text">
<p class="text text-break">
Ever since I started using this software,
my productivity has skyrocketed.
</p>
<p class="fw-bold">It’s a must-have for anyone in my field</p>
</div>
<div id="person-two" class="d-flex flex-row ms-auto">
<!--Photo by César Rincón on Unsplash-->
<img id="person-two-img" class="img-round rounded-circle ml-3" src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
<div id="person-two-info" class="mt-3">
<h4 class="text">Alberto Aguilar</h4>
<h5 class="text">Manager</h5>
<a href="site.html#test-two" class="btn btn-dark">Get this template</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="test-grp-two" class="container-fluid mt-4 mb-4 p-3 d-flex flex-row border">
<div id="test-three-img my-4" class="mr-3">
<!--Photo by Paola Aguilar on Unsplash-->
<img id="person-three-img" class="rounded" src="https://images.unsplash.com/photo-1500832333538-837287aad2b6?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
<div id="test-three-text d-flex flex-column">
<!--https://www.flaticon.com/authors/roundicons-premium-->
<img id="rating" src="star.png">
<div class="test-three-content">
<p class="text">
This platform is a game-changer! It’s user-friendly
and has everything I need. I’ve already recommended
it to my friends.
</p>
<h6 class="display-6">Horatio Owens</h6>
<h6 class="text">Copywriter</h6>
<a href="site.html#test-three" class="btn btn-dark mt-3">Get this template</a>
</div>
</div>
</div>
<div id="test-grp-three" class="container-fluid my-3 d-flex flex-column">
<div id="test-four" class="border p-4 m-4 text-center">
<div id="test-four-text">
<p class="content-1 text-break four-text">
The team was professional and efficient. They went
above and beyond to ensure everything was perfect.
I couldn’t be happier!
</p>
<p class="hide content-2 text-break four-text">
Ever since I started using this software,
my productivity has skyrocketed. It’s a must-have
for anyone in my field.
</p>
<p class="hide content-3 text-break four-text">
This platform is a game-changer! It’s user-friendly
and has everything I need. I’ve already recommended
it to my friends.
</p>
</div>
<div id="test-four-img" class="mb-3">
<img class="img-four rounded-circle content-1" src="https://images.unsplash.com/photo-1506863530036-1efeddceb993?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cG9ydHJhaXR8ZW58MHx8MHx8fDI%3D">
<img class="hide img-four rounded-circle content-2" src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
<img class="hide img-four rounded-circle content-3" src="https://images.unsplash.com/photo-1500832333538-837287aad2b6?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
<div id="test-four-person">
<h6 class="fw-bold content-1">Dana Carews</h6>
<h6 class="hide fw-bold content-2">Alberto Aguilar</h6>
<h6 class="hide fw-bold content-3">Horatio Owens</h6>
</div>
<a href="site.html#test-four" class="btn btn-dark mt-3">Get this template</a>
</div>
</div>
<div class="footer mt-4 p-3 container-fluid bg-dark text-white text-center">
<h2 class="display-5">Want more templates like this?</h2>
<a href="https://github.com/aigle-levant" class="btn btn-light mt-3">Go to my GitHub</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
let texts = document.querySelectorAll('.four-text');
let images = document.querySelectorAll('.img-four');
let names = document.querySelectorAll('#test-four-person h6');
let i = 0;
setInterval(() =>
{
texts[i].classList.add('hide');
images[i].classList.add('hide');
names[i].classList.add('hide');
i = (i+1)%texts.length;
texts[i].classList.remove('hide');
images[i].classList.remove('hide');
names[i].classList.remove('hide');
}, 3000);
</script>
</body>
</html>