-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
233 lines (220 loc) · 13.1 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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!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>Explore Animal</title>
<!--css -->
<link rel="stylesheet" href="framework/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/navigate.css">
</head>
<body>
<nav>
<div>
<a class="logo" href="javascript:void(0)"><span>PA</span>ZUU</a>
</div>
<div class="nav-menu">
<ul>
<li class="dropdown">
<a href="javascript:void(0)">WILDLIFE</a>
<div class="dropdown-content">
<a href="animal.html">ANIMALS</a>
<a href="ecosystem.html">ECOSYSTEMS</a>
<a href="extinct.html">EXTINCT</a>
</div>
</li>
<li>
<a href="news.html">NEWS</a>
</li>
<li>
<a href="about.html">ABOUT US</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">MORE</a>
<div class="dropdown-content">
<a href="shop.html">SHOP</a>
<a href="publish.html">PUBLISH</a>
<a href="gallery.html">GALERRY ANIMALS</a>
<a href="donate.html">DONATE</a>
</div>
</li>
<li><a href="#"><button class="btn-login">Login</button></a>
</li>
</ul>
</div>
</nav>
<!-- menu mobile -->
<div style="font-size:30px;cursor:pointer" id="menuBar" onclick="openNav()">☰</div>
<div id="menu-mobile" class="nav-mobile">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul>
<li class="details">
<a href="javascript:void(0)">WILDLIFE</a>
<div class="details-items">
<a href="animal.html">ANIMALS</a>
<a href="ecosystem.html">ECOSYSTEMS</a>
<a href="extinct.html">EXTINCT</a>
</div>
</li>
<li>
<a href="news.html">NEWS</a>
</li>
<li>
<a href="about.html">ABOUT US</a>
</li>
<button class="btn-login">Login</button>
</ul>
</div>
<div class="main-cover">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="670" viewBox="700 160 10 670" class="animal">
<image width="1400" height="1077" xlink:href="./asset/img/animals.png"/>
<a href="#" class="btn">
<text id="your-favorite" data-name="Your Favorite" transform="translate(1010 466)" fill="#c1c1c1" font-size="40" font-family="Gelasio-Regular, Gelasio"><tspan x="-151.257" y="0">Your Favorite</tspan></text>
<text id="publish" transform="translate(945 512)" fill="#d9395f" font-size="18" font-family="Roboto-Medium, Roboto" font-weight="500"><tspan x="-33.398" y="0">Publish</tspan></text>
<g id="rectangle" data-name="Rectangle 9" transform="translate(865 480)" fill="none" stroke="#d9395f" stroke-width="2">
<rect x="1" y="1" width="155" height="50" fill="none" class="rect"/>
</g>
</a>
<!-- <image width="1400" height="1960" xlink:href="./asset/img/tree.png"/> -->
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="880" height="460" viewBox="0 0 1050.5 520" class="head">
<g id="Group_26" data-name="Group 26" transform="translate(-168.5 -201.5)" width="990" height="540">
<g id="Group_25" data-name="Group 25">
<text id="d" transform="translate(990 600)" fill="#c1c1c1" font-size="80" font-family="Gelasio-Regular, Gelasio"><tspan x="-25.84" y="0">d</tspan></text>
<text id="Animals_to_Learne" data-name="Animals to Learne" transform="translate(702.5 577)" fill="#c1c1c1" font-size="80" font-family="Gelasio-Regular, Gelasio"><tspan x="-345.11" y="0">Animals </tspan><tspan y="0" font-size="20">TO</tspan><tspan y="0" xml:space="preserve"> Learne</tspan></text>
</g>
<g id="Group_24" data-name="Group 24">
<text id="e" transform="translate(284 430)" fill="#c1c1c1" font-size="170" font-family="Gelasio-Bold, Gelasio" font-weight="700"><tspan x="-64.907" y="0">E</tspan></text>
<line id="Line_11" data-name="Line 11" x2="685" transform="translate(168.5 371.5)" fill="none" stroke="#c2c2c2" stroke-width="2" stroke-dasharray="8"/>
<line id="Line_12" data-name="Line 12" y2="500" transform="translate(343.5 210)" fill="none" stroke="#c2c2c2" stroke-width="2" stroke-dasharray="8"/>
<text id="xplore_" data-name="xplore " transform="translate(349 460)" fill="#c2c2c2" font-size="150" font-family="Gelasio-Bold, Gelasio" font-weight="700"><tspan x="0" y="0">xplore</tspan><tspan y="0" font-size="90"> </tspan></text>
</g>
</g>
</svg>
<div class="desc">
<p>Animals have many specific physic you can find it. Every country
have animal such as iconic. you can search animal that you want. we would
give you many perspective, habitat, food animal, and ratio population
based on reset WWE.
</p>
</div>
<div class="scrollDown">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="25" viewBox="0 0 26.112 10.812" class="arrow">
<line id="Line_2" data-name="Line 2" y1="10" x2="13.919" transform="translate(11.901 0)" fill="none" stroke="#fff" stroke-width="2"/>
<line id="Line_3" data-name="Line 3" x2="12" y2="10" transform="translate(0.32 0)" fill="none" stroke="#fff" stroke-width="2"/>
</svg>
</div>
</div>
</div>
<img src="asset/img/tree.png" class="tree">
<div class="second-content">
<span class="line"></span>
<img src="./asset/img/sick.png" class="tiger-img">
<div class="capt">
<h1>Dangers</h1>
<span class="for">for</span>
<div class="sub-capt">
<h2>
Animals Population
</h2>
<p>
Many rare animal extinct, the reason cause human doesn't care about animal life Many rare animal extinct,
the reason cause human doesn't care about animal life Many rare animal extinct, the reason cause human doesn't
care about animals Many rare animal extinct, the reason cause human doesn't care about animal life
</p>
<button type="button" class="primary-btn"><a href="news.html">News</a></button>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="container-fluid footer">
<div class="row align-items-center footer-top py-4">
<div class="col-sm-2 logo middle">
<span>PA</span>ZUU
</div>
<div class="col-sm-5 middle">
<div class="list-icon">
<h3>Support</h3>
<img src="asset/Icon/wwf.png">
<img src="asset/Icon/stikom.png" style="width: 25px;">
<img src="asset/Icon/gsc.png">
<img src="asset/Icon/yabi.png">
</div>
</div>
<div class="col-sm-5 middle">
<div class="list-icon">
<h3>Source Products</h3>
<img src="asset/Icon/pexels.png">
<img src="asset/Icon/gFont.png">
<img src="asset/Icon/fontAwesome.png">
<img src="asset/Icon/w3.png">
</div>
</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row footer-bottom row-cols-2 row-cols-lg-4 px-5 py-4">
<div class="col-8 col-sm-4 pb-lg-0 pb-5">
<div class="about-field">
<h3>About Us</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt quos aliquid enim hic in maiores, culpa soluta eum? Quaerat alias, natus id obcaecati ex reprehenderit neque eum ipsa consequatur nam! </p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt quos aliquid enim hic in maiores, culpa soluta eum? Quaerat alias, natus id obcaecati ex reprehenderit neque eum ipsa consequatur nam!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt quos aliquid enim hic in maiores, culpa soluta eum?</p>
</div>
</div>
<div class="col col-sm-2">
<h3>Data Log</h3>
<ul><span>Animals</span>
<li><a href="#">Mamalia</a></li>
<li><a href="#">Reptile</a></li>
<li><a href="#">Pieces</a></li>
<li><a href="#">Amfibi</a></li>
</ul>
<ul><span>Habitat</span>
<li><a href="#">Africa</a></li>
<li><a href="#">North America</a></li>
<li><a href="#">Indonesia</a></li>
<li><a href="#">Australia</a></li>
</ul>
</div>
<div class="col col-sm-2 col-sm-4 pb-lg-0 pb-5 service-field">
<h3>Service</h3>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Contact</a></li>
<li><a href= "#">About Us</a></li>
</ul>
<h3>Developer</h3>
<p>I Komang Widnyana <br> FullStack</p>
<h3>Social Media</h3>
<a href="#"><img src="asset/Icon/twitter.png"></a>
<a href="#"><img src="asset/Icon/behance.png"></a>
<a href="#"><img src="asset/Icon/linkedin.png"></a>
<a href="#"><img src="asset/Icon/github.png"></a>
</div>
<div class="col-10 col-sm-4 signup-form">
<h2>Sign up</h2>
<p>please pick your email in this field to get more info between your email</p>
<form>
<input type="email" name="email" id="email" placeholder="email address">
<input type="password" name="pass" id="pass" placeholder="password">
<input type="submit" value="Sign Up">
</form>
</div>
</div>
<div class="row px-5 py-3 license justify-content-center">
<div class="col-9 col-lg-12">
<p>© 2019 Ikovid.ID, All right deserved</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="./js/home.js"></script>
</body>
</html>