forked from raaghavendrahm/HTML-and-CSS-Projects
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (75 loc) · 3.3 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
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
<title>Presentation Website</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. Voluptates, architecto ducimus nostrum excepturi optio hic reiciendis in vitae commodi expedita libero ipsa illum minus? Reiciendis veniam impedit tempore fugit totam natus laborum exercitationem, quis qui, quidem sed, quasi nesciunt laudantium?</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. Voluptates, architecto ducimus nostrum excepturi optio hic reiciendis in vitae commodi expedita libero ipsa illum minus? Reiciendis veniam impedit tempore fugit totam natus laborum exercitationem, quis qui, quidem sed, quasi nesciunt laudantium?</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. Voluptates, architecto ducimus nostrum excepturi optio hic reiciendis in vitae commodi expedita libero ipsa illum minus? Reiciendis veniam impedit tempore fugit totam natus laborum exercitationem, quis qui, quidem sed, quasi nesciunt laudantium?</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. Voluptates, architecto ducimus nostrum excepturi optio hic reiciendis in vitae commodi expedita libero ipsa illum minus? Reiciendis veniam impedit tempore fugit totam natus laborum exercitationem, quis qui, quidem sed, quasi nesciunt laudantium?</p>
<div>
<a href="#page-3" class="btn">
Prev Page <i class="fas fa-arrow-circle-up"></i>
</a>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" 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>