forked from shihabiiuc/testimonialslider
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
57 lines (51 loc) · 2.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- font ends here -->
<title>Testimonial Slider using HTML, CSS & JavaScript</title>
<link rel="stylesheet" href="./sass/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade bg1">
<div class="numbertext">1 / 3</div>
<blockquote class="text">Aspernatur modi quisquam autem illo sapiente reprehenderit. Tpsume dolor sit amet consectetur adipisicing elit. Consectetur voluptates sit consequuntur quasi eum veniam earum enim nam vitae dolore praesentium minima commodi. Voluptates sit consequuntur sit amet voluptates sit consequuntur.</blockquote>
<img src="./img/photo-3.jpg">
<p class="designation">CEO, American talcum powder</p>
</div> <!-- .mySlides -->
<div class="mySlides fade bg2">
<div class="numbertext">2 / 3</div>
<blockquote class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptates sit consequuntur quasi eum veniam aspernatur modi quisquam autem illo sapiente reprehenderit, earum enim nam vitae minima commodi dolore praesentium 💥</blockquote>
<img src="./img/photo-4.jpg">
<p class="designation">GM, British talcum powder</p>
</div> <!-- .mySlides -->
<div class="mySlides fade bg3">
<div class="numbertext">3 / 3</div>
<blockquote class="text">Consectetur voluptates sit consequuntur quasi eum veniam aspernatur modi quisquam autem illo sapiente reprehenderit</blockquote>
<img src="./img/photo-5.jpg">
<p class="designation">MD, German talcum powder</p>
</div> <!-- .mySlides -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div> <!-- .slideshow-container -->
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="guideline">
<h1>Fully mobile responsive testimonial slider</h1>
<p>Made with HTML, CSS & JavaScript. To learn how you can put in place this testimonial slider on your own project, see the <a href="https://shihabiiuc.com/testimonial-slider/">step-by-step guideline »</a> on my blog post.</p>
</div>
<script src="./script.js"></script>
</body>
</html>