-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (78 loc) · 3.28 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
<!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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Presentation</title>
</head>
<body>
<!-- Page 1 (Intro) -->
<section id="page-1" class="page">
<h1>Welcome To My Presentation</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam et eaque quo illo. Aliquid nostrum commodi blanditiis. Laudantium quam error doloribus iure exercitationem maxime odio. Qui quam porro numquam, aliquam aliquid vitae officia unde iusto, voluptate optio, quis voluptates deleniti.</p>
<div>
<a href="#page-2" class="btn">
Next Page <i class="fas fa-arrow-circle-down"></i>
</a>
</div>
</section>
<!-- Page 2 -->
<section id="page-2" class="page">
<h1>Page 2</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam et eaque quo illo. Aliquid nostrum commodi blanditiis. Laudantium quam error doloribus iure exercitationem maxime odio. Qui quam porro numquam, aliquam aliquid vitae officia unde iusto, voluptate optio, quis voluptates deleniti.</p>
<div>
<a href="#page-1" class="btn btn-dark">
Prev Page <i class="fas fa-arrow-circle-up"></i>
</a>
<a href="#page-3" class="btn">
Next Page <i class="fas fa-arrow-circle-down"></i>
</a>
</div>
</section>
<!-- Page 3 -->
<section id="page-3" class="page">
<h1>Page 3</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam et eaque quo illo. Aliquid nostrum commodi blanditiis. Laudantium quam error doloribus iure exercitationem maxime odio. Qui quam porro numquam, aliquam aliquid vitae officia unde iusto, voluptate optio, quis voluptates deleniti.</p>
<div>
<a href="#page-2" class="btn btn-dark">
Prev Page <i class="fas fa-arrow-circle-up"></i>
</a>
<a href="#page-4" class="btn">
Next Page <i class="fas fa-arrow-circle-down"></i>
</a>
</div>
</section>
<!-- Page 4 -->
<section id="page-4" class="page">
<h1>Page 4</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam et eaque quo illo. Aliquid nostrum commodi blanditiis. Laudantium quam error doloribus iure exercitationem maxime odio. Qui quam porro numquam, aliquam aliquid vitae officia unde iusto, voluptate optio, quis voluptates deleniti.</p>
<div>
<a href="#page-3" class="btn">
Prev Page <i class="fas fa-arrow-circle-up"></i>
</a>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
// Smooth Scrolling
$('.btn').on('click', function(event) {
if (this.hash !== '') {
event.preventDefault();
const hash = this.hash;
$('html, body').animate(
{
scrollTop: $(hash).offset().top
},
800
);
}
});
</script>
</body>
</html>