logo_tbb
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; color: white; font-size: 1.1rem; } body{ height: 100vh; width: 100%; background-image: url(https://www.thebamboobasket.com/wp-content/uploads/2020/08/wp2857074.jpg); background-position: center; background-size: cover; } .my-link{ display: flex; justify-content: space-evenly; width: 200px; margin: auto; margin-top: 50px; } .dropdown-selection-container{ width: 350px; margin: auto; margin-top: 20px; } .selection{ display: flex; justify-content: space-between; backdrop-filter: blur(5px); background-color: rgba(255,255,255,0.2); border-radius: 10px; cursor: pointer; } .selected-option{ padding: 12px 0 12px 18px; flex: 1; border-radius: 6px 0 0 0; } .dropdown-icon{ padding: 8px 16px; display: flex; align-items: center; border-radius: 0 10px 10px 0; background-color: rgba(255,255,255,0.2); } .options{ display: none; border-top: none; cursor: pointer; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(5px); margin-top: 15px; border-radius: 10px; color: white; } .option:nth-child(1){ border-bottom: 1px solid white; color: white; } .go-active{ display: block; } .option{ padding: 10px 18px; transition: 0.1s ease-in; } const selectOption = document.querySelector('.selection'); const optionBox = document.querySelector('.options'); const options = document.querySelectorAll('.option'); const selectedOption = document.querySelector('.selected-option'); const defaultOption = document.querySelector('.choose'); selectedOption.innerText = defaultOption.innerText options.forEach((option, index) => { option.addEventListener('mouseover',() => { if(index === 0){ return } else if(index === 3){ option.style.borderRadius = '0 0 10px 10px' } option.style.backgroundColor = 'rgba(255,255,255,0.1)' }) option.addEventListener('mouseleave',() => { option.style.backgroundColor = 'rgba(255,255,255,0)' }) option.addEventListener('click',() => { if(index === 0) return selectedOption.innerText = option.innerText optionBox.classList.toggle('go-active'); switch(selectedOption.innerText){ case 'Sea': changeBackground('https://images.pexels.com/photos/37403/bora-bora-french-polynesia-sunset-ocean.jpg?cs=srgb&dl=sea-nature-sky-sunset-37403.jpg&fm=jpg') break; case 'Forest': changeBackground('https://images.pexels.com/photos/240040/pexels-photo-240040.jpeg?cs=srgb&dl=bright-daylight-environment-forest-240040.jpg&fm=jpg') break; case 'Mountain': changeBackground('https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?cs=srgb&dl=altitude-clouds-cold-daylight-417173.jpg&fm=jpg') break; default: changeBackground('https://images.pexels.com/photos/122458/pexels-photo-122458.jpeg?cs=srgb&dl=yellow-surface-122458.jpg&fm=jpg'); } }); }); function changeBackground(url){ return document.body.style.backgroundImage = `linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3)),url(${url})`; } selectOption.addEventListener('click',() => { optionBox.classList.toggle('go-active'); }); document.body.addEventListener('click',(e) => { if(e.target.nodeName === 'BODY') optionBox.classList.remove('go-active'); })