-
Notifications
You must be signed in to change notification settings - Fork 1
/
landing.html
161 lines (154 loc) · 6.66 KB
/
landing.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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">
<title>Ecotrack - Home</title>
<link rel="stylesheet" href="output.css">
</head>
<body>
<!-- first -->
<div class="bg-gradient-to-r from-darkerBlue to-evendarkerPurple h-screen">
<!-- header -->
<nav class="container flex py-5 mx-auto min-w-full bg-transparent">
<!-- logo -->
<div class="py-1 ml-10 justify-start items-center">
<img src="img/ecotrack2.png" class="w-52">
</div>
<!-- nav menu -->
<ul class="flex flex-1 justify-end items-center gap-10 mx-10 text-white font-semibold">
<li><a href="#" class="text-lightGreen">Home</a></li>
<li><a href="about.html" class="hover:text-lightGreen">About</a></li>
<li><a href="register.html" class="hover:text-lightGreen">Daftar</a></li>
<a href="login.html"
class="px-2 py-2 mr-10 w-20 font-bold bg-lightGreen text-evendarkerBlue text-center rounded-full">
Login
</a>
</ul>
</nav>
<!-- hero section -->
<div class="container flex flex-col mx-auto min-w-full p-7 md:flex-row">
<!-- left side -->
<div class="w-full text-white space-y-9 m-44 md:w-1/2">
<h1 class="text-6xl font-semibold">
Ecotrack
</h1>
<p class="">
Ecotrack merupakan aplikasi berbasis web yang dapat membantu <br>
perusahaan dan UKM dalam melakukan pencatatan kegiatan transaksi <br>
dan melakukan pembukuan keuangan.
</p>
<div>
<a href="register.html"
class="px-5 py-2 font-bold bg-lightGreen text-evendarkerBlue text-center rounded-full">
Daftar Sekarang
</a>
<!-- hover stuff with transition-->
<!-- <a href="register.html" target="_blank"
class="transition-colors ease-in-out duration-500 delay-100 hover:bg-teal hover:text-evendarkerBlue px-5 py-2 font-bold bg-lightGreen text-evendarkerBlue text-center rounded-full">
Daftar Sekarang
</a> -->
</div>
</div>
<!-- right side -->
<!-- <div class="w-1/2 bg-slate-400">
a
</div> -->
</div>
</div>
<!-- second -->
<div class="bg-tosca h-800px">
<div class="container flex flex-col mx-auto justify-center min-w-full p-7">
<div class="mx-auto text-evendarkerBlue space-y-14 m-14">
<h1 class="text-5xl font-semibold text-center">
Fitur dan Keunggulan
</h1>
<!-- features list -->
<div class="flex flex-row space-x-10">
<!-- feature 1 -->
<div class="text-center space-y-2">
<img src="img/kitty.jpg" alt="" class="w-80 h-80">
<h2 class="font-semibold">Mencatat Transaksi</h2>
<p>Lorem ipsum dolor sit amet
<br> consectetur adipisicing elit.
</p>
</div>
<!-- feature 2 -->
<div class="text-center space-y-2">
<img src="img/kitty2.jpg" alt="" class="w-80 h-80">
<h2 class="font-semibold">Pembukuan Keuangan</h2>
<p>Lorem ipsum dolor sit amet
<br> consectetur adipisicing elit.
</p>
</div>
<!-- feature 3 -->
<div class="text-center space-y-2">
<img src="img/kitty3.jpg" alt="" class="w-80 h-80">
<h2 class="font-semibold">Mencetak Pembukuan</h2>
<p>Lorem ipsum dolor sit amet
<br> consectetur adipisicing elit.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- third -->
<div class="bg-gradient-to-r from-darkerBlue to-evendarkerPurple h-800px">
<div class="container flex flex-col mx-auto justify-center min-w-full p-7">
<div class="mx-auto text-white space-y-28 m-14">
<h1 class="text-5xl font-semibold text-center">
Anggota Tim
</h1>
<!-- team members -->
<div class="flex flex-row space-x-10">
<!-- member 1 -->
<div class="text-center space-y-2">
<img src="img/kitty.jpg" alt="" class="w-80 h-80">
</div>
<!-- member 2 -->
<div class="text-center space-y-2">
<img src="img/kitty2.jpg" alt="" class="w-80 h-80">
</div>
<!-- member 3 -->
<div class="text-center space-y-2">
<img src="img/kitty3.jpg" alt="" class="w-80 h-80">
</div>
<!-- member 4 -->
<div class="text-center space-y-2">
<img src="img/kitty4.jpg" alt="" class="w-80 h-80">
</div>
</div>
<div class="text-center">
<a href="#"
class="px-5 py-2 w-full font-bold bg-lightGreen text-evendarkerBlue text-center rounded-full">
Discover More
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="container flex flex-row p-24 space-x-16 mx-auto h-80 min-w-full bg-evendarkerBlue text-white">
<!-- alamat -->
<div>
<h2 class="font-semibold">Address</h2><br>
<p>Kaliurang, Yogyakarta</p>
</div>
<!-- contacts -->
<div>
<h2 class="font-semibold">Contacts</h2><br>
<p>123 456 7890<br>
aurora@email.com</p>
</div>
<!-- faq -->
<div>
<h2 class="font-semibold">FAQ</h2><br>
<a href="" class="underline hover:text-lightGreen">Frequently asked questions</a>
</div>
</div>
</footer>
</body>
</html>