added dictionary, insights and other changes

EcoStories · Oct 6, 2024 · df2228a · df2228a
1 parent 472dcea
commit df2228a
Show file tree

Hide file tree

Showing 19 changed files with 252 additions and 947 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Website.zip b/Website.zip
diff --git a/Website/package-lock.json b/Website/package-lock.json
diff --git a/Website/package.json b/Website/package.json
diff --git a/Website/server.js b/Website/server.js
diff --git a/Website/src/assets/css/styles.css b/Website/src/assets/css/styles.css
diff --git a/Website/src/assets/img/back.jpg b/Website/src/assets/img/back.jpg
diff --git a/Website/src/assets/img/earth.gif b/Website/src/assets/img/earth.gif
diff --git a/Website/src/views/index.html b/Website/src/views/index.html
diff --git a/dictionary.html b/dictionary.html
@@ -14,33 +14,38 @@
 }
 .search-container {
             display: flex;
-            border: 2px solid #007BFF; /* Borde azul */
+            border: 2px solid #000000; /* Borde azul */
+            justify-content: center;
+            padding: 20px;
             border-radius: 5px;
             overflow: hidden;
-        }
-        .search-input {
-            border: none;
-            padding: 10px;
-            font-size: 16px;
-            width: 300px; /* Ancho del campo de búsqueda */
-        }
-        .search-button {
-            background-color: #007BFF; /* Color de fondo del botón */
-            color: white; /* Texto blanco */
-            border: none;
-            padding: 10px 15px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-        .search-button:hover {
-            background-color: #0056b3; /* Color más oscuro al pasar el ratón */
+
         }
         nav {
     display: flex;
     justify-content: flex-end;
     padding: 33px;
     background: rgba(0, 0, 0, 0.5);
 }
+.search-input {
+            width: 90%; /* Ancho proporcional de la barra de búsqueda */
+            max-width: 1011px; /* Ancho máximo */
+            padding: 10px; /* Espaciado interno */
+            font-size: 16px; /* Tamaño de fuente */
+            border: none; /* Sin borde */
+            border-radius: 5px; /* Bordes redondeados */
+        }
+        .search-button {
+            padding: 10px 15px; /* Espaciado interno */
+            background-color: #ffcc00; /* Color de fondo del botón */
+            color: #003366; /* Color del texto del botón */
+            border: none; /* Sin borde */
+            border-radius: 0 5px 5px 0; /* Bordes redondeados */
+            cursor: pointer; /* Cambiar el cursor al pasar el ratón */
+        }
+        .search-button:hover {
+            background-color: #002ae6; /* Color más oscuro al pasar el ratón */
+        }
 
 nav ul {
     list-style-type: none;
@@ -66,7 +71,18 @@
             background-color: #000000; /* Color de fondo al hacer hover */
             color: #160077; /* Cambiar color del texto al hacer hover */
         }
-
+        .gallery {
+            display: flex; /* Utiliza Flexbox para alinear las imágenes */
+            justify-content: space-around; /* Espaciado uniforme entre imágenes */
+            flex-wrap: wrap; /* Permite que las imágenes se ajusten en varias líneas si es necesario */
+        }
+        .gallery img {
+            width: 675px; /* Ancho de la imagen */
+            height: 294px; /* Alto de la imagen */
+            object-fit: cover; /* Ajusta la imagen para cubrir el espacio */
+            margin: 10px; /* Espaciado entre las imágenes */
+            border-radius: 8px; /* Bordes redondeados */
+        }
     </style>
 </head>
 <body>
@@ -86,6 +102,14 @@ <h1>
         <input type="text" class="search-input" placeholder="Buscar..." aria-label="Buscar">
         <button class="search-button" onclick="searchFunction()">Buscar</button>
     </div>
+    <div class="contenedor">
+        <div class="gallery">
+            <img src="img/Cap1.png" alt="Imagen 1" class="imagen">
+            <img src="img/cap2.jpeg" alt="Imagen 2" class="imagen">
+            <img src="img/cap3.jpeg" alt="Imagen 3" class="imagen"> 
+            <img src="img/cap4.jpeg" alt="Imagen 4" class="imagen">
+        </div>
+    </div>  
 
     <script>
         function searchFunction() {

diff --git a/img/Cap1.png b/img/Cap1.png
diff --git a/img/cap2.jpeg b/img/cap2.jpeg
diff --git a/img/cap3.jpeg b/img/cap3.jpeg
diff --git a/img/cap4.jpeg b/img/cap4.jpeg
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
             <h1 class="texto-con-gif">THE EARTH<br>IS CHANGING</h1>
 
             <button class="nnn">Explore</button>
-            <button id="leer">Read this</button>
+            <button id="leer" class="nnn">Read this</button>
         </div>
 
     </section>

diff --git a/information.css b/information.css
@@ -7,6 +7,7 @@ body {
 }
 p{
     color: white;
+    font-size: small;
 }
 nav {
     display: flex;
@@ -37,12 +38,30 @@ nav a {
 
 }
 .contenedor {
-    text-align: center; /* Centra el texto y las imágenes dentro del contenedor */
+     align-items: left;/* Centra el texto y las imágenes dentro del contenedor */
+}
+.contenedor2{
+    align-items: right;
 }
 
 .imagen {
-    margin: 10px; /* Espacio entre las imágenes */
-    width: 300px; /* Ajusta el tamaño de las imágenes */
-    height: auto; /* Mantiene la proporción de la imagen */
-    margin: 10px; /* Espacio entre las imágenes */
+    align-items: center;
+    margin: 1px; /* Espacio entre las imágenes */
+    margin: 1px; /* Espacio entre las imágenes */
+}
+.imagen-contenedor{
+    display: flex;
+    justify-content: center;
+    justify-content: space-evenly;
+    align-items: flex-end;
+}
+p{
+    align-items: center;
+    justify-content: center;
+}
+.title{
+    color: white;
+    align-items: center;
+    display: flex;
+    justify-content: center;
 }
diff --git a/information.html b/information.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="information.css">
 </head>
 <body>
+
     <nav>
         <ul class="words">
             <li><a href="index.html">Home</a></li>
@@ -16,15 +17,25 @@
         </ul>
     </nav>
     <hr class="linea">
-    <div class="contenedor">
-        <a href="https://www.nasa.gov/" target="_blank">
-            <img src="img/imagen1.png" alt="" class="imagen">
-        </a>
-        <a href="https://www.nasa.gov/" target="_blank">
-            <img src="img/image2.png" alt="" class="imagen">
+    <br>
+    <br>
+    <h1 class="title">INFORMATION</h1>
+    <br>
+    <div class="imagen-contenedor">
+
+        <div class="contenedor">
+            <a href="dictionary.html" target="_blank">
+                <img src="img/imagen1.png" alt="" class="imagen" width="342" height="444">
+                <p>Dictionary</p>
+            </a>
 
-        </a>
-        <p> decccc                                  acccc</p>
-    </div>  
+        </div>  
+        <div class="contenedor2">
+            <a href="insight.html" target="_blank">
+                <img src="img/image2.png" alt="" class="imagen" width="342" height="444">
+                <p>Insight</p>
+            </a>
+        </div>
+    </div>
 </body>
 </html>