-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNet Zero-Sophie's Work Mac.html
192 lines (171 loc) · 16.5 KB
/
Net Zero-Sophie's Work Mac.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
<!doctype html>
<html>
<head>
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Net Zero Scilly</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
.underline {
text-decoration-color: #bcdbaa;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 10px;
text-decoration-style: dotted;
}
body {
font-family: "Poppins" !important;
}
</style>
<body>
<!-- hero section start -->
<header class="bg-gradient-to-b from-[#54c0a1] -14% to-[#bcdbaa] 100%">
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Net Zero Scilly</span>
<div class="lg:flex lg:gap-x-12">
<a href="#the-islands-anchor" class="text-sm/6 font-semibold text-white underline hover:text-lime-200">The Islands</a>
<a href="#key-facts-anchor" class="text-sm/6 font-semibold text-white underline hover:text-lime-200">Key Facts</a>
<a href="#the-story-anchor" class="text-sm/6 font-semibold text-white underline hover:text-lime-200">The Story</a>
<a href="#the-people-anchor" class="text-sm/6 font-semibold text-white underline hover:text-lime-200">The People</a>
</div>
</nav>
<div class="grid lg:grid-cols-2 sm:grid-cols-1 gap-2 py-24 sm:py-32">
<div class="col-span-1 mx-auto max-w-7xl px-6 md:px-5 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-5xl font-semibold tracking-wide text-white sm:text-7xl">Net Zero Scilly</h2>
<p class="mt-9 text-pretty text-lg font-light text-white sm:text-l/8">Nested just beyond the tip of Cornwall in the southwest of the UK, the Isles of Scilly are a true hidden gem, providing a distinctive and beautiful enviroment for <strong>advancing net zero innovation</strong>. Though linked to the mainland, their remote character created a perfect setting for <strong>trialling smart local energy systems</strong>.
<p class="mt-8 text-pretty text-lg font-light text-white sm:text-l/8">With the community relying on a single primary substation, these islands offer a unique opportunity to test <strong>cutting edge energy solutions</strong> in a controlled, yet isolated, setting.</p>
</div>
</div>
<div class="pl-8">
<video class="drop-shadow-md h-80 mt-20 bg-white" controls>
<source src="/docs/videos/flowbite.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</header>
<!-- the islands start -->
<div class="bg-white py-24 md:py-5">
<div class="mx-auto max-w-7xl px-7 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<div class="mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 text-justify font-light">
<div>
<!-- map-->
<image class="max-w-lg pb-10" src="images/New IOS map.png"></image>
</div>
<div class="py-20">
<h1 id="the-islands-anchor" class="underline pl-60 pb-10 text-2xl">The Islands</h1>
<p>The stunning Isles of Scilly is home to around 2,300 residents, but during the high tourist months, the popluation doubles or even triples as visitors flock to experience the magic of island life. St Mary's, the biggest of the islands, not only hosts most of the community but also connects to mainland Cornwall through passenger flight, boat and via a 33kV undersea cable, delivering power to the islands' original diesal power station, which now serves as a backup supply.</p>
<p class="mt-8 pb-10">In recent years, the islands have <strong>embraced renewable energy</strong>, with solar power <strong>making strides toward a sustainable future</strong>. However, the islands still rely on imports for much of their energy, food, and goods, with a growing number of local businesses proudly offering unique products and services. A comprehensive energy plan developed in 2016 outlines some options for the islands' sustainable future in detail.</p>
</div>
</div>
</div>
</div>
<!-- key facts start -->
<dl id="key-facts-anchor" class="pl-10 pr-10 mx-auto grid grid-cols-1 gap-px bg-emerald-500/5 sm:grid-cols-2 lg:grid-cols-5">
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-wider inline-block text-emerald-600 bg-clip-text">23gwH <dt class="text-s font-light text-gray-700">of electricity used per year</dt><img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 1 net zero.png" alt="socket" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-wide inline-block text-emerald-600 bg-clip-text">2.5MW <dt class="text-md font-light text-gray-700">typical daily demand</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 2 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-wide inline-block text-emerald-600 bg-clip-text">5MW <dt class="text-md w-full font-light text-gray-700">peak demand</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 3 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-wide inline-block text-emerald-600 bg-clip-text">Short air links<dt class="text-md font-light text-gray-700">for passengers and post</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 4 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-wide inline-block text-emerald-600 bg-clip-text">Sea links <dt class="text-md font-light text-gray-700">for freight and passengers</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 5 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
</dl>
</div>
<!-- the story start -->
<div class="bg-white pb-10">
<div class="pb-10 mx-auto max-w-7xl px-7 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<div class="mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 text-justify font-light">
<div class="py-20">
<h1 id="the-story-anchor" class="underline pl-60 pb-10 text-2xl">The Story</h1>
<p>In addition to its rich heritage, the islands boast a recent history of innovation projects, creating the <strong>perfect ecosystem of assets</strong> for developing and showcasing new initiatives. GO-EV is the islands' flagship projet, offering a car and van sharing scheme with electric vehicles powered by 10 vehicle-to-grid chrargers and 23 additional standard EV chargers available for the public across 15 sites. </p>
<p>Nissan Leaf cars and ENV200 vans are used by esidents, tradespeople, and local utilities for both short-term and long-term needs. Most charging sites are connected to elegant oak solar canopies or other solar photovoltaic systems. The Community Venture, which owns and operates the scheme, is developing an open-source platform to <strong>optimise energy flows</strong> between chargers, EVs, solar PV, and the local grid. They have also designed and operate an open-source mobile app, RFID membership cards for vehicle access, and onboard units that manage locking and bookings.</p>
</div>
<div>
<p><image class="py-10 drop-shadow-lg pl-10 pb-10" src="images/car.png"></image></p>
</div>
</div>
</div>
</div>
</div>
<!-- key facts 2 start -->
<dl class="pl-10 mx-auto grid grid-cols-1 gap-px bg-emerald-500/5 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-tight inline-block text-emerald-600 bg-clip-text">XXX<dt class="w-full text-md font-light text-gray-700">energy from solar each year</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 6 net zero.png" alt="socket" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-tight inline-block text-emerald-600 bg-clip-text">14<dt class="w-full text-md font-light text-gray-700">car share vehicles</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 7 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-tight inline-block text-emerald-600 bg-clip-text">33<dt class="w-full text-md font-light text-gray-700">EV charge points</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 8 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 px-4 py-10 sm:px-6 xl:px-8">
<dd class="w-full flex-none text-3xl/10 font-medium tracking-tight inline-block text-emerald-600 bg-clip-text">10<dt class="w-full text-md font-light text-gray-700">VG2 charge points</dt> <img class="pt-5 w-50% drop-shadow-lg" src="icons/Icon 9 net zero.png" alt="letter" width="158" height="48"></dd>
</div>
</dl>
</div>
<!-- the people start -->
<div class="py-24 sm:py-10">
<div class="pb-4 mx-auto max-w-7xl px-7 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
<div class="mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 text-justify font-light">
<div>
<!-- the car photos don't align when the screen is small -->
<image class="py-10 drop-shadow-lg pr-5 h-200" src="images/car.png"></image>
</div>
<divb class="py-20">
<h1 id="the-people-anchor" class="underline pl-60 pb-10 text-2xl">The People</h1>
<p>Alongside its vibrant community of residents and tourists, the Isles of Scilly is home to a network of organisations dedicated to enhancing every aspect of island life. These groups already collaborate through the Community Research Network, providing east access to the right people for decision-making, introductions, and partnerships.</p>
<p class="mt-8">The local Council, with powers similiar to a county authority, works closely with the island's Community Venture to drive community energy initiatives. Much of the land is manages by the Dutchy of Cornwall, Tresco Island, and the local Wildlife Trust, all of which maintain strong connections with the Five Islands School and Museum, representing both the islands' future and rich heritage. This established collaboration and trust make Scilly the perfect place to bring your energy innovations to life.</p>
</div>
</div>
</div>
</div>
</div>
<!-- footer start -->
<footer class="bg-gradient-to-b from-[#54c0a1] -14% to-[#bcdbaa] 100%">
<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
<div class="flex justify-center gap-x-6 md:order-2">
<a href="#" class="text-white hover:text-lime-200">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-white hover:text-lime-200">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-white hover:text-lime-200">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-white hover:text-lime-200">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-center text-sm/6 text-white md:order-1 md:mt-0">© 2024 Next Zero Scilly. All rights reserved.</p>
</div>
</footer>
</body>
</html>