-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
242 lines (238 loc) · 12.8 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
234
235
236
237
238
239
240
241
242
<!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">
<link rel="icon" href="assets/gambar/logoGogreen.png" type="image/png">
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="/assets/bootstrap-4.4.1-dist/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="assets/gambar/gogreen.png" width="120" height="50" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mx-lg-auto">
<li class="nav-item">
<a class="nav-link active" href="#"> <i class="fa fa-home"></i> Home </a>
</li>
<li>
<a class="nav-link" href="#news"><i class="far fa-newspaper"></i> News</a>
</li>
<li>
<a class="nav-link" href="profile.html"><i class="fas fa-id-card"></i> Profile</a>
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/gambar/alam2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/gambar/bumi_zag.png" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section class="subsBlok">
<h4 style="color: aliceblue;">Subscribe to our newsletter to be the first to find out about our latest
informations.</h4>
<form class="form-inline" name="muform">
<input id="emailSubs" class="form-control mr-sm-5" id="email" type="email" placeholder="Your Email Address">
<input id="subs" value="Subscribe" class="btn btn-outline-success my-2 my-sm-0" type="button">
</form>
</section>
<section class="subsBlok" id="news">
<div class="container-lg">
<div class="row">
<div class="col-sm-4">
<div class="card-body">
<img class="card-img-top" src="assets/gambar/smallTree.png" alt="Growt Plant" height="200px">
<h5 class="card-title">PUSPA TREE</h5>
<p class="card-text text-justify">Puspa, seru, atau medang gatal (Schima wallichii) adalah
sejenis pohon penghasil kayu pertukangan berkualitas sedang. Pohon ini termasuk ke dalam
keluarga teh (Theaceae), dan menyebar luas mulai dari Nepal, melalui Asia Tenggara, hingga
ke Papua Nugini. Disebut medang gatal karena pohon ini memiliki lapisan semacam miang di
bawah pepagannya, yang keluar berhamburan ketika digergaji.</p>
<a href="growTree.html" class="btn btn-primary">detail news</a>
</div>
</div>
<div class="col-sm-4">
<div class="card-body">
<img class="card-img-top" src="assets/gambar/recyle.jpg" alt="Growt Plant" height="200px">
<h5 class="card-title">RECYCLE</h5>
<p class="card-text text-justify">Daur ulang adalah proses untuk menjadikan suatu bahan bekas
menjadi bahan baru dengan tujuan mencegah adanya sampah yang sebenarnya dapat menjadi
sesuatu yang berguna, mengurangi penggunaan bahan baku yang baru, mengurangi penggunaan
energi, mengurangi polusi, kerusakan lahan, dan emisi gas rumah kaca jika dibandingkan
dengan proses pembuatan barang baru.</p>
<a href="recyle.html" class="btn btn-primary">detail news</a>
</div>
</div>
<div class="col-sm-4">
<div class="card-body">
<img class="card-img-top" src="assets/gambar/water.png" alt="Growt Plant" height="200px">
<h5 class="card-title">LESS WATER</h5>
<p class="card-text text-justify">
Sahabat, tahukah pada 2025 sebanyak 321 juta jiwa penduduk Indonesia diprediksi akan sulit
mendapatkan air bersih? (Forum Air Dunia II/World Water Forum di Den Haag, Maret, 2000).
Kebutuhan air tidak hanya untuk menjaga kesehatan diri, namun beberapa kegiatan sehari-hari
seperti mencuci, memasak, membersihkan diri juga membutuhkan air dalam penggunaannya.
</p>
<a href="lesswater.html" class="btn btn-primary">detail news</a>
</div>
</div>
</div>
</div>
</section>
<section class="visi-misi" id="visi-misi">
<div class="container">
<p class="text-center text-uppercase judul text-white">Our Vission & Mission</p>
<div class="row">
<div class="col-lg-6">
<img src="assets/gambar/undraw_profile_data_mk6k.svg" alt="gambarTree" class="img-thumbnail">
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<div class="card text-white">
<div class="card-body">
<h4 class="card-title">Vission</h4>
<p class="card-text">
Growing knowledge while public awareness will consider the importance of nature.
</p>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card text-white">
<div class="card-body">
<h4 class="card-title">Mission</h4>
<p class="card-text">
1. Realizing a high quality of human life, advanced and prosperous. <br>
2. Foster a love of the motherland and the environment. <br>
3. Participate in saving water, energy, etc.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="footer bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<h5 class="card-title text-uppercase text-white"
style="border-bottom: 2px solid black; padding: 5px;">
Latest NEWS
</h5>
<p class="card-text">
<ul class="text-white list-group">
<a href="growTree.html">
<li class="list-group-item">PUSPA TREE</li>
</a>
<a href="recyle.html">
<li class="list-group-item">RECYCLE</li>
</a>
<a href="lesswater.html">
<li class="list-group-item">LESS WATER</li>
</a>
</ul>
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body ">
<h5 class="card-title text-uppercase text-white"
style="border-bottom: 2px solid black; padding: 5px;">
Partners
</h5>
<p class="card-text">
<ul class="text-white list-group">
<li class="list-group-item">Kementrian LHK</li>
<li class="list-group-item">WALHI</li>
<li class="list-group-item">KEHATI</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<h5 class="card-title text-uppercase text-white"
style="border-bottom: 2px solid black; padding: 5px;">
Media Social
</h5>
<p class="card-text">
<ul class="text-white list-group">
<a href="https://www.instagram.com/">
<li class="list-group-item"><i class="fab fa-instagram"></i> Instagram</li>
</a>
<a href="https://www.Facebook.com">
<li class="list-group-item"><i class="fab fa-facebook"></i> Facebook</li>
</a>
<a href="https://www.whatsapp.com">
<li class="list-group-item"><i class="fab fa-whatsapp"></i> Whatsap</li>
</a>
</ul>
</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<h5 class="card-title text-uppercase text-white"
style="border-bottom: 2px solid black; padding: 5px;">
Our Location
</h5>
<p class="card-text text-white" style="font-size: 14px;"><i
class="fas fa-map-marked-alt"></i>l. Raya Kb. Jeruk
No.27, RT.2/RW.9, Kb. Jeruk, Kec. Kb. Jeruk, Kota Jakarta Barat, Daerah Khusus Ibukota
Jakarta 11530</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="assets/bootstrap-4.4.1-dist/js/jquery-3.4.1.slim.min.js"></script>
<script src="assets/bootstrap-4.4.1-dist/js/popper.min.js"></script>
<script src="assets/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>