Images must have alternate text
<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more Looking to hire developers?
<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more <img src="./images/icon-arrow-down.svg" class="arrow">
Learn more <img src="./images/icon-arrow-down.svg" class="arrow">
Learn more <img src="./images/icon-arrow-down.svg" class="arrow">
Learn more <img src="./images/icon-arrow-down.svg" class="arrow">
Learn more <ul class="questions">
Learn more <img src="./images/illustration-box-desktop.svg" alt="" class="box">
Learn more <img src="./images/bg-pattern-desktop.svg" alt="" class="bg-img-desktop">
Learn more <img src="./images/illustration-woman-online-desktop.svg" alt="" class="woman-desktop">
Learn more <label for="team-members" class="questions__label">
<p>How many team members can I invite?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>
Learn more <label for="max-upload" class="questions__label">
<p>What is the maximum file upload size?</p>
<img src="./images/icon-arrow-down.svg" class="arrow"></label>
Learn more <label for="password-reset" class="questions__label">
<p>How do I reset my password?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>
Learn more <label for="subscription" class="questions__label">
<p>Can I cancel my subscription?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>
Learn more <label for="support" class="questions__label">
<p>Do you provide additional support?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>
Learn more <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Jaron Paige</a>.
</div>
Learn more A big struggle (and one that I didn't come to a solution on) was how to position the images such that:
a) they were positioned with respect to the card b) they maintained position relative to each other c) they maintained position in a responsive way d) one of them had overflow and the others did not
Otherwise, fun project and it made me tackle making an accordion without using a framework or JS.
@kenreibman
Posted
Great job! You're so close to the final result, and I commend your hard work and effort :)
On the desktop layout for the left illustration section, this project requires multiple layers that act as a position: relative
, in addition to uses of z-index
, and the illustration ends up being an position: absolute
that doesn't get hidden by the main card container.
It might be hard to see, but take a look at my code or any Youtube video that covers this solution.
Your viewport width at 375px
has the card overflowing. Although I haven't checked your actual code, this is due to you setting fixed heights such as using the height
and width
property. I would recommend you using max-width
for containers and min-height
for your parent body elements to establish a height.
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!