-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (116 loc) · 6.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarapti - Project Management App</title>
<meta name="description" content="Project Management Website by Rifqi">
<meta name="author" content="Rifqi Naufal Febriyan">
<link rel="icon" type="image/png" sizes="16x16" href="asset/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Main style -->
<link rel="stylesheet" href="style/style.css">
<!-- Animate.css -->
<link rel="stylesheet" href="animate.css/animate.min.css">
<!-- Iconify -->
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<body>
<div class="container">
<!-- Preloader -->
<div class="preloader">
<div class="loading">
<img src="asset/preloader.gif" class="mx-auto d-block" width="80">
<p>Making some magic ✨</p>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light animate__animated animate__fadeInDown animate__delay-2s">
<a class="navbar-brand" href="index.html"><img class="logo" src="asset/logo.svg" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<div id="header">
<div class="row mt-4">
<div class="col-lg-6 align-self-center">
<h1 class="animate__animated animate__fadeInDown animate__delay-2s">Manage your projects on the go</h1>
<div class="sub-title animate__animated animate__fadeInDown animate__delay-2s">
<h6>With Tarapti you can easily manage your project anytime and anywhere, save money and time.</h6>
</div>
<a href="thank-you.html"><button class="button animate__animated animate__fadeInDown animate__delay-2s">Create Account Now</button></a>
</div>
<div class="col-lg-6 illustration" data-tilt>
<div class="animate__animated animate__zoomIn animate__delay-3s" data-relative-input="true" id="scene">
<div data-depth="0.1"><img src="asset/Illustration/circle-bg.png" alt="Illustration Circle"></div>
<div data-depth="0.20"><img src="asset/Illustration/chart.png" alt="Illustration Chart"></div>
<div data-depth="0.30"><img src="asset/Illustration/clock.png" alt="Illustration Clock"></div>
<div data-depth="0.30"><img src="asset/Illustration/line.png" alt="Illustration Line"></div>
<div data-depth="0.30"><img src="asset/Illustration/phone.png" alt="Illustration Phone"></div>
<div data-depth="0.30"><img src="asset/Illustration/tab-browser.png" alt="Illustration Tab Browser"></div>
<div data-depth="0.55"><img src="asset/Illustration/female.png" alt="Illustration Female"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="animate__animated animate__fadeInDown animate__delay-2s">
<hr>
<div class="row py-3">
<div class="col-lg-8 col-md-7 align-self-center">
<p class="align-middle">Copyright © 2021. All Rights Reserved | Made with <span style="color: #EF5350;">❤</span> by <span style="color: #654890; font-weight: 600;">Rifqi Naufal Febriyan</span></p>
</div>
<div class="col-lg-4 col-md-5 text-end">
<div class="social">
<a href="https://www.instagram.com/uix.iqi/" target="blank"><span class="iconify" data-inline="false" data-icon="akar-icons:instagram-fill" style="font-size: 24px;"></span></a>
</div>
<div class="social">
<a href="https://dribbble.com/rifqinfl_" target="blank"><span class="iconify" data-inline="false" data-icon="akar-icons:dribbble-fill" style="font-size: 24px;"></span></a>
</div>
<div class="social">
<a href="https://behance.net/rifqinaufal" target="blank"><span class="iconify" data-inline="false" data-icon="ant-design:behance-outlined" style="font-size: 24px;"></span></a>
</div>
<div class="social">
<a href="https://github.com/RifqiNaufalF" target="blank"><span class="iconify" data-inline="false" data-icon="akar-icons:github-fill" style="font-size: 24px;"></span></a>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/rifqinfl2001/" target="blank"><span class="iconify" data-inline="false" data-icon="akar-icons:linkedin-fill" style="font-size: 24px;"></span></a>
</div>
</div>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/parallax.min.js"></script>
<script type="text/javascript">
//Preloader
setTimeout(function(){
$('.preloader').fadeOut();
$('.preloader_img').delay(150).fadeOut('slow');
}, 2000);
//Parallax Hover
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
</script>
<!-- Tilt js -->
<script src="js/tilt.jquery.js"></script>
</body>
</html>