solucion a desborde en pagina de inicio

inkua · Mar 11, 2024 · 1475f8c · 1475f8c
1 parent eaf005c
commit 1475f8c
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 166 deletions.
diff --git a/css/crearReunion.css b/css/crearReunion.css
@@ -6,8 +6,6 @@ select {
     cursor: pointer;
 }
 
-
-
 /* Inputs */
 .inputs {
     display: flex;
@@ -150,7 +148,6 @@ select {
 
 /* Media querys */
 @media (min-width: 45rem) {
-
     .inputs {
         justify-content: space-evenly;
         flex-direction: row;

diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,3 @@
-
-
 form {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -28,21 +26,30 @@ input {
     text-align: center;
 }
 
-#botonConvertir {
-    grid-column: 2/4;
+.inputs select {
+    font-family: rubik;
+    width: fit-content;
+    font-size: 1.125rem;
+    color: var(--clr-negro-difuminado);
+    font-weight: var(--wgh-medium);
+    padding: 0.75rem;
+    border: none;
+    border-radius: 8px;
+    background-color: var(--clr-blanco);
+}
 
+#botonConvertir {
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 8px;
-    background-color: #007AFF;
+    background-color: #007aff;
     color: var(--clr-blanco);
     font-weight: 600;
     font-size: 1.5rem;
     display: block;
     cursor: pointer;
     padding: 20px 30px;
-    width: 100%;
-
+    width: fit-content;
 }
 
 @media (min-width: 601px) {
@@ -63,10 +70,8 @@ input {
     #botonConvertir {
         grid-column: 3/7;
     }
-
 }
 @media (min-width: 700px) {
-
     #botonConvertir {
         grid-column: 4/7;
     }

diff --git a/index.html b/index.html
@@ -27,43 +27,25 @@ <h1>Conversor</h1>
 
 
         <main class="main">
-            <form action="">
+            <form class="inputs">
                 <label for="ciudadOrigen">Ciudad Origen:</label>
-                <input id="ciudadOrigen"  type="search" list="listaCiudades" required placeholder="🔎 Ciudad origen">
+                <select id="ciudadOrigen" required></select>
 
                 <label for="">Hora:</label>
                 <input id="horaLocal" type="time" required>
 
                 <label for="">Ciudad Destino:</label>
-                <input id="ciudadDestino" type="search" list="listaCiudades" required placeholder="🔎 Ciudad destino">
+                <select id="ciudadDestino" required></select>
 
-                <button onclick="mostrarHoraConvertida()" id="botonConvertir">Convertir</button>
+                <button id="botonConvertir">Convertir</button>
             </form>
             <div id="resultado" class="resultado">
-
             </div>
         </main>
 
         <!-- Scripts -->
         <script src="./js/moment.js"></script>
         <script src="./js/moment-timezone.js"></script>
         <script src="./js/main.js"></script>
-
-        <!--Lista de ciudades-->
-        <datalist id="listaCiudades">
-            <option value="🇨🇴 Bogota"></option>
-            <option value="🇦🇷 Buenos Aires"></option>
-            <option value="🇦🇷 Cordoba"></option>
-            <option value="🇺🇾 Montevideo"></option>
-            <option value="🇨🇱 Santiago de Chile"></option>
-            <option value="🇵🇾 Asuncion"></option>
-            <option value="🇧🇴 La Paz"></option>
-            <option value="🇵🇪 Lima"></option>
-            <option value="🇪🇨 Guayaquil"></option>
-            <option value="🇵🇦 Panama"></option>
-            <option value="🇸🇻 El Salvador"></option>
-            <option value="🇵🇷 Puerto Rico"></option>
-            <option value="🇲🇽 Ciudad de Mexico"></option>
-        </datalist>
     </body>
 </html>