Submitted about 3 years ago

I used javascript for my first time

samandavari•20

@samandavari

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I did my first javascript but there are some problems i couldnt solved so i really like to give me some solutions for better UI and coding, first i couldnt place the box on top of the women pic how shoud i do that ? second if i toggle all accs together it will pop out the wrapper how should i fix that? third how should i hide parts of my picture ?it is not hidden well. i `ll be glad to see your tips

Community feedback

samandavari•20
@samandavariPosted about 3 years ago
tnx for your help
0

Marcus Hugo•365

@marcus-hugoPosted about 3 years ago

Looks good!

For the box svg , add it to the html before the div .image, then in the css set it to position: relative and position it with top: and left: like this

display: inline;
position: relative;
left: -177px;
top: 282px;

Try removing the heights from the .wrapper and .accwrapper, that should keep it from popping out of the wrapper.

For hiding the images, it looks like you could add the bg-pattern to the .image div and then set it to position: relative and z-index: -1, and overflow: hidden, though I'm not sure it will work?

I ended up using background-image: with url().

background-image: url(../images/illustration-woman-online-desktop.svg), url(../images/bg-pattern-desktop.svg);
        background-position:  -76px, -571px -248px;
        background-size: 472px, 966px;
        background-repeat: no-repeat;

Hope this helps! Happy coding!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord