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

All comments

  • Emmilie Estabillo•5,540
    @emestabilloSubmitted over 4 years ago

    The side-by-side layout for medium devices looked awkward for me so I opted to stick with the stacked design. What's everyone's take on the tablet layout for this project?

    For devices with <667px height --> I couldn't get it to work unless I use absolute positioning. Does it make sense to still cover these devices? (Please be nice) Thanks for the feedback!

    Mobile-first with Flexbox and old-fashioned CSS

    5
    Marcus Hugo•365
    @marcus-hugoPosted almost 3 years ago

    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)?

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 2 years ago

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    Pure CSS FAQ Accordion Card With Sweet CSS Animations

    19
    Marcus Hugo•365
    @marcus-hugoPosted almost 3 years ago

    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!

    2
  • Marcus Hugo•365
    @marcus-hugoPosted about 3 years ago

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

    background-position: 0 0;
background-size: auto 100vh;
    0
  • Logan Willaumez•160
    @LoganWillaumezSubmitted about 3 years ago

    Hello, this is the new challenge I did !

    It was to play with media queries, not totally sure about the additional background on mobile who scale when the page grow up, but I didn't find a better way to do this responsively 🤔

    If u have any feedback don't hesitate :D !

    Best,

    Logan

    Hundle landing page

    1
    Marcus Hugo•365
    @marcus-hugoPosted about 3 years ago

    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
    1
  • Marcus Hugo•365
    @marcus-hugoPosted about 3 years ago

    Looks great! I really like the animations!

    0
  • samandavari•20
    @samandavariSubmitted about 3 years ago

    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

    I used javascript for my first time

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

    0
  • Marcus Hugo•365
    @marcus-hugoPosted about 3 years ago

    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
    0
  • Marcus Hugo•365
    @marcus-hugoPosted about 3 years ago

    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
    0
  • Patrick•14,265
    @palgrammingSubmitted over 3 years ago

    Trying to be pixel perfect with these challenges but I did change the placement of the email submit error message. It seemed to be better since it worked with the design across screen types. The placeholder font weight had multiples in the design which seemed like a error so I just used bold for all view-port sizes.

    Thanks for any feedback I am happy with it but always looking to improve. I am really happy I got so far with this one

    Pod Request Landing Page (HTML + CSS + JS)

    4
    Marcus Hugo•365
    @marcus-hugoPosted about 3 years ago

    How did you change the color of the svgs?

    0
  • Marcus Hugo•365
    @marcus-hugoPosted over 3 years ago

    Thanks for the suggestions!

    0