Skip to content

more codes #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 24, 2023
Merged

more codes #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions faq-accordion-card-main/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,28 +34,28 @@ <h1>FAQ</h1>
<div class="card-body-item">
<h2>How many team members can I invite?<span><img src="./images/icon-arrow-down.svg"
alt="arrow image"></span></h2>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
<p class="visible">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 class="card-body-item">
<h2>What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg"
alt="arrow image"></span></h2>
<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
<p class="visible">No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="card-body-item">
<h2>How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt="arrow image"></span></h2>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
<p class="visible">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 class="card-body-item">
<h2>Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt="arrown image"></span>
</h2> <span><img src="./images/" alt=""></span>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
<p class="visible">Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="card-body-item">
<h2>Do you provide additional support?<span><img src="./images/icon-arrow-down.svg"
alt="arrown image"></span></h2>
<p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
<p class="visible">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions faq-accordion-card-main/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
(function () {
const hoverTexts = document.querySelectorAll(".card-body-item h2");
const rotateImgs = document.querySelectorAll(".card-body-item img");
const hiddenTexts = document.querySelectorAll(".card-body-item p");


hoverTexts.forEach((text, index) => {
text.addEventListener("click", () => {
rotateImgs[index].style.transform = "rotate(180deg)";
hiddenTexts[index].style.display = "block";
});
});
})();
28 changes: 18 additions & 10 deletions faq-accordion-card-main/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ body{
justify-self: center;
min-height:100vh ;
background-image: linear-gradient(to bottom, var(--Soft-violet), var(--Soft-blue));
padding: 2rem 0.9rem;
padding: 2rem 1rem;
}
main{
margin: 2rem auto;
Expand Down Expand Up @@ -76,7 +76,7 @@ img{
}

.card{
padding: 2rem 0.8rem;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -88,7 +88,7 @@ img{
}

h2{
font-size: 0.8rem;
font-size: 0.9rem;
color: var(--Dark-grayish-blue);
padding-block: 1rem;
display: flex;
Expand All @@ -105,18 +105,26 @@ p{
display:none;
}

.card-body-item h2:hover span img,
.card-body-item h2:focus span img,
.card-body-item h2:active span img {
.card-body-item img.rotated {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
}

.card-body-item p.visible {
display: block;
transition: display 0.3s ease-in-out;
}

/* .card-body-item h2:hover span img {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}

.card-body-item h2:hover,
.card-body-item h2:hover,
.card-body-item h2:focus {
color: var(--Very-dark-desaturated-blue);
color: var(--Soft-red);
transition: color 0.3s ease-in-out;
}
} */



Expand Down