diff --git a/css/style.css b/css/style.css index 1374b07..618ee16 100644 --- a/css/style.css +++ b/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); diff --git a/img/country-icon/Norwegian.png b/img/country-icon/Norwegian.png new file mode 100644 index 0000000..ab5146e Binary files /dev/null and b/img/country-icon/Norwegian.png differ diff --git a/img/country-icon/Polish.png b/img/country-icon/Polish.png new file mode 100644 index 0000000..644b20e Binary files /dev/null and b/img/country-icon/Polish.png differ diff --git a/img/country-icon/USA.png b/img/country-icon/USA.png new file mode 100644 index 0000000..68ca505 Binary files /dev/null and b/img/country-icon/USA.png differ diff --git a/img/country-icon/Vietnamese.png b/img/country-icon/Vietnamese.png new file mode 100644 index 0000000..6476c62 Binary files /dev/null and b/img/country-icon/Vietnamese.png differ diff --git a/img/country-icon/brazil.png b/img/country-icon/brazil.png new file mode 100644 index 0000000..41b82bc Binary files /dev/null and b/img/country-icon/brazil.png differ diff --git a/img/country-icon/bulgaria.png b/img/country-icon/bulgaria.png new file mode 100644 index 0000000..ca0cba6 Binary files /dev/null and b/img/country-icon/bulgaria.png differ diff --git a/img/country-icon/chez.png b/img/country-icon/chez.png new file mode 100644 index 0000000..9b4e6e8 Binary files /dev/null and b/img/country-icon/chez.png differ diff --git a/img/country-icon/china.png b/img/country-icon/china.png new file mode 100644 index 0000000..e653394 Binary files /dev/null and b/img/country-icon/china.png differ diff --git a/img/country-icon/croatia.png b/img/country-icon/croatia.png new file mode 100644 index 0000000..1dc15e2 Binary files /dev/null and b/img/country-icon/croatia.png differ diff --git a/img/country-icon/denmark.png b/img/country-icon/denmark.png new file mode 100644 index 0000000..a06cb5b Binary files /dev/null and b/img/country-icon/denmark.png differ diff --git a/img/country-icon/finland.png b/img/country-icon/finland.png new file mode 100644 index 0000000..c652fc0 Binary files /dev/null and b/img/country-icon/finland.png differ diff --git a/img/country-icon/france.png b/img/country-icon/france.png new file mode 100644 index 0000000..fd06f84 Binary files /dev/null and b/img/country-icon/france.png differ diff --git a/img/country-icon/germany.png b/img/country-icon/germany.png new file mode 100644 index 0000000..64f9777 Binary files /dev/null and b/img/country-icon/germany.png differ diff --git a/img/country-icon/greece.png b/img/country-icon/greece.png new file mode 100644 index 0000000..0fa7e5e Binary files /dev/null and b/img/country-icon/greece.png differ diff --git a/img/country-icon/hungary.png b/img/country-icon/hungary.png new file mode 100644 index 0000000..d82edfc Binary files /dev/null and b/img/country-icon/hungary.png differ diff --git a/img/country-icon/india.png b/img/country-icon/india.png new file mode 100644 index 0000000..4f4195d Binary files /dev/null and b/img/country-icon/india.png differ diff --git a/img/country-icon/italy.png b/img/country-icon/italy.png new file mode 100644 index 0000000..bb394d9 Binary files /dev/null and b/img/country-icon/italy.png differ diff --git a/img/country-icon/japan.png b/img/country-icon/japan.png new file mode 100644 index 0000000..d2517a3 Binary files /dev/null and b/img/country-icon/japan.png differ diff --git a/img/country-icon/korea.png b/img/country-icon/korea.png new file mode 100644 index 0000000..cf95dc3 Binary files /dev/null and b/img/country-icon/korea.png differ diff --git a/img/country-icon/lithuanian.png b/img/country-icon/lithuanian.png new file mode 100644 index 0000000..6b60fd1 Binary files /dev/null and b/img/country-icon/lithuanian.png differ diff --git a/img/country-icon/netherlands.png b/img/country-icon/netherlands.png new file mode 100644 index 0000000..794e27f Binary files /dev/null and b/img/country-icon/netherlands.png differ diff --git a/img/country-icon/romania.png b/img/country-icon/romania.png new file mode 100644 index 0000000..6357b2b Binary files /dev/null and b/img/country-icon/romania.png differ diff --git a/img/country-icon/russia.png b/img/country-icon/russia.png new file mode 100644 index 0000000..2412ced Binary files /dev/null and b/img/country-icon/russia.png differ diff --git a/img/country-icon/spain.png b/img/country-icon/spain.png new file mode 100644 index 0000000..4438d6a Binary files /dev/null and b/img/country-icon/spain.png differ diff --git a/img/country-icon/sweeden.png b/img/country-icon/sweeden.png new file mode 100644 index 0000000..7b62bc6 Binary files /dev/null and b/img/country-icon/sweeden.png differ diff --git a/img/country-icon/thailand.png b/img/country-icon/thailand.png new file mode 100644 index 0000000..a49ac81 Binary files /dev/null and b/img/country-icon/thailand.png differ diff --git a/img/country-icon/turkey.png b/img/country-icon/turkey.png new file mode 100644 index 0000000..6c6b1b3 Binary files /dev/null and b/img/country-icon/turkey.png differ diff --git a/img/country-icon/ukraine.png b/img/country-icon/ukraine.png new file mode 100644 index 0000000..3e71d69 Binary files /dev/null and b/img/country-icon/ukraine.png differ diff --git a/index.html b/index.html index 85784ab..3fa1edb 100644 --- a/index.html +++ b/index.html @@ -193,39 +193,42 @@

Ready to start your journey?

IMAGINE A PLACE

-
- - +
+
+ English, USA +
+
+
    +
  • български
    • +
  • Čeština
    • +
  • Dansk
    • +
  • Deutsch
    • +
  • Ελληνικά
    • +
  • English, USA
    • +
  • Español
    • +
  • Suomi
    • +
  • Français
    • +
  • हिंदी
    • +
  • Hrvatski
    • +
  • Magyar
    • +
  • Italiano
    • +
  • 日本語
    • +
  • 한국어
    • +
  • Lietuviškai
    • +
  • Nederlands
    • +
  • Norwegian
    • +
  • Polski
    • +
  • Português do Brasil
    • +
  • Română
    • +
  • Русский
    • +
  • Svenska
    • +
  • ไทย
    • +
  • Türkçe
    • +
  • Українська
    • +
  • Tiếng Việt
    • +
  • 中文
    • +
  • 繁體中文
    • +
diff --git a/js/script.js b/js/script.js index bad2b48..6b381a7 100644 --- a/js/script.js +++ b/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");