I thought that I would have issues with the JavaScript, but the images were difficult for me. What can you recommend for me to get the desktop to appear "layered" with the box on the outside of the card?
Thank you in advance for all of your ideas and suggestions!
i m no master coder but i found a guy around here that use a <picture> <source srcset="/media/cc0-images/surfer-240-200.jpg" atl="this is what you see first"media="(min-width: 800px)"> <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="this is what you see when you shrink"> and he combine it with this CSS
.hero-images { width: 100%; height: 100%; display: flex; flex-flow: column nowrap; align-items: center; margin-bottom: 7rem; }
.hero { position: absolute; top: -7rem; width: min(80%, 255px); }
.box { display: none; }
this is half of the html
<body> <main>
<picture class="box">
<img src="images/illustration-box-desktop.svg" alt="" aria-hidden="true" />
</picture>
<section class="hero-images">
<picture class="hero">
<source media="(max-width: 900px)" srcset="images/illustration-woman-online-mobile.svg" />
<img src="images/illustration-woman-online-desktop.svg" alt="" aria-hidden="true" />
</picture>
</section>
<section class="accordion-container">
<h1>FAQ</h1>
<div class="accordion">
<details>
<summary>
How many team members can I invite?
<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
</summary>
<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>
</details>
<details>
<summary>
What is the maximum file upload size?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
</summary>
<p>
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
</details>
<details>
<summary>
How do I reset my password?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
</summary>
<p>
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</p>
</details>
<details>
<summary>
Can I cancel my subscription?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
</summary>
<p>
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
</details>
<details>
<summary>
Do you provide additional support?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
</summary>
<p>
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</p>
</details>
</div>
</section>
for the life of me i cant understand how the thing does the cut on the image and now i cant find the guy. By the way i heard in some community of programmers that you can copy paste code and that ok but i dont know why copy paste something that you dont understand fully XD what do you think?