Skip to content
Submitted over 3 years ago

I used javascript for my first time

samandavari•20
@samandavari
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • samandavari•20
    @samandavari

    tnx for your help

  • Marcus Hugo•365
    @marcus-hugo

    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!

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