-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (152 loc) · 9.04 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
<!DOCTYPE html>
<html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecoactualizate</title>
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
<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=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script defer src="./js/index.js" type="module"></script>
<link rel="stylesheet" href="./css/home.css">
</head>
</html>
<body>
<!-- **************** Navbar **************** -->
<section class="navbar-dark">
<div class="navbar-container container"><a class="branding" href="./"><img class="branding__image" src="./assets/logo-main.svg" alt="Ecoactualizate logo">
<h3 class="h3 branding__title">Ecoactualizate</h3></a>
<button class="menu-toggler"><img src="./assets/menu-icon-white.svg" alt="Menu icon"></button>
<nav class="nav-menu">
<ul>
<li><a class="link" href="./">Inicio</a></li>
<li><a class="link link--active" href="./actualizate/actualizate.html">Actualizate</a></li>
<li><a class="link" href="./noticias/noticias.html">Noticias</a></li>
<li><a class="link" href="./nosotros/nosotros.html">Nosotros</a></li>
</ul>
<div class="nav-menu__button"> <a class="btn btn-primary btn-md" href="./contribuir/contribuir.html">Contribuir</a></div>
</nav>
</div>
</section>
<!-- **************** Fin Navbar **************** -->
<!-- ***************************** HEADER ***************************** -->
<header class="header-home">
<!-- **************** Hero **************** -->
<section class="hero-home">
<div class="hero-home-container container">
<div class="hero-home__image"><img src="./assets/image-hero-home.svg" alt="Mockup earth"></div>
<div class="hero-home__content">
<h1 class="display black">HAZ PARTE DEL CAMBIO</h1>
<h3 class="h3 semi-bold">Juntos protejamos el medio ambiente</h3><a class="btn btn-primary btn-lg" href="./contribuir/contribuir.html">Contribuir ahora</a>
</div>
</div>
</section>
<!-- **************** Fin Hero **************** -->
</header>
<!-- ***************************** FIN HEADER ***************************** -->
<!-- ***************************** MAIN ***************************** -->
<main>
<section class="about-us">
<div class="about-us-container container">
<div class="about-us__title">
<h2 class="h1 semi-bold"><span class="text-active">Jovenes</span> responsables y comprometidos
con el medio ambiente
</h2>
</div>
<div class="about-us__cards">
<div class="card">
<div class="card-image"><img src="./assets/soñadores-image.svg" alt="Dream illustration"/></div>
<div class="card-content">
<h3 class="h3 semi-bold">Soñadores</h3>
<p>Contribuimos para que el cambio se de a tiempo</p>
</div>
</div>
<div class="card">
<div class="card-image"><img src="./assets/conscientes-image.svg" alt="Dream illustration"/></div>
<div class="card-content">
<h3 class="h3 semi-bold">Conscientes</h3>
<p>Brindamos información importante buscando conscientizar a nuestros lectores</p>
</div>
</div>
<div class="card">
<div class="card-image"><img src="./assets/apasionados-image.svg" alt="Dream illustration"/></div>
<div class="card-content">
<h3 class="h3 semi-bold">Apasionados</h3>
<p>Transmitimos nuestro mensaje para que más personas se unan a este movimiento</p>
</div>
</div>
</div>
<div class="about-us__button"><a class="btn btn-secondary btn-md" href="./nosotros/nosotros.html">Conocer más</a></div>
</div>
</section>
<section class="news">
<div class="news-container container">
<div class="news__title">
<h2 class="h1 semi-bold"><span class="text-active">Actualízate</span> en temas del
<span class="text-active">medio ambiente</span>
</h2>
</div>
<div class="carousel">
<div class="carousel-container"><a class="carousel-item carousel-item-active" href="./noticias/noticia1.html">
<div class="carousel-item__image"><img src="./assets/noticia-hielo.jpg" alt="Image ice cap"/></div>
<div class="carousel-item__content">
<h3 class="h3 semi bold">Gran capa de hielo se derritió en una semana en Groenlandia</h3>
<p class="body regular">Una ola de calor en Groenlandia, con temperaturas más de diez
grados por encima de las normales estacionales, ha provocado esta
semana un episodio de derretimiento “masivo” del casquete
de hielo de Groenlandia, advirtieron los glaciólogos</p>
</div></a><a class="carousel-item" href="./noticias/noticia2.html">
<div class="carousel-item__image"><img src="./assets/noticia-cientificos.jpg" alt="Image colombian people"/></div>
<div class="carousel-item__content">
<h3 class="h3 semi bold">Colombiano logró crear fertilizante con gas contaminante de la atmósfera</h3>
<p class="body regular">Producir fertilizante a partir de uno de los mayorescontaminantes de la atmósfera
de una manera más fácil es lo que ha logrado por primera vez un equipo de químicos
de Miami, los cuales confían en abrir así la puerta a que los granjeros lo puedan
elaborar algún día en el mismo lugar de los cultivos.</p>
</div></a><a class="carousel-item" href="./noticias/noticia3.html">
<div class="carousel-item__image"><img src="./assets/noticia-impresora.jpg" alt="Image printing machine"/></div>
<div class="carousel-item__content">
<h3 class="h3 semi bold">HP lanza impresora hecha 25% con plastico reciclado</h3>
<p class="body regular">HP está de lanzamiento con varias impresoras que le apuntan a la efectividad
en el trabajo, diseñadas para necesidades de alto volumen de impresión, ideales para
micro y pequeñas empresas. Las HP Nevestop Laser son las primeras sin cartucho del mercado
y le apuntan a satisfacer las necesidades de los empresarios</p>
</div></a>
</div>
<div class="carousel-btns">
<button class="carousel__btn-left"><img src="./assets/chevron-left-primary-700.svg" alt="chevron left icon"></button>
<button class="carousel__btn-right"><img src="./assets/chevron-right-primary-700.svg" alt="chevron right icon"></button>
</div>
</div>
<div class="news__btn"><a class="btn btn-md btn-secondary" href="./noticias/noticias.html">Conocer más</a></div>
</div>
</section>
<section class="second-chance">
<div class="second-chance-container container">
<div class="second-chance__content">
<h3 class="h3 extra-bold">¿Estás listo para aportar tu granito de arena?</h3><a class="btn btn-primary btn-lg" href="./contribuir/contribuir.html">Contribuir ahora</a>
</div>
<div class="second-chance__image"><img src="./assets/second-chance-image-home.svg" alt="Sowing image"></div>
</div>
</section>
</main>
<!-- ***************************** FIN MAIN ***************************** -->
<!-- ***************************** FOOTER ***************************** -->
<footer>
<section class="footer">
<div class="footer-container container">
<div class="footer-social">
<h3 class="h3 h3-upper extrabold">EL FUTURO NO ES DESECHABLE</h3>
<div class="footer-social__container"><a href="https://api.whatsapp.com/send?phone=3002047922"><img src="./assets/whatsapp-icon.svg" alt="Whatsapp icon"></a><a href="mailto:sofiatobon2020@gmail.com"><img src="./assets/mail-icon.svg" alt="Mail icon"></a></div>
</div>
<div class="footer-branding"><a class="footer-branding__container" href="#"><img src="./assets/logo-light.svg" alt="Ecoactualizate logo">
<p class="body bold">Ecoactualizate</p></a><a class="btn btn-primary btn-sm" href="./contribuir/contribuir.html">Contribuir</a></div>
</div>
</section>
</footer>
<!-- ***************************** FIN FOOTER ***************************** -->
</body>
</html>