-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (119 loc) · 5.45 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
<!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">
<title>Tasikmalaya October Festival 2019</title>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="plugins/fontawesome/css/all.css">
<link rel="stylesheet" href="plugins/owl-carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="plugins/owl-carousel/assets/owl.theme.green.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<nav id="scrollsections-navigation" class="col-100">
<div class="col-25 logo">
<a href="#top" class="active">TOF 2019</a>
</div>
<div class="col-75 menu">
<a href="#about">ABOUT</a>
<a href="#documentation">DOCUMENTATION</a>
<!-- <a href="#schedule">SCHEDULE</a> -->
<a href="#register">VOLUNTEER</a>
<a href="javascript:void(0)" onclick="toggle()" class="xl icon"><i class="fas fa-bars"></i></a>
</div>
</nav>
<header class="col-100">
<div class="mask col-100"></div>
<div class="hero col-75">
<h1 class="xxl">TASIKMALAYA OCTOBER FESVITAL 2019</h1>
<p class="lg">Are U Ready For Be a Part Tasikmalaya October Festival 2019? </p>
<a href="#about">REGISTER NOW</a>
</div>
<!-- <div class="col-25 sch">
<div class="date">
<i class="far fa-calendar-alt xxl"></i>
<span class="lg">October</span>
</div>
<div class="place">
<i class="fas fa-map-marker-alt xxl"></i>
<span class="lg">Tasikmalaya</span>
</div>
</div> -->
</header>
<!-- About -->
<section id="about" class="col-100 scrollsections">
<article class="col-50">
<h2 class="xl bdr-right" data-aos="zoom-in" data-aos-duration="3000">WHAT IS TASIKMALAYA OCTOBER FESTIVAL 2019?</h2>
<p class="lg">Tasikmalaya Oktober Festival (TOF) is an event that is one of the festivities of the Tasikmalaya City Anniversary which is always held every year by the City Government of Tasikmalaya, colorful writing umbrellas hanging in large numbers, carnival parades along with typical food become one of the attractions separate for the community.
</p>
</article>
<a href="#documentation">
<i class="fas fa-angle-double-down xxl"></i>
</a>
</section>
<section id="documentation" class="scrollsections col-100">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="assets/img/2.jpg" alt="">
</div>
<div class="i">
<img src="assets/img/3.jpg" alt="">
</div>
<div class="item">
<img src="assets/img/1.jpg" alt="" srcset="">
</div>
<div>
<img src="assets/img/0.jpg" alt="" srcset="">
</div>
</section>
<section id="register" class="scrollsections col-100">
<h2 class="xl bdr-right-org" data-aos="fade-right" data-aos-duration="3000">JOIN US TO BE A VOLUNTEER!</h2>
<div class="volunteer col-50">
<form onsubmit="regist()">
<div class="lbl">
<label>YOUR NAME</label>
<label>YOUR EMAIL</label>
<label>YOUR PHONE</label>
</div>
<div class="data">
<input type="text" id="nama" placeholder="PUT YOUR NAME HERE" required/>
<input type="email" id="email" placeholder="PUT YOUR EMAIL HERE" required/>
<input type="text" id="phone" placeholder="PUT YOUR PHONE HERE" required/>
</div>
<input class="lg" type="submit" value="REGISTER NOW"/>
</form>
</div>
<div class="join-us col-50">
<span class="lg title-join">JOIN US ON</span>
<a href="#" style="border-left:#3C5A99 solid 4px;"><i class="fab fa-facebook-square"></i></a>
<a href="#" style="border-left:#38A1F3 solid 4px;"><i class="fab fa-twitter-square"></i></a>
<a href="#" style="border-left:#231F20 solid 4px;"><i class="fab fa-instagram"></i></a>
<div class="info">
<span class="m">
Tasikmalaya Oktober Festival
</span>
<span class="m">
@TasikOctFest
</span>
<span class="m">
@TasikOctFest
</span>
</div>
<h2 class="lg profile">#JawaraTasik</h2>
</div>
</section>
<script src='assets/js/jquery.min.js'></script>
<script src='plugins/scroll-sections/plugins.js'></script>
<script src='plugins/scroll-sections/jquery.scrollSections.js'></script>
<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>