Merge pull request #127 from Elliot-Hernandez/main

Diseño de botón para seleccionar el idioma de la página
sptm-unam · May 4, 2023 · e295efb · e295efb
2 parents 1b0350f + c544f05
commit e295efb
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 29 deletions.
diff --git a/css/style.css b/css/style.css
@@ -147,17 +147,17 @@ footer {
   align-items: center;
   height: 50px;
   overflow: hidden;
+  margin-right: 10vw;
 }
 
 .nav-title h1 {
   color: #000000;
 }
 
 .navbar ul {
-  margin-right: 1vw;
   list-style: none;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 100px repeat(auto-fill, 100px) 100px;
   justify-self: end;
 }
 
@@ -290,6 +290,18 @@ footer {
 /* Media Queries */
 /* Mobile Devices - Phones/Tablets */
 
+@media only screen and (min-width: 768px) {
+  .navbar {
+    margin-right: 11vw;
+  }
+}
+
+@media only screen and (min-width: 1400px) {
+  .navbar {
+    margin-right: 5vw;
+  }
+}
+
 @media only screen and (max-width: 720px) {
   .features {
     flex-direction: column;
@@ -312,6 +324,10 @@ footer {
 
   /* MOBILE NAVIGATION */
 
+  .navbar {
+    margin-right: 15vw;
+  }
+
   .navbar ul {
     display: flex;
     flex-direction: column;
@@ -342,6 +358,7 @@ footer {
   .bar {
     display: block;
     cursor: pointer;
+    margin-right: 14vw;
   }
 
   .mobile-nav {
@@ -547,3 +564,95 @@ footer {
     display: block;
   }
 }
+
+
+.switch-lang {
+  width: 80px;
+  text-align: left;
+  cursor: pointer;
+  z-index: 50;
+  position: absolute;
+  top: 12px;
+  right: 14px;
+}
+
+.switch-lang:hover .lang-dropdown {
+  display: block;
+}
+
+.switcher-link {
+  color: #fff;
+}
+
+.switcher-link:hover {
+  color: #fff;
+}
+
+.current-lang {
+  background: #ffffff;
+  padding: 3px 5px 0px 5px;
+  border-radius: 5px;
+  color: #000;
+  /* border: 1px solid #000; */
+}
+
+.lang-flag {
+  width: 20px;
+  display: inline-block;
+}
+
+.lang-text {
+  display: inline-block;
+  margin-left: 5px;
+  vertical-align: top;
+  margin-top: 1px;
+}
+
+.lang-text > a {
+  text-decoration: none;
+}
+
+.lang-dropdown {
+  display: none;
+  background: #ffffff;
+  border-radius: 5px;
+  margin-top: 2px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+}
+
+.selecting-lang {
+  padding: 3px 5px 3px 5px;
+  cursor: pointer;
+}
+
+.selecting-lang > a{
+  text-decoration: none;
+}
+
+.selecting-lang:hover {
+  background: #e8e8e8;
+  border-radius: 5px;
+}
+
+ul > :first-child {
+  border-radius: 5px 5px 0px 0px;
+}
+
+ul > :last-child {
+  border-radius: 0px 0px 5px 5px;
+}
+
+li {
+  list-style-type: none;
+}
+
+.menu-arrow {
+  display: inline-block;
+  width: 10px;
+  margin-left: 10px;
+  vertical-align: top;
+  margin-top: 6px;
+}
diff --git a/imgs/USA_icon.png b/imgs/USA_icon.png
diff --git a/imgs/fr_icon.png b/imgs/fr_icon.png
diff --git a/imgs/mex_icon.png b/imgs/mex_icon.png
diff --git a/index.html b/index.html
@@ -19,11 +19,6 @@
 </head>
 
 <body>
-  <!-- <ul id="lang">
-    <li><a href="?lang=es">es</a></li>
-    <li><a href="/?lang=en">en</a></li>
-    <li><a href="/?lang=fr">fr</a></li>
-  </ul> -->
   <header id="inicio">
     <div class="page-wrapper">
       <div class="nav-wrapper">
@@ -37,12 +32,37 @@ <h1>SPTM</h1>
             <span class="bar"></span>
           </div>
           <ul class="nav">
-
             <li for="link_inicio" class="nav-item"><a href="#inicio">inicio</a></li>
             <li for="link_sonido" class="nav-item"><a href="#sonido">sonido</a></li>
             <li for="link_acerca" class="nav-item"><a href="#acerca">acerca</a></li>
-            <li for="link_contacto" class="nav-item"><a href="#contacto">contacto</a></li>
+            <!-- <li for="link_" class="nav-item"><a href="#contacto">contacto</a></li> -->
           </ul>
+          <div class="switch-lang">
+            <div class="current-lang">
+              <img src="imgs/mex_icon.png" class="lang-flag" alt="bandera de México">
+            <p class="lang-text"><a href="?lang=es">Esp</a></p>
+            </div>
+
+            <div class="lang-dropdown">
+              <div class="selecting-lang">
+                <a href="/?lang=en"><img src="imgs/USA_icon.png" class="lang-flag" alt="bandera de EUA">
+              <p class="lang-text">Eng</p></a>
+              </div>
+              <div class="selecting-lang">
+                <a href="/?lang=fr"><img src="imgs/fr_icon.png" class="lang-flag" alt="bandera de Francia">
+              <p class="lang-text">Fr</p></a>
+              </div>
+            </div>
+          </div>
+
+<!--           <ul class="nav" id="lang">
+            <li><a href="?lang=es">es</a></li>
+            <li><a href="/?lang=en">en</a></li>
+            <li><a href="/?lang=fr">fr</a></li>
+          </ul> -->
+
+
+
         </nav>
       </div>
       <div class="titulo">
@@ -141,10 +161,10 @@ <h2 class="integrantes">Integrantes</h2>
           <img src="imgs/bg.jpeg" alt="Mike">
           <div class="container">
             <h3 class="name">Cristian <br>Bañuelos</h3>
-              <p class="type">Desarrollador</p>
-              <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
-              <p class="mail"><a href="#" target="_blank">Web personal</a></p>
-              <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
+            <p class="type">Desarrollador</p>
+            <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
+            <p class="mail"><a href="#" target="_blank">Web personal</a></p>
+            <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
           </div>
         </div>
       </div>
@@ -154,10 +174,10 @@ <h3 class="name">Cristian <br>Bañuelos</h3>
           <img src="imgs/bg.jpeg" alt="Mike">
           <div class="container">
             <h3 class="name">Xavier <br>Góngora</h3>
-              <p class="type">Desarrollador</p>
-              <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
-              <p class="mail"><a href="#" target="_blank">Web personal</a></p>
-              <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
+            <p class="type">Desarrollador</p>
+            <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
+            <p class="mail"><a href="#" target="_blank">Web personal</a></p>
+            <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
           </div>
         </div>
       </div>
@@ -167,10 +187,10 @@ <h3 class="name">Xavier <br>Góngora</h3>
           <img src="imgs/bg.jpeg" alt="Mike">
           <div class="container">
             <h3 class="name">Emilio <br>Ocelotl</h3>
-              <p class="type">Desarrollador</p>
-              <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
-              <p class="mail"><a href="#" target="_blank">Web personal</a></p>
-              <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
+            <p class="type">Desarrollador</p>
+            <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
+            <p class="mail"><a href="#" target="_blank">Web personal</a></p>
+            <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
           </div>
         </div>
       </div>
@@ -180,10 +200,10 @@ <h3 class="name">Emilio <br>Ocelotl</h3>
           <img src="imgs/bg.jpeg" alt="Mike">
           <div class="container">
             <h3 class="name">Elliot <br>Hernández</h3>
-              <p class="type">Desarrollador</p>
-              <!-- <p class="description">Estudiante de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
-              <p class="mail"><a href="#" target="_blank">Web personal</a></p>
-              <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
+            <p class="type">Desarrollador</p>
+            <!-- <p class="description">Estudiante de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
+            <p class="mail"><a href="#" target="_blank">Web personal</a></p>
+            <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
           </div>
         </div>
       </div>
@@ -193,10 +213,10 @@ <h3 class="name">Elliot <br>Hernández</h3>
           <img src="imgs/bg.jpeg" alt="Mike">
           <div class="container">
             <h3 class="name">Marianne <br>Teixido</h3>
-              <p class="type">Desarrolladora</p>
-              <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
-              <p class="mail"><a href="#" target="_blank">Web personal</a></p>
-              <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
+            <p class="type">Desarrolladora</p>
+            <!-- <p class="description">Egresado de maestría/Doctorado en Tecnología musical en la UNAM enfocado en ...</p> -->
+            <p class="mail"><a href="#" target="_blank">Web personal</a></p>
+            <p class="mail"><a href="mailto:ejem@hotmail.com">ejem@hotmail.com</a></p>
           </div>
         </div>
       </div>