-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (145 loc) · 10.8 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
<!DOCTYPE html>
<html>
<head>
<title>¡Bienvenidos a KAWIDI!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
<style>
.white-with-black-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em green, 0 0 0.2em green;
color: white;
font: 2.0em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
.Jumbo {
text-shadow: 1px 1px 2px black, 0 0 1em green, 0 0 0.2em green;
color: white;
font: 4.0em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
html {
scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,h6 {font-family: "Roboto"}
body {font-family: "Source Sans Pro"}
</style>
</head>
<body class="w3-light-white w3-margin">
<!-- Navigation bar with links -->
<div class="w3-bar w3-white w3-text-black">
<h2 class="w3-left w3-tag w3-pale-red w3-round">KAWIDI</h2>
<a href="login.php" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-right" style="margin-top:10px;">INICIA SESION</a>
<a href="#Contacto" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-right" style="margin-top:10px;">CONTACTO</a>
<a href="#¿Qué es KAWIDI?" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-right" style="margin-top:10px;">¿QUÉ ES KAWIDI?</a>
<a href="#Nosotros" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-right" style="margin-top:10px;">NOSOTROS</a>
<a href="#Home" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-right" style="margin-top:10px;">HOME</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-medium w3-hide-large" style="margin-top:10px;" onclick="myFunction()">☰</a>
</div>
<div id="demo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-small">
<a href="#Home" class="w3-bar-item w3-button">HOME</a>
<a href="#Nosotros" class="w3-bar-item w3-button">NOSOTROS</a>
<a href="#¿Qué es KAWIDI?" class="w3-bar-item w3-button">¿QUÉ ES KAWIDI?</a>
<a href="#Contacto" class="w3-bar-item w3-button">CONTACTO</a>
</div>
<div class="w3-content" style="max-width:1600px">
<!-- Image header -->
<header class="w3-display-container w3-wide" style="padding-bottom:32px;" id="Home">
<img class="w3-image" src="img/img1.png" alt="Photo by Jamie Street" width="1600" height="1060">
<div class="w3-display-left w3-padding-large">
<h1 class="white-with-black-shadow">En busca de un nuevo futuro</h1>
<h1 class="Jumbo"><b>Por un mundo mejor <br>para todos</b></h1>
<h6><button class="w3-button w3-round w3-pale-red w3-padding-large w3-large w3-hover-opacity-off"><a href="signup.php">Registrate</a></button></h6>
</div>
</header>
<!-- NOSOTROS -->
<div class="w3-row-padding" id="Nosotros">
<div class="w3-center w3-padding-32">
<h2 class="w3-wide w3-center">NOSOTROS</h2>
<p class="w3-opacity w3-center"><i>Integrantes del equipo</i></p><br>
<p class="w3-white w3-text-black w3-left-align">
</p>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<img src="img/wilson.jpg" style="width:100%">
<h3 class="w3-container">Wilson Bravo</h3>
<p class="w3-opacity" style="text-align: center; padding: 20px;">Estudiante de Ingeniería electrónica de la Pontificia Universidad Javeriana con énfasis en señales y digitales.</p>
<p style="text-align: justify; padding: 20px;">En mi proceso de formación académica he trabajado con sistemas de desarrollo IoT así como Inteligencia Artificial. Además de los conocimientos técnicos, por medio del trabajo en equipo he desarrollado capacidades de liderazgo enfocado en la comunicación para alcanzar el objetivo, de manera que cada miembro del equipo se sienta cómodo durante y al terminar el proyecto.</p>
<!--<p><button class="w3-button w3-round w3-pale-red w3-block"><a href="#Contact">BOOK NOW</a></button></p>-->
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<img src="img/carolina.jpg" style="width:100%">
<h3 class="w3-container">Carolina Soto</h3>
<p class="w3-opacity" style="text-align: center; padding: 20px;">Estudiante de ingeniería electrónica de la Pontificia Universidad Javeriana con énfasis en control, señales y digitales.</p>
<p style="text-align: justify; padding: 20px;">Soy estudiante de últimos semestres de ingeniería electrónica de la Pontificia Universidad Javeriana. Tengo experiencia en áreas como inteligencia artificial, procesamiento de imágenes, robótica e IoT. Mis fortalezas son el trabajo en equipo, pensamiento crítico, capacidad de solucionar problemas, habilidades de comprensión y buen trabajo bajo presión.</p>
<!--<p><button class="w3-button w3-round w3-pale-red w3-block"><a href="#Contact">BOOK NOW</a></button></p>-->
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<img src="img/kateryne.jpg" alt="Photo by Wieger Stienstra" style="width:100%">
<h3 class="w3-container">Kateryne Bonilla</h3>
<p class="w3-opacity" style="text-align: center; padding: 20px;">Estudiante de ingeniería electrónica de la Pontificia Universidad Javeriana con énfasis en control, señales y digitales.</p>
<p style="text-align: justify; padding: 20px;">Soy estudiante de ultimo año de Ingeniería Electrónica. Tengo conocimientos en las áreas de IA, Machine Learning y procesamiento de imágenes. Actualmente me encuentro aprendiendo sobre IoT. Me caracterizo por el trabajo en equipo, el pensamiento lógico y la adaptabilidad.</p>
<!--<p><button class="w3-button w3-round w3-pale-red w3-block"><a href="#Contact">BOOK NOW</a></button></p>-->
</div>
</div>
</div>
<!-- KAWIDI -->
<div class="w3-white" id="¿Qué es KAWIDI?">
<div class="w3-container">
<div class="w3-center w3-padding-32">
<h2 class="w3-wide">¿QUÉ ES KAWIDI?</h2>
<p class="w3-opacity"><i>toma un descanso del calor</i></p><br>
<p class="w3-white w3-text-black" style="text-align: justify; padding: 20px;">
KAWIDI es un proyecto que pretende realizar un centro de enfriamiento móvil para el manejo del calor extremo. Este centro cuenta con sensores (DHT22 y HC-SR04) para poder estar al tanto del estado de salud de la comunidad, de manera que se reciban valores almacenándose en una base de datos y que esté dispuesta hacia diferentes organizaciones de salud o fundaciones con ánimo de contribuir al desarrollo de una comunidad más sana. Se brinda servicio hasta a 20 personas, equipado con ventiladores y aire acondicionado para generar aire fresco y también dispensadores de agua, así como un botón de emergencia para casos médicos.
</p>
</div>
<img style="padding: 45px;" class="w3-image" src="img/kawidi.jpg" width="1600" height="1060">
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-third">
<img src="img/img2.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Servicios de enfriamiento</b></p>
<p style="text-align: justify;">Prestamos servicios para disminuir los riesgos ocasionados por las fuertes olas de calor, entre los que destacamos el uso de aire acondicionado, objetos al alcance de la comunidad como botellas de agua con unas pequeñas instrucciones de cuáles son los síntomas de golpes de calor y qué hacer en caso de una emergencia. Así mismo se tiene un botón de emergencia el cual alerta a las autoridades competentes.</p>
<!--<button class="w3-button w3-round w3-pale-red w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>-->
</div>
</div>
<div class="w3-third">
<img src="img/img2_2.jpg" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Concientizar sobre una problemática importante</b></p>
<p style="text-align: justify;">El problema del cambio climático ha provocado un cambio en diferentes factores, a nivel de sociedad ha incrementado los casos de muertes por olas de calor. En diferentes estudios se han dado con el resultado de que, al no poder disminuir el problema, al menos podemos mitigarlo de esta forma se establece la adaptación de diferentes tecnologías o elementos para mejorar la vida de las personas y en este caso disminuir los riesgos que se pueden presentar por las olas de calor. Entre los que se encuentran beber mucha agua para mantenerse hidratado, hacer uso de aire acondicionado, usar una sombrilla o gorra entre las demás que pueden observarse en la imagen.</p>
<a class="w3-button w3-round w3-pale-red w3-margin-bottom" href="https://www.lavanguardia.com/vida/salud/20190628/463144935662/golpe-de-calor-insolacion-salud-ola-de-calor-altas-temperaturas-personas-vulnerables.html">Aprende un poco más...</a>
</div>
</div>
<div class="w3-third">
<img src="img/img2_3.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Centros de enfriamiento</b></p>
<p style="text-align: justify;">Los centros de enfriamiento están adecuados para enfrentar las olas de calor por medio de los servicios de enfriamiento. Estos centros van a estar dispuestos según sean necesarios de acuerdo a un mapeo del entorno en el que se desarrollará el proyecto, bien sea una playa privada, los parques de una ciudad o algún conjunto residencial.</p>
<!--<button class="w3-button w3-round w3-pale-red w3-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>-->
</div>
</div>
</div>
</div>
</div>
<!-- Contacto -->
<div class="w3-white" id="Contacto">
<div class="w3-container w3-padding-32">
<div class="w3-center w3-padding-32">
<h2 class="w3-wide">CONTACTO</h2>
<p class="w3-opacity"><i>¡Manda un mensaje!</i></p><br>
<p class="w3-white w3-text-black">
Si te interesa nuestra solución puedes contactar con nosotros a través del siguiente correo: <br> [email protected]
</p>
</div>
</div>
</div>
</body>
</html>