-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (116 loc) · 4.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sustainable Water Tower</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<style>
body {
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0;
line-height: 6mm;
}
.content {
width: 80%;
margin: 0 auto;
}
header {
background-color: #1d84e4;;
color: white;
padding: 30px 30px 30px 0;
-webkit-box-shadow: -3px -7px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px -7px 18px 0px rgba(0,0,0,0.75);
box-shadow: -3px -7px 18px 0px rgba(0,0,0,0.75);
margin-bottom: 100px;
}
header h1 {
display: inline;
}
header a {
float: right;
line-height: 30px;
text-decoration: none;
color: white;
font-weight: bold;
}
section {
display: inline-block;
width: 100%;
min-height: 300px;
}
section .text-content {
max-width: 600px;
margin-right: 20px;
}
section img {
max-width: 400px;
height: auto;
float: right;
}
button {
padding: 10px;
background-color: #1d84e4;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #469beb;
}
@media only screen and (max-width: 1200px) {
section img {
max-width: 300px;
}
}
@media only screen and (max-width: 700px) {
header h1 {
font-size: 20px;
}
header a {
line-height: 25px;
}
section img {
float: none;
}
}
</style>
<header>
<div class="content">
<h1>Sustainable Water Tower</h1>
<a href="./index.html">Home</a>
</div>
</header>
<div class="content">
<section id="soluton">
<img alt="Image of Water Tower" src="https://bloximages.chicago2.vip.townnews.com/idahopress.com/content/tncms/assets/v3/editorial/f/73/f73724e8-1909-54eb-a7b5-9c41f2a7ae77/5b244cfa0698b.image.jpg?resize=1200%2C808">
<div class="text-content">
<h1>Our solution</h1>
<p>We envision to create local water towers in villages without access to clean water. These towers can be filled up with transported water, but also collect and filter rain water. The water towers are designed for warm areas.</p>
<a href="#how"><button>Read more</button></a>
</div>
</section>
<section id="how">
<h1>How it works</h1>
<p>Each water tower will have two containers. One is for clean filtered water and the other container is used to store the unclean, yet to be filtered water.
The two containers are connected by a pipe at the top of the containers. The unclean water container will be made of a heat conductive material such as metal while the other container is either shielded or made of a bad heat conductive material.
The water tanks roof will be a cone shape, causing rain water that falls on it drip down its sides.
</p>
<p>
The unclean water container is made up of two primary parts, the inner container and the outer wall.
The inner container is where the collected water will be stored to evaporate and has holes in the bottom that let rainwater inside. The outer wall is there to stop water from draining out of the tank
and is at an height lower than the pipe connecting the two containers. This will cause water to spil out of the container instead of filling the other container with unclean water incase of heavy downfall.
The gap between the outer wall and the inner container is how you also introduse unclean water collected through other means than rainwater.
</p>
<p>
Throughout the day, the unclean water container will be heated by the emnvoirment and by extension the water inside too. This will cause the water to slowly evaporate and rise to the top of the container where it will move through the pipe into the other container.
In the other container, the water vaper will condensate thanks to the cooler temprature giving us safe to drink water.
</p>
</section>
</div>
</body>
</html>