This repository has been archived by the owner on Feb 23, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 135
/
Copy pathuiForPets.html
231 lines (202 loc) · 9.48 KB
/
uiForPets.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- My Css -->
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/animate.css">
<!-- <script src="https://kit.fontawesome.com/eb48c7dfa4.js" crossorigin="anonymous"></script> -->
<!-- My Js -->
<!-- <script src="assets/js/script.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Beranda</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navhead">
<div class="container">
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="assets/img/logo-nav.jpeg" alt="logo" height="40" width="45">
</a>
</nav>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto pr-5">
<a class="nav-link" href="#">Beranda</a>
<a class="nav-link" href="#">Jenis Perawatan</a>
<a class="nav-link" href="#">Makanan Hewan</a>
<a class="nav-link" href="#">Melatih Peliharaan</a>
<a class="nav-link" href="#">Kontak kita</a>
</div>
<a href="#" class="btn btn-outline-primary mr-2">Masuk</a>
<a href="#" class="btn btn-outline-warning">Daftar</a>
</div>
</div>
</nav>
<div class="jumbotron banner">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1> <b>Welcome</b> To Our <b>Website</b></h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, quos dolor quo cupiditate, voluptatibus recusandae a esse necessitatibus dignissimos laudantium, corporis quod repudiandae! Incidunt veritatis sapiente quae magnam alias aliquam nisi et tempora unde, harum possimus vitae, aut corrupti! A, eligendi neque veniam amet corrupti ea provident inventore ratione nihil!</p>
<hr class="col my-4">
<button class="btn btn-outline-secondary btn-md" id="btn">Learn More</button><br>
</div>
<div class="col-md-4">
<div class="landing animate__backInRight"></div>
</div>
</div>
</div>
</div>
<div class="parent">
<div class="container">
<div class="row c-1">
<div class="col-md-4">
<div class="white-cat wow animate__slideInLeft"></div>
</div>
<div class="col-lg-8">
<h3 class="text-center my-4" id="h3">Rawat peliharaan dengan baik</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, sunt provident. Deserunt laborum voluptate voluptatum temporibus in, voluptas quae recusandae itaque iusto excepturi consectetur unde numquam laboriosam aliquid facilis maiores?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam voluptates autem atque provident. Maxime vel quod hic sit ut quisquam, commodi dolorem, sapiente eaque consequuntur illum tempore ipsum officia.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md mt-4 mb-4">
<h3 class="text-center" id="h3">Jenis-jenis Perawatan</h3>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="row">
<div class="col-md">
<div class="card card-perawatan">
<img class="card-img-top" src="assets/img/dog-ilustrator.png" alt="gambar makanan">
<div class="card-body">
<p class="card-text">Some quick example </p>
</div>
</div>
</div>
<div class="col-md img-mid">
<div class="card card-perawatan">
<img class="card-img-top" src="assets/img/cute-cat.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example </p>
</div>
</div>
</div>
<div class="col-md">
<div class="card card-perawatan">
<img class="card-img-top" src="assets/img/dog-ilustrator.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="parent1">
<div class="container">
<div class="row">
<div class="col-md mt-4 mb-4">
<h3 class="text-center" id="h3">Makanan Sehat</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img class="card-img-top food wow animate__slideInLeft" src="assets/img/food.png" alt="Card image cap">
</div>
<div class="col-lg-8 content-1">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, sunt provident. Deserunt laborum voluptate voluptatum temporibus in, voluptas quae recusandae itaque iusto excepturi consectetur unde numquam laboriosam aliquid facilis maiores?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At quibusdam voluptates autem atque provident. Maxime vel quod hic sit ut quisquam, commodi dolorem, sapiente eaque consequuntur illum tempore ipsum officia.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium totam voluptatibus, ducimus illo praesentium optio, dolores inventore dicta earum distinctio dignissimos assumenda nisi. Animi quos doloremque ipsa corrupti, dolorem reiciendis.
</p>
</div>
</div>
</div>
</div>
<section id="contact" class="contact">
<div class="container">
<div class="row pt-4 mb-5">
<div class="col text-center">
<h3>Kontak Kita</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-4">
<div class="card text-white bg-primary mb-3 text-center">
<div class="card-body">
<h5 class="card-title">Kontak Kita</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">
<h1>Location</h1>
</li>
<li class="list-group-item">My Office</li>
<li class="list-group-item">Jl. Gang Langgar No. 45, Jakarta</li>
<li class="list-group-item">West Java, Indonesia</li>
</ul>
</div>
<div class="col-lg-6 form-kontak">
<form>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control" id="nama">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group">
<label for="telp">No Telp</label>
<input type="text" class="form-control" id="telp">
</div>
<div class="form-group">
<label for="nama">Pesan</label>
<textarea name="pesan" id="pesan" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary">Kirim Pesan!</button>
</form>
</div>
</div>
</div>
</section>
<nav class="footer" id="footer">
<div class="container">
<p>© Design By : Fadlie Ferdiyansah || 2020</p>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>