#138. Made language selector similar to original

css/style.css

@@ -1097,6 +1097,170 @@ p {
 
 }
 
+.dropdown{
+  min-width:5em;
+  max-width: 10em;
+  position: relative;
+  margin-top: 24px;
+  align-items: center;
+}
+
+.dropdown * {
+  box-sizing: border-box;
+  font-family: "Whitney Regular";
+}
+
+.selected {
+  display: flex;
+  align-items: center;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+}
+
+.select{
+  background: transparent;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.select img{
+  border-radius: 2.5px/2px;
+  height: 16px;
+  width: 24px;
+  margin-right: 8px;
+}
+
+.caret {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid #fff;
+  transition: 0.3s;
+}
+
+.caret-rotate{
+  transform: rotate(180deg);
+}
+
+.menu {
+  list-style: none;
+  background: white;
+  color:#23272a;
+  position: absolute;
+  top: -330px;
+  opacity: 0;
+  display:none;
+  transition: 0.2s;
+  max-height: 320px;
+  min-width: 150px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: contain;
+  border-radius: 0.5em;
+  box-shadow: -2px -2px 4px 1px rgba(174, 171, 171, 0.2);
+}
+
+.menu img{
+  border-radius: 2.5px/2px;
+  height: 16px;
+  width: 24px;
+  margin-right: 8px;
+}
+
+::-webkit-scrollbar-track{
+  border-radius: 20em;
+}
+
+.menu li{
+  padding: 8px;
+  cursor:pointer;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.menu li:hover{
+  background: #e3e4e5;
+}
+
+.menu-open {
+  display: block;
+  opacity: 1;
+}
+
+
+
+
+/* .dropdown{
+  position: relative;
+  margin-top: 20px;
+  width: 100px;
+}
+
+.dropdown::before{
+  content: '';
+  position: absolute;
+  right:20px;
+  top: 15px;
+  z-index: 10000;
+  width: 8px;
+  height: 8px;
+  border: 2px solid#333;
+  border-top: 2px solid#fff;
+  border-right: 2px solid#fff;
+  transform: rotate(135deg);
+  transition: 0.5s;
+  pointer-events: none;
+}
+
+.dropdown input{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 10%;
+  background: #23272a;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  padding: 12px 20px;
+  border-radius: 10px;
+}
+
+.dropdown .option{
+  position: absolute;
+  top: 70px;
+  width: 100%;
+  background: #23272a;
+  box-shadow: 0 30px 30px rgba(0,0,0,0.5);
+  border-radius: 10px;
+  overflow: hidden;
+  display: none;
+}
+
+.dropdown > .option > div{
+  padding: 12px 2ppx;
+  cursor: pointer;
+}
+
+.dropdown .option div:hover{
+  background: blue;
+  color: #fff;
+}
+
+.dropdown .option div img {
+  position: relative;
+  top: 4px;
+  font-size: 1.2em;
+} */
+
 @keyframes scrollbtn {
   from {
     transform: translateY(2rem);

index.html

@@ -193,39 +193,42 @@ <h1>Ready to start your journey?</h1>
     <div class="footer-nav">
       <div class="socials">
         <h4>IMAGINE A PLACE</h4>
-        <div class="language">
-          <img src="img/Flag-logo.png" />
-          <select id="country">
-            <option value="Bulgarian">български</option>
-            <option value="Czech">Čeština</option>
-            <option value="Danish">Dansk</option>
-            <option value="German">Deutsch</option>
-            <option value="Greek">Ελληνικά</option>
-            <option value="English" selected>English, USA</option>
-            <option value="Spanish">Español</option>
-            <option value="Finnish">Suomi</option>
-            <option value="French">Français</option>
-            <option value="Hindi">हिंदी</option>
-            <option value="Croatian">Hrvatski</option>
-            <option value="Hungarian">Magyar</option>
-            <option value="Italian">Italiano</option>
-            <option value="Japanese">日本語</option>
-            <option value="Korean">한국어</option>
-            <option value="Lithuanian">Lietuviškai</option>
-            <option value="Dutch">Nederlands</option>
-            <option value="Norwegian">Norwegian</option>
-            <option value="Polish">Polski</option>
-            <option value="Brazilian Portuguese">Português do Brasil</option>
-            <option value="Romanian">Română</option>
-            <option value="Russian">Русский</option>
-            <option value="Swedish">Svenska</option>
-            <option value="Thai">ไทย</option>
-            <option value="Turkish">Türkçe</option>
-            <option value="Ukrainian">Українська</option>
-            <option value="Vietnamese">Tiếng Việt</option>
-            <option value="Simplified Chinese">中文</option>
-            <option value="Traditional Chinese">繁體中文</option>
-          </select>
+        <div class = "dropdown">
+          <div class = "select">
+            <span class = "selected"><img src="img/Flag-logo.png" />English, USA</span>
+            <div class="caret"></div>
+          </div>
+          <ul class="menu">
+            <li value="Bulgarian"><img src="img/country-icon/bulgaria.png" />български</li>
+            <li value="Czech"><img src="img/country-icon/chez.png" />Čeština</li>
+            <li value="Danish"><img src="img/country-icon/denmark.png" />Dansk</li>
+            <li value="German"><img src="img/country-icon/germany.png" />Deutsch</li>
+            <li value="Greek"><img src="img/country-icon/greece.png" />Ελληνικά</li>
+            <li value="English" class = "active"> <img src="img/Flag-logo.png" />English, USA</li>
+            <li value="Spanish"><img src="img/country-icon/spain.png" />Español</li>
+            <li value="Finnish"><img src="img/country-icon/finland.png" />Suomi</li>
+            <li value="French"><img src="img/country-icon/france.png" />Français</li>
+            <li value="Hindi"><img src="img/country-icon/india.png" />हिंदी</li>
+            <li value="Croatian"><img src="img/country-icon/croatia.png" />Hrvatski</li>
+            <li value="Hungarian"><img src="img/country-icon/hungary.png" />Magyar</li>
+            <li value="Italian"><img src="img/country-icon/italy.png" />Italiano</li>
+            <li value="Japanese"><img src="img/country-icon/japan.png" />日本語</li>
+            <li value="Korean"><img src="img/country-icon/korea.png" />한국어</li>
+            <li value="Lithuanian"><img src="img/country-icon/lithuanian.png" />Lietuviškai</li>
+            <li value="Dutch"><img src="img/country-icon/netherlands.png" />Nederlands</li>
+            <li value="Norwegian"><img src="img/country-icon/Norwegian.png" />Norwegian</li>
+            <li value="Polish"><img src="img/country-icon/Polish.png" />Polski</li>
+            <li value="Brazilian Portuguese"><img src="img/country-icon/brazil.png" />Português do Brasil</li>
+            <li value="Romanian"><img src="img/country-icon/romania.png" />Română</li>
+            <li value="Russian"><img src="img/country-icon/russia.png" />Русский</li>
+            <li value="Swedish"><img src="img/country-icon/sweeden.png" />Svenska</li>
+            <li value="Thai"><img src="img/country-icon/thailand.png" />ไทย</li>
+            <li value="Turkish"><img src="img/country-icon/turkey.png" />Türkçe</li>
+            <li value="Ukrainian"><img src="img/country-icon/ukraine.png" />Українська</li>
+            <li value="Vietnamese"><img src="img/country-icon/Vietnamese.png" />Tiếng Việt</li>
+            <li value="Simplified Chinese"><img src="img/country-icon/china.png" />中文</li>
+            <li value="Traditional Chinese"><img src="img/country-icon/china.png" />繁體中文</li>
+          </ul>
         </div>
         <div class="links">
           <a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a>

js/script.js

@@ -64,13 +64,46 @@ let hidden = document.querySelector('.hidden');
 hamburger.addEventListener('click',function(e){
   menu.classList.add('show');
   hidden.style.display = 'flex';
-})
+});
 
 close.addEventListener('click',function(e){
   menu.classList.remove('show');
   hidden.style.display = 'none';
 });
 
+const dropdowns = document.querySelectorAll('.dropdown');
+
+dropdowns.forEach(dropdown => {
+  const select = dropdown.querySelector('.select');
+  const caret = dropdown.querySelector('.caret');
+  const menu = dropdown.querySelector('.menu');
+  const options = dropdown.querySelectorAll('.menu li');
+  const selected = dropdown.querySelector('.selected');
+  console.log(options);
+  select.addEventListener('click', () => {
+    select.classList.toggle('select-clicked');
+    caret.classList.toggle('caret-rotate');
+    menu.classList.toggle('menu-open');
+  });
+
+  options.forEach(option => {
+    option.addEventListener('click', () => {
+      selected.innerHTML = option.innerHTML;
+      select.classList.remove('select-clicked');
+      caret.classList.remove('caret-rotate');
+      menu.classList.remove('menu-open');
+
+      options.forEach(option => {
+        option.classList.remove('active');
+      });
+
+      option.classList.add('active');
+    });
+  });
+});
+
+
+
 // function download(x) {
 //   if(x === "Windows"){
 //     window.open("https://discord.com/api/downloads/distributions/app/installers/latest?channel=stable&platform=win&arch=x86");