Skip to content
OverviewSolutions
18
Comments
10
Marcus Hugo
@marcus-hugo

All comments

  • Marcus Hugo•365
    @marcus-hugo

    Hey Emmilie, I've been googling javascript for a basic carousel, and all the tutorials are very complicated, but, your solution is so concise! I couldn't understand how to implement the logic and I've been studying your solution and wondering how the slideIndex gets updated with each click?

    I think I understand. Is it because slideIndex is a variable that gets updated with each onclick="plusSlides(1) or onclick="plusSlides(-1)?

  • Marcus Hugo•365
    @marcus-hugo

    I've been reworking my solution and saw that yours has no javascript and that you used the details and summary elements, which I didn't know about!

    I really like the animations on load too!

  • Marcus Hugo•365
    @marcus-hugo

    Looks really good! I had the same thing happening and what worked for me was,

    background-position: 0 0;
background-size: auto 100vh;
  • Marcus Hugo•365
    @marcus-hugo

    Desktop looks great! I like the animations too! for the mobile background image, instead of body::after you could try using background-image with the svg url. This is what worked for me,

    background-image: url(../images/bg-mobile.svg);
background-repeat: no-repeat;
background-position: center 0px;
background-size: contain;
    Marked as helpful
  • Marcus Hugo•365
    @marcus-hugo

    Looks great! I really like the animations!

  • 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!

  • Marcus Hugo•365
    @marcus-hugo

    Looks good!

    I noticed the box svg is not centered when the accordion expands. You could try setting the .wrapper to align-items: baseline and then set the box svg position top: 7.4rem

    hope this helps!

    Marked as helpful
  • Marcus Hugo•365
    @marcus-hugo

    I had the same problem when switching to desktop. What worked for me was placing the desktop illustration and bg-pattern as background-images.

    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!

    Marked as helpful
  • Marcus Hugo•365
    @marcus-hugo

    How did you change the color of the svgs?

  • Marcus Hugo•365
    @marcus-hugo

    Thanks for the suggestions!