<link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
  <div class="card-container">

    <!-- IMAGES CONTAINER -->
    <div id="left-side">
      <div class="container-img-desktop">
        <img class="woman-desk" src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/illustration-woman-online-desktop.svg" alt="woman">
      </div>
      <div class="container-img-mob">
        <img class="pattern-mobile" src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/bg-pattern-mobile.svg" alt="pattern">
        <img class="woman-mobile" src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/illustration-woman-online-mobile.svg" alt="woman">
      </div>
      <img class="box-img" src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/illustration-box-desktop.svg" alt="box">
    </div>

    <!-- TEXT CONTAINER -->
    <div id="right-side">
      <h1>FAQ</h1>
      <div class="question-container">
        <div class="question">
          <p>How many team members can I invite?</p>
          <img src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/icon-arrow-down.svg" alt="arrow down"  class="arrow">
        </div>
        <div class="hidden">
          <p>You can invite up to 2 additional users on the Free plan. There is no limit on 
            team members for the Premium plan.</p>
        </div>
      </div>
      <div class="question-container">
        <div class="question">
          <p>What is the maximum file upload size?</p>
          <img src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/icon-arrow-down.svg" alt="arrow down"  class="arrow">
        </div>
        <div class="hidden">
          <p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
        </div>
      </div>
      <div class="question-container">
        <div class="question">
          <p>How do I reset my password?</p>
          <img src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/icon-arrow-down.svg" alt="arrow down"  class="arrow">
        </div>
        <div class="hidden">
          <p>Click “Forgot password” from the login page or “Change password” from your profile page.
            A reset link will be emailed to you.</p>
        </div>
      </div>
      <div class="question-container">
        <div class="question">
          <p>Can I cancel my subscription?</p>
          <img src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/icon-arrow-down.svg" alt="arrow down" class="arrow">
        </div>
        <div class="hidden">
          <p>Yes! Send us a message and we’ll process your request no questions asked.</p>
        </div>
      </div>
      <div class="question-container">
        <div class="question">
          <p>Do you provide additional support?</p>
          <img src="https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/icon-arrow-down.svg" alt="arrow down"  class="arrow">
        </div>
        <div class="hidden">
          <p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
        </div>
      </div>
      
    </div>
  </div>

  <!-- Attribution -->
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://codepen.io/viktoriiazaichuk">Viktoriia Zaichuk</a>.
  </div>
</body>
/* COLORS */
$barColor: hsl(240, 5%, 91%);
$barTextActiveColor: hsl(238, 29%, 16%);
$arrowColor: hsl(14, 88%, 65%);
$barTextColor: hsl(237, 12%, 33%);
$hiddenTextColor: hsl(240, 6%, 50%);


/* TEXT */
$font: 'Kumbh Sans', sans-serif;
/* GENERAL STYLES */
*, *::before, *::after {
    box-sizing: inherit;
}
  
* {
    margin: 0;
    padding: 0;
}
  
html {
    box-sizing: border-box;
    font-size: 62.5%;
}

body {
    background: rgb(175,103,233);
    background: linear-gradient(180deg, rgba(175,103,233,1) 0%, rgba(101,101,231,1) 100%);
    font-size: 1.2rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: $font;
    position: relative;
}

.attribution { 
    font-size: 11px; 
    text-align: center; 
    position: absolute;
    bottom: 3rem;
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

.card-container {
    display: flex;
    margin: 2rem 0;
    border-radius: 1rem;
    min-height: 45rem;
    width: 90rem;
    border-radius: 1rem;
    background-color: whitesmoke;
    box-shadow: 0 2rem 3rem rgba(17, 15, 15, 0.2);
}


/* left-side */
#left-side {
    flex: 1 1 0;
    position: relative;
} 

.container-img-mob {
    display: none;
}

.container-img-desktop {
    overflow: hidden;
    position: relative;
    height: 100%;
    background-image: url("https://raw.githubusercontent.com/ViktoriiaZaichuk/faq-accordion-card-main/48bb14e632a5bd5d9190da88b45d21622dd2ed14/img/bg-pattern-desktop.svg");
    background-repeat: no-repeat;
    background-size: 190%;
    background-position: -455px -235px;
} 

.pattern-desk {
    position: relative;
    bottom: 300px;
    right: 570px;
}
.woman-desk {
    position: absolute;
    top: 40px;
    left: -100px;
    z-index: 1;

}
.box-img {
    position: absolute;
    top: 175px;
    left: -110px;
    z-index: 3;
}




/* RIGHT */
#right-side {
    flex: 1 1 0;
    padding-left: 1rem 0 1rem 3rem;
    margin: 1.5rem;
    align-self: center;
}

h1 {
    padding: 2rem 3rem 2rem 0;
}

.question-container {
    border-bottom: solid $barColor .1rem;
    max-width: 350px;
    padding: 2rem 0;
}

.question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.question p {
    color: $barTextColor;
    font-weight: 400;
}

.question:hover p {
    color: $arrowColor;
}

.hidden {
    display: none;
}

.hidden p {
    color: $hiddenTextColor;
    padding: 1rem 3rem 0 0;
}


.question-active p {
    color: $barTextActiveColor;
    font-weight: 700;
    font-size: 1.3rem;
}

.question-active:hover p {
    color: $barTextActiveColor;
}

.arrow {
    display: block;
    transform-origin: center;
    transition: 0.5s;
    padding: 0 1.5rem;
}  

.question-active .arrow-active {
    transition: 0.5s;
    transform: rotate(-180deg);
}
 

/* RESPONSIVE */

@media only screen and (max-width: 1050px) {
    .card-container {
        margin: 120px 0;
        flex-direction: column;
        max-width: 90vw;
    }
    #left-side {
        height: 30%;
    } 
    .container-img-desktop {
        display: flex;
    }

    .box-img {
        display: none;
    }

    .container-img-mob {
        display: block;
    }

    .pattern-mobile {
        position: relative;
        left: 50%;
        transform: translate(-50%, -50%); 
        top: 45px;

    }
    .woman-mobile {
        position: absolute;
        top: -10%;
        left: 46%; 
        transform: translate(-50%, -50%); 
    }

    h1 {
        text-align: center;
        padding: .5rem 0 2rem 0;
    }
    #right-side {
        height: 70%;
        padding: 2rem 0 3rem 0s;
        margin: 1rem 2rem 3rem 2rem;
    }
    
}
View Compiled
    $(".question").click(function(){ 
        //console.log("click click!");
        $(this).toggleClass("question-active");
        $(this).next().slideToggle(700);
        $(this).children("img.arrow").toggleClass("arrow-active");
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.