Cultura-travelsCultura-travels
+ Poblaci贸n: ${country.population}
+脕rea: ${country.area}
+Pa铆ses Frontera: ${country.borders}
+Idiomas: ${languages}
+
${data.countries[k].name.common}
+ `;
+ }
+ }
+ }
+ }
+ }
+ root.innerHTML = banderasLimitantes;
+ });
+
+// Boton de filtro Idioma
+ const btnIdioma = document.getElementById('idioma')
+ let banderasByIdioma = '';
+
+ btnIdioma.addEventListener('click',function () {
+ const inputIdioma = document.getElementById('input');
+ for (let i=0; i
${data.countries[i].name.common}
+ `;
+ }
+ }
+ }
+ root.innerHTML = banderasByIdioma;
+ })
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
index e69de29b..b045577d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,177 @@
+body{
+ background-image:url('Imagenes/SALAR-DE-UYUNI-REVISTA-TIME.jpg');
+
+}
+
+h1{
+ display: flex; /* visualizar contenido */
+ justify-content:center; /* se aplica a display: center para que el texto quede centrado*/
+ padding: 10px;
+ background-color: #3ede2f;
+ color: #f5eeee; /*Color de letra*/
+ margin: 40px;
+ }
+
+#sudamerica{ /* imagen que esta en el titulo*/
+ width: 60px;
+}
+
+#root{ /* todo lo del estilo cajon de banderas*/
+ width: 1200px; /* me trae el ancho del cajon*/
+ display: flex; /* me muestra las banderas distribuidas en toda la pagina */
+ flex-wrap: wrap; /* Permite que las banderas se denvuelvan en filas */
+ justify-content: space-between; /* Distribuye las filas horizontalmente */
+ padding: 30px;
+ justify-content: center; /* Centra horizontalmente */
+
+}
+
+anside { /*botones */
+ padding: 300px; /* Espaciado interno en la caja donde estan los botones*/
+}
+
+anside button { /* Estilos para los botones */
+ margin: 10px; /* Margen izquierdo y derecho de los botones */
+ padding: 10px 15px; /* Relleno interno de los botones */
+ cursor: pointer; /* Cambia el cursor al pasar sobre los botones */
+}
+
+
+footer {
+ text-align: center; /* Centra el contenido del pie de p谩gina */
+ background-color: #3ede2f ; /* Color de fondo del pie de p谩gina */
+ padding: 5px; /* Espaciado interno para el recuadro */
+ font-family: "arial", "helvetica", sans-serif; /* tipo de letra del pie de pagina */
+ color: #f5eeee;
+ margin: 40px;
+ font-size: 15px; /* cambia tama帽o del letra de pagina */
+
+}
+
+.Bandera{ /*estilo de banderas */
+ transition: transform 0.5s ease-in-out; /* Transici贸n suave para la propiedad 'transform' en 0.5 segundos con efecto de aceleraci贸n suave */
+ cursor: pointer;
+ margin: 20PX;
+ width: 250PX;
+ height: 150PX;
+ font-size: 1000px;
+ z-index: 1; /* Establece un 铆ndice z para las banderas */
+}
+
+.Bandera.rotate {
+ transform: rotateY(180deg); /* Gira la imagen en el eje Y, creando un efecto de volteo */
+ overflow: hidden; /* Oculta el contenido que se desborda del contenedor */
+ z-index: 1; /* Establece el 铆ndice z para controlar la superposici贸n de elementos */
+
+}
+
+
+
+/* Consulta de medios para dispositivos m贸viles */
+@media (max-width: 767px) {
+ /* Estilos espec铆ficos para dispositivos m贸viles */
+ h1 {
+ font-size: 24px;
+ margin: 20px;
+ }
+
+ anside {
+ padding: 5px;
+ }
+
+ anside button {
+ margin: 5px 10px;
+ padding: 5px 10px;
+ }
+}
+
+.nombres {
+ color: aqua;
+}
+
+/* Estilos para el contenedor envolvente de la bandera */
+.bandera-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* Estilos para el formato de texto en la tarjeta trasera de informaci贸n */
+.info-back{
+ white-space: normal ; /* Controla c贸mo se manejan los espacios en blanco y saltos de l铆nea */
+ word-break: break-all; /* Controla c贸mo se rompen las palabras en caso de que excedan el ancho */
+}
+
+.bandera-container.show-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: fixed; /* Posici贸n fija en la ventana del navegador */
+ top: 0; /* Ubicaci贸n en la parte superior de la ventana */
+ left: 0; /* Ubicaci贸n en el extremo izquierdo de la ventana */
+ width: 100%; /* Ancho ocupa toda la ventana */
+ height: 100%; /* Alto ocupa toda la ventana */
+ display: center; /* Utiliza el modelo de caja flexible */
+ justify-content: center; /* Centra elementos horizontalmente */
+ align-items: center; /* Centra elementos verticalmente */
+ background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente para el efecto de superposici贸n */
+ z-index: 9999; /* Capa de apilamiento alta para mostrar encima de otros elementos */
+ }
+
+ .info-back {
+
+ height: 30%; /*Alto de la tarjeta trasera en relaci贸n al contenedor envolvente */
+ width: 30%; /* Ancho de la tarjeta trasera en relaci贸n al contenedor envolvente */
+ background-color: rgb(218, 243, 198); /* Color de fondo de la tarjeta trasera */
+ border-radius: 5px; /* Borde redondeado para la tarjeta trasera */
+ display: none; /* Oculta la tarjeta trasera por defecto */
+ opacity: 0; /* Opacidad inicial de la tarjeta trasera (transparente) */
+ transform: rotateY(180deg) scale(0); /* Volteo y escala para animaci贸n de entrada */
+ transition: opacity 1s ease-in-out, transform 1s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out; /* Transiciones suaves para animaciones */
+ display: flex; /* Utiliza el modelo de caja flexible para contenido interno */
+ flex-direction: column; /* Alinea elementos verticalmente en una columna */
+ justify-content: 100%; /* Ajusta el ancho del texto al 100% del contenedor */
+ position: absolute; /* Posiciona el elemento de forma absoluta en relaci贸n a su contenedor padre */
+ z-index: 2; /* Establece un 铆ndice z mayor para el cuadro de texto */
+ padding: 3px; /* Agrega un margen alrededor del contenido del cuadro */
+ box-sizing: 100%; /* Incluye el padding en el ancho y alto total del elemento */
+ white-space: nowrap; /* Evita que el texto se divida en varias l铆neas */
+ overflow: visible; /* Oculta el texto que desborda el contenedor */
+ text-overflow: ellipsis; /* Muestra "..." al final del texto que desborda */
+}
+
+/* Estilos para mostrar la informaci贸n ampliada en la bandera (parte trasera) */
+.bandera-container.show-info .info-back {
+ display: center; /* Muestra el contenido de la parte trasera */
+ opacity: 1; /* Opacidad completa para hacer visible el contenido */
+ transform: rotateY(0deg) scale(2); /* Vuelve a la posici贸n normal y escala la tarjeta */
+}
+
+/* Estilos para el t铆tulo en la parte trasera de la bandera */
+.info-back h4{
+ display: flex; /* Utiliza el modelo de caja flexible */
+ justify-content: center; /* Centra el contenido horizontalmente */
+}
+
+.info-back p{
+ font-size: x-small;
+ line-height: 0.2;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+