-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsolution.html
256 lines (242 loc) · 12 KB
/
solution.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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link type="text/css" rel="stylesheet" href="css/index.css">
<title>Solution</title>
<noscript>
<style>
/* Styles for no java script */
.no-js {
display: none;
}
@media screen and (max-width: 1024px){
.nav-container {
position: relative;
top: 0;
width: 100vw;
height: auto;
background-color: #f56700;
z-index: 3;
border-bottom-style: none;
}
.navbar {
flex-direction: column;
}
.nav-logo{
text-align: center;
border-bottom-style: solid;
border-color: white;
border-width: 2px;
width: 100vw;
}
.nav-links{
position: relative;
flex-direction: column;
justify-content: space-around;
text-align: center;
align-items: center;
padding: 0;
top: 0;
width: 100vw;
height: 30vh;
transform: translateX(0%);
}
.nav-links li {
opacity: 1;
}
.header-content {
top: 0;
}
}
</style>
</noscript>
</head>
<body>
<header id="top">
<!-- Skip button -->
<a class="skip-button" href="#content-solution">Skip to content</a>
<!-- Navigationbar -->
<div class="nav-container">
<div class="navbar">
<div class="nav-logo"><a href="index.html">Solar Paint</a></div>
<ul class="nav-links">
<li><a class="hover-effect" href="index.html">Home</a></li>
<li><a class="hover-effect" href="solution.html">Solution</a></li>
<li><a class="hover-effect" href="about.html">About</a></li>
<li><a class="hover-effect" href="contact.html">Contact</a></li>
</ul>
<div class="menu no-js">
<div class="menu-text">
<p>menu </p>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</div>
</div>
<div class="header-content">
<div class="header-box">
<div class="header-img-container">
<img id="header-img" src="img/icon_layers3_farge_fill.png" alt="header illustration, 3 layers of paint">
</div>
<div class="header-text">
<h1>
Solution<br>
</h1>
</div>
</div>
</div>
</header>
<!-- Main section -->
<main id="content-solution">
<div class="row">
<div class="col-text col-text-solution">
<h2>A combination of techniques</h2>
<p>
Our technology features several techniques to harvest energy from sunlight.
One part of the solution consists of photovoltaic paint.
This paint contains a light-absorbing organic material which convert sunlight to electrical current <a class="source" href="https://www.labroots.com/trending/chemistry-and-physics/18633/photovoltaic-paint-endless-potential" target="_blank">(Sullivan, 2020)</a>.
The paint has also sufficient conducting properties which make it possible to connect the layer to an electrical circuit.
<br><br>
The second technology is a paint that produces electrical energy from heat.
Large surfaces like roofs or building facades absorb large amounts of energy and therefore produce heat.
This heat is then converted into electrical energy with a thermoelectric paint <a class="source" href="https://phys.org/news/2016-11-thermoelectric-enables-walls-electricity.html" target="_blank">(Zyga, 2016)</a>.
</p>
</div>
<div id="img-container-techniques" class="col-icon">
<picture class="comination-icon-picture">
<source srcset="img/suntobulb_fig_vertical.png" media="(min-width: 1025px)">
<source srcset="img/suntobulb_fig_horisontal.png" media="(max-width: 1025px)">
<img id="combination-icon-techniques" src="img/suntobulb_fig_horisontal.png" alt="Solar energy and solar paint results in electrical energy">
</picture>
</div>
</div>
<div class="layerfigure-row">
<div>
<h2>A layer structure</h2>
<p>
The solution is implemented by painting three layers of paint on a surface like a roof or a building facade.
</p>
</div>
<figure class="layerfigure-container">
<p class="expl-normal" tabindex="0"><i>Please navigate the following figure by clicking or with tab and arrow keys.</i></p>
<p class="expl-touch" tabindex="0"><i>Please navigate the following figure by tapping the layers or labels.</i></p>
<!-- mobile Image -->
<div class="layerfigure-image-container mobile-image">
<label class="image-cover-1" for="layer1">Layer 1 - Photovoltaic</label>
<label class="image-cover-2" for="layer2">Layer 2 - Thermoelectric</label>
<label class="image-cover-3" for="layer3">Layer 3 - Conductor</label>
<picture>
<img id="layer-image-mobile" src="img/LayerFigureSpacing2.png" alt="Three stacked layers">
</picture>
</div>
<div id="layerfiguretxt">
<input id="layer1" type="radio" name="layerFigure" checked="checked" aria-describedby="layer-description-1" title="Layer 1 - Photovoltaic">
<label for="layer1" class="layerfigure-layer1 layer-label" aria-hidden="true">
Layer 1<span> - Photovoltaic</span>
</label>
<div aria-hidden="true" class="pointer-layer1"></div>
<div aria-hidden="true" class="pointer-layer1-helper"></div>
<!-- Hidden box -->
<div id="HiddenLayer1" aria-hidden="true">
<h3>Layer 1 - Photovoltaic</h3>
<ul id="layer-description-1">
<li>The first layer makes up the surface of the solution.</li>
<li>The layer consists of a photovoltaic paint that generates electrical current from sunlight.</li>
</ul>
</div>
<input id="layer2" type="radio" name="layerFigure" aria-describedby="layer-description-2" title="Layer 2 - Thermoelectric">
<label for="layer2" class="layerfigure-layer2 layer-label" aria-hidden="true">
Layer 2<span> - Thermoelectric</span>
</label>
<div aria-hidden="true" class="pointer-layer2"></div>
<!-- Hidden box -->
<div id="HiddenLayer2" aria-hidden="true">
<h3>Layer 2 - Thermoelectric</h3>
<ul id="layer-description-2">
<li>The second layer is a thermoelectric paint, which converts heat into electrical energy.</li>
<li>It is thicker than the other layers and has the ability to conduct electrical current.</li>
</ul>
</div>
<input id="layer3" type="radio" name="layerFigure" aria-describedby="layer-description-3" title="Layer 3 - conductor">
<label for="layer3" class="layerfigure-layer3 layer-label" aria-hidden="true">
Layer 3<span> - Conductor</span>
</label>
<div aria-hidden="true" class="pointer-layer3"></div>
<div aria-hidden="true" class="pointer-layer3-helper"></div>
<!-- Hidden box -->
<div id="HiddenLayer3" aria-hidden="true">
<h3>Layer 3 - Conductor</h3>
<ul id="layer-description-3">
<li>The last layer consists of a material with conducting properties.</li>
<li>This element ensures that the photovoltaic and thermoelectric paint is connected to an electrical circuit</li>
</ul>
</div>
</div>
<div aria-labelledby="layer-image" class="layerfigure-image-container mobile-remove">
<label class="image-cover-1" for="layer1" aria-hidden="true">Layer 1</label>
<label class="image-cover-2" for="layer2" aria-hidden="true">Layer 2</label>
<label class="image-cover-3" for="layer3" aria-hidden="true">Layer 3</label>
<picture>
<source srcset="img/LayerFigureSpacing2.png" media="(max-width: 850px)">
<img id="layer-image" src="img/LayerFigureSpacing1.png" alt="Three stacked layers">
</picture>
</div>
</figure>
</div>
<div class="row">
<div id="text-generated" class="col-text">
<h2>How electricity is generated</h2>
<p id="harvest-description">
Sunlight is first absorbed by the photovoltaic paint in layer one, where 20% of the energy from the sun is converted into electrical current.
A large portion of the remaining energy is then turned into heat.
The heat increases the temperature in layer two, which consists of the thermoelectric paint.
As a result, the heat is converted into electrical current by the thermoelectric material.
The electrical energy produced is flowing in a closed circuit due to the conducting abilities of all three layers and two cables that are connected to layer one and three.
</p>
</div>
<div id="img-containter-generated" class="col-icon">
<img id="combination-icon-generated" aria-describedby="harvest-description" src="img/LayerFigure_coating_zoom.png" alt="A figure that ilustrates the flow of electrons between the three layers">
</div>
</div>
<div class="row"></div>
</main>
<footer id="footer-margin">
<div class="footer-container">
<div class="footer-column-left">
<ul class="footer-container-list">
<li><strong>Tlf:</strong> (+47)45897615</li>
<li><strong>E-mail:</strong> contact@solarpaint.com</li>
<li><strong>Address:</strong> Solvegen 23A, 0266 Oslo</li>
</ul>
</div>
<div class="footer-column-right">
<div class="social-text">Follow our socials:</div>
<div class="footer-socials">
<a href="https://twitter.com" target="_blank" ><img class="socialMediaIcon" src="img/twitter_icon.png" alt="Twitter"></a>
<a href="https://www.youtube.com" target="_blank" ><img class="socialMediaIcon" src="img/youtube_icon.png" alt="Youtube"></a>
<a href="https://www.facebook.com" target="_blank" ><img class="socialMediaIcon" src="img/facebook_icon.png" alt="Facebook"></a>
<a href="https://www.instagram.com" target="_blank" ><img class="socialMediaIcon" src="img/instagram_icon.png" alt="Instagram"></a>
</div>
</div>
</div>
<div class="top-arrow-container no-js">
<a href="#top"><img src="img/orange-arrow.png" alt="Back to top"></a>
</div>
</footer>
<script src="app.js"></script>
</body>
<!--
SOURCES
Hover effect links: https://webdevtrick.com/css-link-hover-effects/
JS for mobile menu: https://www.youtube.com/watch?v=gXkqy0b4M5g
Photo credit: https://unsplash.com/@vidarnm
Graphics licensed from : https://www.flaticon.com/
-->
</html>