Open in app

Sign in

Write

Sign in

FAQ Accordion Card Projesi

MUSTAFA YILDIZ
Kodcular
Published in
6 min readMar 3, 2023

--

Liste: WEB Projeleri — Frontend Mentor
Zorluk seviyesi: en kolay (newbie)
Proje numarası: 15. proje
Kullanılan teknolojiler: HTML + CSS (flex) + JavaScript
Mobil uyumluluk: Evet
Proje içeriği: Akordiyon Kart
GitHub: burada
Fikir kaynağı: Frontend Mentor

Kaynak kodlar:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="/frontend-mentor/faq-accordion-card-main/images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
  <title>Frontend Mentor | FAQ Accordion Card</title>
</head>

<body>

  <div class="container">


    <div class="section-1">

      <div class="picture">
        <img class="img-1">
        <img class="img-2">
      </div>

    </div>


    <div class="section-2">

      <div class="h1">
        <h1>
          FAQ
        </h1>
      </div>


      <div class="faq">
        <div class="question">
          <div class="p" id="p-1">
            <p>
              How many team members can I invite?
            </p>
          </div>

          <div class="ok">
            <button onclick="f1()"><img class="img" id="img-1"></button>
          </div>
        </div>

        <div class="answer" id="answer-1" style="display: none">
          <div class="p">
            <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>


      <div class="faq">
        <div class="question">
          <div class="p" id="p-2">
            <p>
              What is the maximum file upload size?
            </p>
          </div>

          <div class="ok">
            <button onclick="f2()"><img class="img" id="img-2"></button>
          </div>
        </div>

        <div class="answer" id="answer-2" style="display: none">
          <div class="p">
            <p>
              No more than 2GB. All files in your account must fit your allotted storage space.
            </p>
          </div>
        </div>
      </div>


      <div class="faq">
        <div class="question">
          <div class="p" id="p-3">
            <p>
              How do I reset my password?
            </p>
          </div>

          <div class="ok">
            <button onclick="f3()"><img class="img" id="img-3"></button>
          </div>
        </div>

        <div class="answer" id="answer-3" style="display: none">
          <div class="p">
            <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>


      <div class="faq">
        <div class="question">
          <div class="p" id="p-4">
            <p>
              Can I cancel my subscription?
            </p>
          </div>

          <div class="ok">
            <button onclick="f4()"><img class="img" id="img-4"></button>
          </div>
        </div>

        <div class="answer" id="answer-4" style="display: none">
          <div class="p">
            <p>
              Yes! Send us a message and we’ll process your request no questions asked.
            </p>
          </div>
        </div>
      </div>


      <div class="faq">
        <div class="question">
          <div class="p" id="p-5">
            <p>
              Do you provide additional support?
            </p>
          </div>

          <div class="ok">
            <button onclick="f5()"><img class="img" id="img-5"></button>
          </div>
        </div>

        <div class="answer" id="answer-5" style="display: none">
          <div class="p">
            <p>
              Chat and email support is available 24/7. Phone lines are open during normal business hours.
            </p>
          </div>
        </div>
      </div>

    </div>


  </div>

  <script src="main.js"></script>
</body>

</html>
@media (min-width: 1281px) {

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Kumbh Sans', sans-serif;
    }

    ::selection {
        background-color: hsl(14, 88%, 65%);
        color: white;
    }

    body {
        min-height: 100vh;
        background: linear-gradient(0deg, hsl(240, 73%, 65%), hsl(273, 75%, 66%));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        width: 1200px;
        display: flex;
        border-radius: 25px;
        background-image: url("/frontend-mentor/faq-accordion-card-main/images/bg-pattern-desktop.svg");
        background-color: white;
        margin-top: 150px;
        margin-bottom: 100px;
        padding-bottom: 50px;
    }

    .section-1 {
        width: 40%;
    }

    .section-1 .picture {
        display: flex;
        align-items: center;
        height: 100%;
        padding-left: 80px;
    }
    
    .section-1 .picture .img-1 {
        content: url("/frontend-mentor/faq-accordion-card-main/images/illustration-woman-online-desktop.svg");
        z-index: 99;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .section-1 .picture .img-2 {
        content: url("/frontend-mentor/faq-accordion-card-main/images/illustration-box-desktop.svg");
        z-index: 9999;
        width: 200px;
        position: absolute;
        margin-top: 80px;
        margin-left: -30px;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .section-2 {
        width: 60%;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .section-2 .h1 {
        text-align: center;
        color: hsl(238, 29%, 16%);
        padding-bottom: 30px;
        margin-top: 50px;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .faq {
        border-bottom: 1px solid hsl(240, 5%, 91%);
        width: 500px;
    }

    .faq:hover {
        cursor: pointer;
    }

    .faq:hover .question .p p {
        color: hsl(14, 88%, 65%);
    }

    .faq .question {
        display: flex;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .faq .question .p {
        width: 100%;
        height: 100%;
    }

    .faq .question p {
        text-align: center;
        line-height: 55px;
    }

    .faq .question button {
        width: 50px;
        height: 55px;
        border: none;
        cursor: pointer;
        background-color: #fff;
    }
    
    .faq .answer {
        width: 450px;
    }

    .faq .answer .p {
        width: 100%;
        height: 100%;
        padding-bottom: 20px;
    }

    .faq .answer p {
        text-align: center;
    }

    .ok .img {
        content: url("/frontend-mentor/faq-accordion-card-main/images/icon-arrow-down.svg");
        width: 15px;
    }

}


@media (max-width: 1280px) {

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Kumbh Sans', sans-serif;
    }

    ::selection {
        background-color: hsl(14, 88%, 65%);
        color: white;
    }

    body {
        min-height: 100vh;
        background: linear-gradient(0deg, hsl(240, 73%, 65%), hsl(273, 75%, 66%));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        margin-top: 150px;
        margin-bottom: 100px;
        width: 350px;
        display: flex;
        flex-direction: column;
        border-radius: 25px;
        background-image: url("/faq-accordion-card-main/images/bg-pattern-mobile.svg");
        background-color: white;
        padding-bottom: 40px;
    }

    .section-1 {
        height: 150px;
    }

    .section-1 .picture {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0%;
    }
    
    .section-1 .picture .img-1 {
        content: url("/faq-accordion-card-main/images/illustration-woman-online-mobile.svg");
        z-index: 99;
        width: 250px;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .section-2 {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .section-2 .h1 {
        text-align: center;
        color: hsl(238, 29%, 16%);
        padding-bottom: 30px;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .faq {
        border-bottom: 1px solid hsl(240, 5%, 91%);
        width: 300px;
    }

    .faq:hover {
        cursor: pointer;
    }

    .faq:hover .question .p p {
        color: hsl(14, 88%, 65%);
    }

    .faq .question {
        display: flex;
        padding-bottom: 20px;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .faq .question .p {
        width: 100%;
        height: 100%;
    }

    .faq .question p {
        text-align: center;
        line-height: 25px;
    }

    .faq .question button {
        width: 30px;
        height: 25px;
        border: none;
        cursor: pointer;
        background-color:#F0F0FD;
    }

    .faq .answer {
        width: 300px;
    }

    .faq .answer .p {
        width: 100%;
        height: 100%;
        padding-bottom: 20px;
    }

    .faq .answer p {
        text-align: center;
    }

    .ok .img {
        content: url("/faq-accordion-card-main/images/icon-arrow-down.svg");
        width: 15px;
    }
}
function f1() {

    var answer = document.getElementById("answer-1")
    var img = document.getElementById("img-1")
    var p = document.getElementById("p-1")

    if (answer.style.display == "none") {
        answer.style.display = "flex";
        img.style.transform = "rotateZ(-180deg)";
        img.style.transition = "linear  .8s"
        p.style.fontWeight = "700"
    } else {
        answer.style.display = "none";
        img.style.transform = "rotateZ(-360deg)";
        img.style.transition = "linear  .6s"
        p.style.fontWeight = "400"
    }
}


function f2() {
    var answer = document.getElementById("answer-2")
    var img = document.getElementById("img-2")
    var p = document.getElementById("p-2")

    if (answer.style.display == "none") {
        answer.style.display = "flex";
        img.style.transform = "rotateZ(-180deg)";
        img.style.transition = "linear  .8s"
        p.style.fontWeight = "700"
    } else {
        answer.style.display = "none";
        img.style.transform = "rotateZ(-360deg)";
        img.style.transition = "linear  .6s"
        p.style.fontWeight = "400"
    }
}


function f3() {
    var answer = document.getElementById("answer-3")
    var img = document.getElementById("img-3")
    var p = document.getElementById("p-3")

    if (answer.style.display == "none") {
        answer.style.display = "flex";
        img.style.transform = "rotateZ(-180deg)";
        img.style.transition = "linear  .8s"
        p.style.fontWeight = "700"
    } else {
        answer.style.display = "none";
        img.style.transform = "rotateZ(-360deg)";
        img.style.transition = "linear  .6s"
        p.style.fontWeight = "400"
    }
}


function f4() {
    var answer = document.getElementById("answer-4")
    var img = document.getElementById("img-4")
    var p = document.getElementById("p-4")

    if (answer.style.display == "none") {
        answer.style.display = "flex";
        img.style.transform = "rotateZ(-180deg)";
        img.style.transition = "linear  .8s"
        p.style.fontWeight = "700"
    } else {
        answer.style.display = "none";
        img.style.transform = "rotateZ(-360deg)";
        img.style.transition = "linear  .6s"
        p.style.fontWeight = "400"
    }
}


function f5() {
    var answer = document.getElementById("answer-5")
    var img = document.getElementById("img-5")
    var p = document.getElementById("p-5")

    if (answer.style.display == "none") {
        answer.style.display = "flex";
        img.style.transform = "rotateZ(-180deg)";
        img.style.transition = "linear  .8s"
        p.style.fontWeight = "700"
    } else {
        answer.style.display = "none";
        img.style.transform = "rotateZ(-360deg)";
        img.style.transition = "linear  .6s"
        p.style.fontWeight = "400"
    }
}
Masaüstü
Mobil
Web Development
HTML
CSS
JavaScript
Kodcular

--

--

MUSTAFA YILDIZ
Kodcular

Written by MUSTAFA YILDIZ

12 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams