-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (141 loc) · 5.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gtropik</title>
<!-- css external -->
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet" />
</head>
<body>
<!-- Header -->
<header class="navbar-container">
<!-- Logo -->
<div class="logo">
<p>GTropik</p>
</div>
<!-- Hamburger Icon -->
<div class="hamburger-menu">
<div class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Navigation -->
<nav class="nav-list">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<!-- CTA Donasi -->
<div class="cta-donasi">
<a href="#">Donasi</a>
</div>
</header>
<!-- main -->
<main>
<!-- Hero Section-->
<section class="hero">
<div class="hero-content">
<!-- Text -->
<h1>Bergabunglah dalam Gerakan <br> Melestarikan Alam, Melestarikan Kehidupan di Nusantara</h1>
<p> Bersama-sama, mari kita lindungi kekayaan alam Indonesia agar tetap lestari untuk generasi
mendatang.</p>
<!-- button -->
<div class="hero-cta">
<a href="#">Ikuti Kami</a>
</div>
</div>
</section>
<!-- Partner -->
<aside>
<div class="partner">
<h2>Partner Kami</h2>
<div class="partner-list">
<div class="partner-item">
<img src="img/partner/google.png" alt="partner-1">
</div>
<div class="partner-item">
<img src="img/partner/dicoding.jpeg" alt="partner-2">
</div>
<div class="partner-item">
<img src="img/partner/menteri_kesehatan.png" alt="partner-3">
</div>
</div>
</div>
</aside>
<!-- Kegiatan Amal Section -->
<section class="kegiatan">
<h2>Kegiatan Amal</h2>
<div class="kegiatan-list">
<div class="kegiatan-item">
<img src="img/kegiatan/pohon.jpg" alt="kegiatan-1">
<h3>Penanaman Pohon</h3>
<p>Penanaman pohon di hutan lindung untuk mengurangi dampak pemanasan global.</p>
<button class="cta-button">Donasi Sekarang</button>
</div>
<div class="kegiatan-item">
<img src="img/kegiatan/makanan.jpg" alt="kegiatan-2">
<h3>Donasi Makanan</h3>
<p>Donasi makanan untuk masyarakat yang membutuhkan di daerah terpencil.</p>
<button class="cta-button">Donasi Sekarang</button>
</div>
<div class="kegiatan-item">
<img src="img/kegiatan/buku.jpg" alt="kegiatan-3">
<h3>Donasi Buku</h3>
<p>Donasi buku untuk anak-anak di daerah terpencil agar tetap bisa belajar.</p>
<button class="cta-button">Donasi Sekarang</button>
</div>
</div>
</section>
<!-- Tentang Kami Section -->
<article class="tentang-kami">
<div class="gambar">
<img src="img/tentang.jpg" alt="Tentang Kami">
</div>
<div class="teks">
<h2>Kenali GTropik <br> Komitmen Kami pada Kelestarian Alam Indonesia</h2>
<p>Kami merupakan platform yang berkomitmen untuk melestarikan alam Indonesia. Melalui artikel, sumber
daya, dan inspirasi, kami mengajak Anda untuk terlibat dalam gerakan pelestarian lingkungan.
Bergabunglah dengan kami dalam menjaga keindahan alam untuk masa depan yang lebih baik.</p>
<button class="cta-button">Baca Lebih Lanjut</button>
</div>
</article>
<!-- Hubungi kami -->
<section class="hubungi-kami">
<div class="konten">
<h2>Hubungi Kami</h2>
<p>Jangan ragu untuk menghubungi kami, tim dukungan kami akan menjawab semua pertanyaan Anda. Silakan
beri saran jika Anda memiliki. Terima kasih.</p>
<form class="form-hubungi">
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" required></textarea>
</div>
<button type="submit" class="cta-button">Kirim Pesan</button>
</form>
</div>
</section>
</main>
<!-- footer -->
<footer class="footer">
<p>© 2024 GTropik. All rights reserved.</p>
</footer>
</body>
</html>