-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotavailable.php
86 lines (75 loc) · 3.87 KB
/
notavailable.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PakTours | Customer Testimonials</title>
<!-- ---------------------------- GOOGLE FONTS ---------------------------- -->
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- ----------------------------- STYLESHEET ----------------------------- -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- ----------------------------- JQUERY SCRIPTS ----------------------------- -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var open = false;
// OPEN AND CLOSE NAVIGATION
$('#check').click(function(){
open = !open;
if(open) {
$(".navigation__back").css("transform", "scale(80)");
$(".navigation__list").css({"opacity": "1", "width": "100%", "transition-delay": "0.05s"});
}
else {
$(".navigation__back").css("transform", "scale(0)");
$(".navigation__list").css({"opacity": "0", "width": "0"});
}
});
// SCROLL TO THE RESPECTIVE SECTION WHEN A NAV ANCHOR IS DOUBLE CLICKED
$('#nav li a').click(function(){
$(".navigation__back").css("transform", "scale(0)");
$(".navigation__list").css({"opacity": "0", "width": "0"});
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
// HAMBURGER TO CROSS ANIMATION
$('#check').click(function(){
$('.icon').toggleClass("close");
});
});
</script>
</head>
<body>
<!-- ------------------------- NAVIGATION -------------------------- -->
<div class="navigation">
<button class="check" id="check">
<div class="circle icon">
<span class="line top"></span>
<span class="line middle"></span>
<span class="line bottom"></span>
</div>
</button>
<nav class="navigation__list">
<ul class="nav" id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php#about">About</a></li>
<li><a href="index.php#features">Features</a></li>
<li><a href="index.php#provinces">Discover Provinces</a></li>
<li><a href="index.php#bookings">Bookings</a></li>
<li><a href="index.php#testimonials">Testimonials</a></li>
<li><a href="index.php#form">Contact us</a></li>
</ul>
</nav>
<div class="navigation__back"></div>
</div>
<!-- ------------------------- NOT AVAILABLE DIV -------------------------- -->
<div class="notavailable">
<h3 class="heading-tertiary">OOPS! Web page under construction.<br><br> Visit back later :) </h3>
</div>
<!-- ---------------------------- GO BACK BTN ----------------------------- -->
<div class="u-margin-top-small btnstory">
<a href="index.php#provinces" class="btn-text btn-go-back u-margin-top-big u-margin-bottom-medium u-margin-left-small">← Go Back</a>
</div>
</body>
</html>