Auddity

const grassImage = document.getElementById('grassland');
const mountainsImage = document.getElementById('mountains');
const skyImage = document.getElementById('sky');

const heroData = document.getElementById('hero-data');

window.addEventListener('scroll', () => {
	let scrollPosition = window.scrollY;
	
	grassImage.style.transform = `translateY(${-scrollPosition * 0.02}%)`;

Auddity

const circleLinks = document.getElementById('circle-btns');

export const slider = () => {
  circleLinks.addEventListener('click', e => {
    const target = e.target;
    const circleArr = Array.from(circleLinks.children);
    circleArr.forEach(node => {
      if(target !== node.classList.contains('active-btn')) {
        node.classList.remove('active-btn');
      }

Auddity

.circle-btns-container {
    padding: 2rem;
    padding-inline-start: 0;

    .circle-btn {
      height: 5rem;
      width: 5rem;
      color: v.$white;
      padding: 1rem;
      border-radius: 50%;

Auddity

<div class="circle-btns-container" id="circle-btns">
  <!-- numbered links -->
  <a href="#" class="circle-btn active-btn">01.</a>
  <a href="#" class="circle-btn">02.</a>
  <a href="#" class="circle-btn">03.</a>
</div>

Auddity

const questions = document.querySelectorAll('.question');

questions.forEach(question => {
  question.addEventListener('click', () => {
    questions.forEach(item => {
      if(item !== question) {
        item.classList.remove('selected');
      }
    });

Auddity

/* Default view */
.question .answer {
	height: 0;
	visibility: hidden;
	opacity: 0;
	transition: all .3s ease-in-out;
}
.question img {
	transition: all .3s ease-in-out;
}

Auddity

<div class="question-container"
  <ul>
    <li class="question">
      <a href="#">
        <p>
          How many team members can I invite?
        </p>
        <img src="./images/icon-arrow-down.svg" alt="arrow">
      </a>
      <ul class="answer">

Auddity

const menuBtn = document.getElementById('menu-btn');
const menuContainer = document.getElementById('container');
const menuLinks = document.getElementById('links');

menuBtn.addEventListener('click', () => {
	const linksHeight = menuLinks.getBoundingClientRect().height;
	const containerHeight = menuContainer.getBoundingClientRect().height;
  
	containerHeight === 0
		? menuContainer.style.height = `${linksHeight}px`

Auddity

dropdown-menu-container {
	height: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}

Auddity

<div class="dropdown-menu">
	<div class="menu-btn" id="menu-btn">
		<i class="ri-menu-line ri-2x"></i>
	</div>
	<div class="dropdown-menu-container" id="container">
		<ul class="dropdown-menu-links" id="links">
			<li class="link-item">
				<a href="#">Home</a>
			</li>
			<li class="link-item">