-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (207 loc) · 17.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Primo" />
<title>BillionTrees Project</title><!-- HEAD_svelte-1t7ohez_START --><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><link rel="icon" type="image/png" sizes="32x32" href="https://jbbjtodsvhsgjappwopg.supabase.co/storage/v1/object/public/sites/prisaka/assets/logoipsum-277.svg"><link rel="preconnect" href="https://fonts.bunny.net"><meta name="description" content="We're on a mission to save the trees"><style>/* Reset & standardize default styles */
@import url("https://unpkg.com/@primo-app/[email protected]/reset.css") layer;
/* Design tokens (apply to components) */
:root {
/* Custom theme options */
--color-accent: #004700;
/* Base values */
--box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
--border-radius: 0;
--border-color: #e0e1e1;
}
/* Root element (use instead of `body`) */
#page {
font-family: system-ui, sans-serif;
color: #111;
line-height: 1.5;
font-size: 1.125rem;
background: white;
}
/* Elements */
.section-container {
max-width: 1200px;
margin: 0 auto;
padding: 5rem 2rem;
}
a.link {
line-height: 1.3;
border-bottom: 2px solid var(--color-accent);
transform: translateY(-2px); /* move link back into place */
transition: var(--transition, 0.1s border);
}
a.link:hover {
border-color: transparent;
}
.heading {
font-size: 2.5rem;
line-height: 1.15;
}
.button {
color: white;
background: var(--color-accent, rebeccapurple);
border-radius: 0;
padding: 18px 24px;
transition: var(--transition, 0.1s box-shadow);
border: 0;
}
/* reset */
.button:hover {
box-shadow: 0 0 0 2px var(--color-accent, rebeccapurple);
}
.button.inverted {
background: transparent;
color: var(--color-accent, rebeccapurple);
}
/* Content Section */
.content {
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
}
.content p {
margin-bottom: 1rem;
line-height: 1.5;
}
.content img {
width: 100%;
margin: 2rem 0;
box-shadow: var(--box-shadow);
border-radius: var(--border-radius);
}
.content a.link {
line-height: 1.3;
font-weight: 500;
border-bottom: 2px solid var(--color-accent);
transform: translateY(-2px); /* move link back into place */
transition: var(--transition, 0.1s border);
}
.content a.link:hover {
border-color: transparent;
}
.content h1 {
font-size: 3rem;
font-weight: 500;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.content h2 {
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 1rem;
}
.content h3 {
font-size: 2rem;
font-weight: 500;
margin-bottom: 1rem;
}
.content ul {
list-style: disc;
padding: 0.5rem 0;
padding-left: 1.25rem;
}
.content ol {
list-style: decimal;
padding: 0.5rem 0;
padding-left: 1.25rem;
}
.content blockquote {
padding: 2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-left: 5px solid var(--color-accent);
}
</style><!-- HEAD_svelte-1t7ohez_END -->
<style>header.svelte-19bt6nw.svelte-19bt6nw{color:white;background-size:cover;display:grid;gap:20rem}.section-container.svelte-19bt6nw.svelte-19bt6nw{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:1rem;padding-bottom:1rem}.logo.svelte-19bt6nw.svelte-19bt6nw{font-size:1.5rem;font-weight:600;line-height:1.2}.desktop-nav.svelte-19bt6nw.svelte-19bt6nw{display:none;align-items:center;justify-content:space-between;width:100%}.desktop-nav.svelte-19bt6nw nav.svelte-19bt6nw{display:flex;gap:2rem}.desktop-nav.svelte-19bt6nw nav a.link.svelte-19bt6nw{border-color:transparent;transition:border-color 0.1s;font-size:0.95rem}.desktop-nav.svelte-19bt6nw nav a.link.svelte-19bt6nw:hover,.desktop-nav.svelte-19bt6nw nav a.link .active.svelte-19bt6nw{border-color:initial}@media(min-width: 800px){.desktop-nav.svelte-19bt6nw.svelte-19bt6nw{display:flex
}}.mobile-nav.svelte-19bt6nw.svelte-19bt6nw{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:500}@media(min-width: 800px){.mobile-nav.svelte-19bt6nw.svelte-19bt6nw{display:none
}}.headline.svelte-19bt6nw.svelte-19bt6nw{font-size:clamp(2rem, 10vw, 3.5rem);max-width:800px;padding-bottom:2rem;line-height:1.1}#popup.svelte-19bt6nw.svelte-19bt6nw{color:#222;font-size:1.25rem;display:grid;gap:1rem;position:absolute;text-align:center;background-color:var(--background-color, white);box-shadow:var(--box-shadow, 0px 4px 30px rgba(0, 0, 0, 0.1));border-radius:var(--border-radius);inset:0.5rem;bottom:initial;padding:2rem;z-index:1}#popup.svelte-19bt6nw button#close.svelte-19bt6nw{position:absolute;right:1rem;top:1rem}
.section-container.svelte-1qrna1o.svelte-1qrna1o{display:grid;gap:3rem}@media(min-width: 900px){.section-container.svelte-1qrna1o.svelte-1qrna1o{grid-template-columns:1.5fr 1fr;gap:8rem
}}header.svelte-1qrna1o.svelte-1qrna1o{display:flex;flex-direction:column;place-items:start start;gap:1.5rem}header.svelte-1qrna1o .heading.svelte-1qrna1o{line-height:1.1;margin-bottom:1rem}.content.svelte-1qrna1o.svelte-1qrna1o{padding:0;line-height:1.75}
section.svelte-1qwgcet.svelte-1qwgcet{background:#2b312b;color:white}.teasers.svelte-1qwgcet.svelte-1qwgcet{display:grid;gap:6rem}.teaser.svelte-1qwgcet.svelte-1qwgcet{display:grid;gap:1rem}.teaser.svelte-1qwgcet img.svelte-1qwgcet{width:100%;border-radius:var(--border-radius)}.teaser.svelte-1qwgcet .content-section.svelte-1qwgcet{display:grid;place-items:flex-start;padding:0}.teaser.svelte-1qwgcet .content-section .heading.svelte-1qwgcet{margin-bottom:1.25rem}.teaser.svelte-1qwgcet .content-section .body.svelte-1qwgcet{margin-bottom:2rem}.teaser.svelte-1qwgcet .content-section a.button.svelte-1qwgcet{background-color:transparent;border:1.5px solid white}.teaser.svelte-1qwgcet .content-section a.button.svelte-1qwgcet:hover{box-shadow:0 0 0 2px white}@media(min-width: 800px){.teaser.svelte-1qwgcet.svelte-1qwgcet{grid-template-columns:1fr 1fr;place-items:center;gap:4rem
/* switch direction for even items */
}.teaser.svelte-1qwgcet:nth-child(odd) img.svelte-1qwgcet{grid-row:1;grid-column:2}.teaser.svelte-1qwgcet:nth-child(even) img.svelte-1qwgcet{grid-row:1;grid-column:1}}@media(min-width: 1200px){section.svelte-1qwgcet.svelte-1qwgcet{gap:6rem}.teaser.svelte-1qwgcet.svelte-1qwgcet{gap:10rem}.heading.svelte-1qwgcet.svelte-1qwgcet{margin-bottom:5rem}.body.svelte-1qwgcet.svelte-1qwgcet{margin-bottom:2.5rem}}
.section-container.svelte-ja2udn{padding-block:6rem;display:grid;gap:1rem}
img.svelte-3et4p2{width:100%}
.section-container.svelte-1twigpw.svelte-1twigpw{display:grid;gap:3rem}@media(min-width: 800px){.section-container.svelte-1twigpw.svelte-1twigpw{grid-template-columns:2fr 3fr;gap:20rem
}}.body.svelte-1twigpw.svelte-1twigpw{display:grid;place-content:flex-start;gap:1rem;padding:0}.body.svelte-1twigpw .social-links.svelte-1twigpw{display:grid;gap:1.5rem}.body.svelte-1twigpw .social-links .item.svelte-1twigpw{display:grid;line-height:1.6}.body.svelte-1twigpw .social-links .item .label.svelte-1twigpw{font-weight:600}.body.svelte-1twigpw .social-links .item a.svelte-1twigpw{display:flex;align-items:center;gap:0.75rem}form.svelte-1twigpw.svelte-1twigpw{display:grid;gap:1rem}form.svelte-1twigpw label.svelte-1twigpw{display:grid;gap:0.25rem}form.svelte-1twigpw label span.svelte-1twigpw{font-size:0.75rem;font-weight:500}form.svelte-1twigpw label input.svelte-1twigpw,form.svelte-1twigpw label textarea.svelte-1twigpw{padding:0.5rem;outline-color:transparent;transition:var(--transition, 0.1s outline-color);border:1.5px solid var(--border-color, #eee);border-radius:2px;font-size:0.9rem;font-weight:300}form.svelte-1twigpw label input.svelte-1twigpw:focus,form.svelte-1twigpw label textarea.svelte-1twigpw:focus{outline-color:var(--color-accent, rebeccapurple)}form.svelte-1twigpw .button.svelte-1twigpw{margin-top:1rem;place-self:start}
footer.svelte-u1zmy0.svelte-u1zmy0{background:#2b312b;color:white}.section-container.svelte-u1zmy0.svelte-u1zmy0{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4rem}.content.svelte-u1zmy0.svelte-u1zmy0{margin:initial;padding:0;line-height:1.1}.nav-items.svelte-u1zmy0.svelte-u1zmy0{display:flex;flex-wrap:wrap;gap:4rem}.nav-items.svelte-u1zmy0 ul.svelte-u1zmy0{display:grid;gap:0.5rem}.nav-items.svelte-u1zmy0 ul .link.svelte-u1zmy0{border-bottom:2px solid white}.nav-items.svelte-u1zmy0 ul .link.svelte-u1zmy0:hover{border-color:transparent}.nav-items.svelte-u1zmy0 h3.svelte-u1zmy0{font-weight:500;font-size:1.5rem;margin-bottom:1rem}</style>
</head>
<body id="page">
<div class="section" id="section-a2378e47"><header style="background-image:url('https://images.unsplash.com/photo-1669569243790-1c5c614e5943?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80')" role="img" aria-label="" class="svelte-19bt6nw"><div class="section-container svelte-19bt6nw"><div class="desktop-nav svelte-19bt6nw"><a href="/" class="logo svelte-19bt6nw">IR-EMPOWER</a>
<nav class="svelte-19bt6nw"><a class="link svelte-19bt6nw" href="/about">About</a><a class="link svelte-19bt6nw" href="/mission">Mission</a><a class="link svelte-19bt6nw" href="/team">Team</a><a class="link svelte-19bt6nw" href="/blog">Blog</a></nav></div>
<div class="mobile-nav svelte-19bt6nw"><a href="/" class="logo svelte-19bt6nw">IR-EMPOWER</a>
<button id="open" aria-label="Open mobile navigation"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" width="30" height="30" viewBox="0 0 24 24" class="iconify iconify--eva"><!-- HTML_TAG_START --><rect width="18" height="2" x="3" y="11" fill="currentColor" rx=".95" ry=".95"/><rect width="18" height="2" x="3" y="16" fill="currentColor" rx=".95" ry=".95"/><rect width="18" height="2" x="3" y="6" fill="currentColor" rx=".95" ry=".95"/><!-- HTML_TAG_END --></svg></button>
</div></div>
<div class="section-container svelte-19bt6nw"><h1 class="headline svelte-19bt6nw">We're helping to create a Thermo-Physical Properties Community</h1></div></header></div>
<div class="section" id="section-03966835"><section class="section-container svelte-1qrna1o"><header class="svelte-1qrna1o"><h2 class="heading svelte-1qrna1o">Supporting innovative methods to save forests and jungles.</h2>
<a href="/" class="button">Our Mission</a></header>
<div class="content svelte-1qrna1o"><!-- HTML_TAG_START --><p>The BillionTrees Project was initiated in 2020 to help further our mission to protect, preserve and restore the natural environment of our nation’s major rivers and their watersheds. </p><p>Our mission is to not only clean up the river ways but to also enhance the watershed by planting native trees and removing invasive plants.</p><!-- HTML_TAG_END --></div></section></div>
<div class="section" id="section-277833ac"><section class="svelte-1qwgcet"><div class="section-container svelte-1qwgcet"><div class="teasers svelte-1qwgcet"><div class="teaser svelte-1qwgcet"><img src="https://images.unsplash.com/photo-1668605152742-e9718104d281?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="" class="svelte-1qwgcet">
<div class="content-section svelte-1qwgcet"><h2 class="heading svelte-1qwgcet">Get Involved</h2>
<div class="body svelte-1qwgcet"><!-- HTML_TAG_START --><p>Aute Lorem duis mollit laborum eu laborum magna deserunt. Ex reprehenderit Lorem do veniam et mollit officia duis excepteur qui consequat est esse et sit.</p><!-- HTML_TAG_END --></div>
<a class="button svelte-1qwgcet" href="/">Learn More
</a></div>
</div><div class="teaser svelte-1qwgcet"><img src="https://images.unsplash.com/photo-1668850177027-b13821929543?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="" class="svelte-1qwgcet">
<div class="content-section svelte-1qwgcet"><h2 class="heading svelte-1qwgcet">Community Update</h2>
<div class="body svelte-1qwgcet"><!-- HTML_TAG_START --><p>Veniam labore proident do non quis do. Aliquip et in commodo sit ex id aliqua proident commodo laboris laboris et laboris irure cupidatat.</p><!-- HTML_TAG_END --></div>
<a class="button svelte-1qwgcet" href="/">Learn More
</a></div>
</div><div class="teaser svelte-1qwgcet"><img src="https://images.unsplash.com/photo-1644840379571-2a973eee0726?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="" class="svelte-1qwgcet">
<div class="content-section svelte-1qwgcet"><h2 class="heading svelte-1qwgcet">How to plant trees in your neighborhood</h2>
<div class="body svelte-1qwgcet"><!-- HTML_TAG_START --><p>Reprehenderit cillum dolor magna excepteur ea Lorem magna. Veniam ea qui voluptate sint dolore commodo enim incididunt enim.</p><!-- HTML_TAG_END --></div>
<a class="button svelte-1qwgcet" href="/">Learn More
</a></div>
</div></div></div></section></div>
<div class="section" id="section-eaa554f0"><aside class="section-container svelte-ja2udn"><h3 class="heading"><!-- HTML_TAG_START --><p>"To be without trees would, in the most literal way, to be without our roots."</p><!-- HTML_TAG_END --></h3>
<span class="attribution">- Richard Mabey</span></aside></div>
<div class="section" id="section-80ff03b5"><div class="section-container svelte-3et4p2"><feature><img src="https://images.unsplash.com/photo-1513185727240-e54323adb7f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1773&q=80" alt="" class="svelte-3et4p2"></feature></div></div>
<div class="section" id="section-5523ec0b"><section class="section-container svelte-1twigpw"><div class="body svelte-1twigpw"><h2 class="heading">Contact Us</h2>
<div class="description"><!-- HTML_TAG_START -->We'd love to hear from you.<!-- HTML_TAG_END --></div>
<div class="social-links svelte-1twigpw"><div class="item svelte-1twigpw"><span class="label svelte-1twigpw">Email</span>
<a href="/" class="svelte-1twigpw">[email protected]</a>
</div><div class="item svelte-1twigpw"><span class="label svelte-1twigpw">Phone</span>
<a href="/" class="svelte-1twigpw">tel:123-223-2321</a>
</div></div></div>
<form class="svelte-1twigpw"><label class="svelte-1twigpw"><span class="svelte-1twigpw">Some name</span>
<input type="text" placeholder="some name" class="svelte-1twigpw">
</label><label class="svelte-1twigpw"><span class="svelte-1twigpw">Email</span>
<input type="email" placeholder="[email protected]" class="svelte-1twigpw">
</label><label class="svelte-1twigpw"><span class="svelte-1twigpw">Message</span>
<textarea placeholder="Tell us how you heard about us...." class="svelte-1twigpw"></textarea>
</label>
<button class="button svelte-1twigpw" type="submit">Submit</button></form></section></div>
<div class="section" id="section-86c386a8"><footer class="svelte-u1zmy0"><div class="section-container svelte-u1zmy0"><div class="content svelte-u1zmy0"><!-- HTML_TAG_START --><h3>BillionTrees <br></h3><p>321 Something St. Jackson, AL 20332</p><!-- HTML_TAG_END --></div>
<div class="nav-items svelte-u1zmy0"><nav><h3 class="svelte-u1zmy0">About Us</h3>
<ul class="svelte-u1zmy0"><li><a class="link svelte-u1zmy0" href="/">blog</a>
</li><li><a class="link svelte-u1zmy0" href="/">consectetur</a>
</li></ul>
</nav><nav><h3 class="svelte-u1zmy0">Get Involved</h3>
<ul class="svelte-u1zmy0"><li><a class="link svelte-u1zmy0" href="/">qui</a>
</li><li><a class="link svelte-u1zmy0" href="/">ex</a>
</li></ul>
</nav></div></div></footer></div>
<script type="module">
import('/_symbols/08088715-f39d-443a-8bd1-79d055ea7e2e.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-5523ec0b'),
hydrate: true,
props: {"heading":"Contact Us","subheading":"We'd love to hear from you.","social":[{"link":{"url":"/","label":"[email protected]"},"label":"Email"},{"link":{"url":"/","label":"tel:123-223-2321"},"label":"Phone"}],"inputs":[{"type":"text","label":"Some name","placeholder":"some name"},{"type":"email","label":"Email","placeholder":"[email protected]"},{"type":"textarea","label":"Message","placeholder":"Tell us how you heard about us...."}]}
})
})
.catch(e => console.error(e))
import('/_symbols/b06c0c52-dd6b-4d73-add6-912ff87b58e5.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-a2378e47'),
hydrate: true,
props: {"background":{"alt":"","src":"https://images.unsplash.com/photo-1669569243790-1c5c614e5943?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80","url":"https://images.unsplash.com/photo-1669569243790-1c5c614e5943?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80","size":null},"headline":"We're helping to create a Thermo-Physical Properties Community","logo":{"image":{"alt":"","src":"","url":"","size":null},"title":"IR-EMPOWER"},"site_nav":[{"link":{"url":"/about","label":"About","active":false}},{"link":{"url":"/mission","label":"Mission","active":false}},{"link":{"url":"/team","label":"Team"}},{"link":{"url":"/blog","label":"Blog"}}]}
})
})
.catch(e => console.error(e))
</script>
</body>
</html>