-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage_tailwind.html
180 lines (163 loc) · 13.7 KB
/
homepage_tailwind.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
<!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>Black Gold homepage</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="style.css" rel="stylesheet">
</head>
<style>
</style>
<body>
<!-- Start of Nav Bar -->
<nav class="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div class="flex flex-col max-md:w-full">
<img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=100 100w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=200 200w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=400 400w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=800 800w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets/TEMP/f850c52f-1dac-4249-a69c-ad3e8642a492?apiKey=8690f09fced7424781468a4d7b2afdd1&"class="aspect-[1.35] object-cover object-center w-[173px] overflow-hidden max-md:mt-12" />
</div>
<div class="mb-4 flex items-center justify-center">
<div
class="inline-flex rounded-md transition duration-150 ease-in-out"
role="group">
<div class="inline-flex" role="group" aria-label="Button group">
<button class="h-10 px-5 text-black-700 transition-colors duration-150 bg-stone-200 rounded-l-lg active:text-amber-500 hover:underline ">Home</button>
<button class="h-10 px-5 text-black-700 transition-colors duration-150 bg-stone-200 active:text-amber-500 hover:underline">Resources & Guides</button>
<button class="h-10 px-5 text-black-700 transition-colors duration-150 bg-stone-200 active:text-amber-500 hover:underline">Communitys</button>
<button class="h-10 px-5 text-black-700 transition-colors duration-150 bg-stone-200 active:text-amber-500 hover:underline">Events</button>
<button class="h-10 px-5 text-black-700 transition-colors duration-150 bg-stone-200 active:text-amber-500 hover:underline">Contact</button>
<button class="h-10 px-5 text-black-700 transition-colors duration-150 bg-stone-200 active:text-amber-500 hover:underline rounded-r-lg ">Right</button>
</div>
</div>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
<a href="#" aria-label="Login">Login</a>
</button>
</div>
</nav>
<!-- End of Nav Bar -->
<!-- Start of Black Gold Jumbotron -->
<div class="mx-auto max-w-screen-xl lg:py-16">
<div class="bg-gray-50 dark:bg-gray-800 border border-yellow-700 border-4 dark:border-gray-700 rounded-lg p-2 md:p-12 mb-8">
<div class="gap-5 flex max-md:flex-col max-md:items-stretch max-md:gap-0">
<div class="flex flex-col items-stretch w-[43%] max-md:w-full">
<div class="flex flex-col my-auto max-md:max-w-full max-md:mt-12">
<h1 class="justify-center text-yellow-400 text-center text-9xl font-bold leading-[112px] mt-4 max-md:max-w-full max-md:text-4xl">
<span class="text-black">Black </span><span class="text-amber-500">Gold</span>
</h1>
<h3 class="justify-center text-black text-center text-3xl font-bold leading-[200%] max-w-[487px] max-md:text-2xl">
4520 contributors
</h3>
<h3 class="justify-center text-black text-center text-3xl font-bold leading-[200%] max-md:text-2xl">
52 communities
</h3>
</div>
</div>
<div class="flex flex-col items-stretch w-[57%] max-md:w-full">
<div class="flex-col overflow-hidden relative flex min-h-[520px] grow pl-5 pb-10 max-md:max-w-full">
<img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=100 100w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=200 200w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=400 400w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=800 800w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets/TEMP/de302a7e-1d81-4de9-8638-3023b4e4405e?apiKey=8690f09fced7424781468a4d7b2afdd1&"class="absolute h-95 w-95 align-middle object-cover object-center" />
</div>
</div>
<div class="relative bg-emerald-700 max-w-full items-start gap-0 -mr-12 -mt-3.5 mb-80 pt-3 px-5 rounded-full">
<img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=100 100w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=200 200w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=400 400w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=800 800w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets/TEMP/0f20ca92-62c0-438d-a375-319c65aa4105?apiKey=8690f09fced7424781468a4d7b2afdd1&"class="aspect-[0.88] object-cover object-center justify-center items-center overflow-hidden shrink-0" />
<div class="text-white text-base font-bold leading-[150%]">
Donate your <br />Food Scraps
</div>
</div>
</div>
<div class="justify-center text-black text-3xl leading-[125%] self-center max-w-[1563px] ml-2 mb-1 max-md:max-w-full">
At BlackGold, we're dedicated to Singapore's 30 by 30 food security plan by promoting sustainable agri-food practices. Our community-driven composting program reduces food waste, encourages responsible consumption, and boosts environmental sustainability. We connect and support Singaporeans, aiming to transform food waste into valuable compost instead of contributing to landfill greenhouse gases. Join us in making a difference for Singapore's food security and the environment - discover how to turn food waste into compost today!
</div>
</div>
</div>
<!-- End of Black Gold Jumbotron -->
<!-- Start of What impact can I make?-->
<div class="container p-5">
<h1 class="text-black text-center text-8xl font-bold leading-[37.5%] tracking-tighter self-center mt-16 max-md:max-w-full max-md:text-4xl">
What Impact can I make?
</h1>
</div>
<!-- Grid to Hold Cards -->
<div class="grid grid-cols-3 gap-1 pt-5 place-items-center">
<!-- Card 1 - Individuals -->
<div class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md border border-yellow-700">
<div class="p-6">
<h3 class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
Individual
</h3>
<p class="block font-sans text-base font-bold leading-relaxed text-inherit antialiased">
I'm just looking to try out composting within my household and learning more about the environment!
</p>
</div>
<div class="p-6 pt-0">
<button
class="select-none rounded-lg py-3 px-6 text-left uppercase align-middle font-sans text-xs font-bold uppercase text-black-700 shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none "
type="button"
data-ripple-light="true">
<a href="#">See <br>More</a>
</button>
</div>
<div class="relative mx-4 -mt-6 h-56 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40">
<img
src="https://cdn.builder.io/api/v1/image/assets/TEMP/44c103a9-8581-45d4-a467-c8ef5f0113ba?apiKey=8690f09fced7424781468a4d7b2afdd1&width=100"
alt="img-blur-shadow"
layout="fill"/>
</div>
</div>
<!--End of Card 1 -->
<!-- Card 2 - Community -->
<div class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md border border-yellow-700">
<div class="p-6">
<h3 class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
Community
</h3>
<p class="block font-sans text-base font-bold leading-relaxed text-inherit antialiased">
I want to join the larger composting community to promote the movement in Singapore!
</p>
</div>
<div class="p-6 pt-0">
<button
class="select-none rounded-lg py-3 px-6 text-left uppercase align-middle font-sans text-xs font-bold uppercase text-black-700 shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none "
type="button"
data-ripple-light="true">
<a href="#">See <br>More</a>
</button>
</div>
<div class="relative mx-4 -mt-6 h-56 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40">
<img
src="https://cdn.builder.io/api/v1/image/assets/TEMP/44c103a9-8581-45d4-a467-c8ef5f0113ba?apiKey=8690f09fced7424781468a4d7b2afdd1&width=100"
alt="img-blur-shadow"
layout="fill"/>
</div>
</div>
<!--End of Card 2 -->
<!-- Card 3 - Contributor -->
<div class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md border border-yellow-700">
<div class="p-6">
<h3 class="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-blue-gray-900 antialiased">
Contributor
</h3>
<p class="block font-sans text-base font-bold leading-relaxed text-inherit antialiased">
I don't have time to contribute actively, but I have food waste to donate to the movement!
</p>
</div>
<div class="p-6 pt-0">
<button
class="select-none rounded-lg py-3 px-6 text-left uppercase align-middle font-sans text-xs font-bold uppercase text-black-700 shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none "
type="button"
data-ripple-light="true">
<a href="#">See <br>More</a>
</button>
</div>
<div class="relative mx-4 -mt-6 h-56 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40">
<img
src="https://cdn.builder.io/api/v1/image/assets/TEMP/44c103a9-8581-45d4-a467-c8ef5f0113ba?apiKey=8690f09fced7424781468a4d7b2afdd1&width=100"
alt="img-blur-shadow"
layout="fill"/>
</div>
</div>
<!--End of Card 3 - Contributor -->
</div>
<!-- End of what imapct can I make?-->
</body>