Looking to hire developers?
@marcus-hugo
@emestabillo
Submitted
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!
@marcus-hugo
Posted
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)?
@ApplePieGiraffe
Submitted
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.
@marcus-hugo
Posted
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!
@mdajmalshadab
Submitted
My background image is shrinking with change in screen size, I am unable to get desired result please help me out with this.
@marcus-hugo
Posted
Looks really good! I had the same thing happening and what worked for me was,
background-position: 0 0;
background-size: auto 100vh;
@LoganWillaumez
Submitted
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
@marcus-hugo
Posted
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
@Infinit-dot
Submitted
Not very happy with the solution, there is a possibly better way to position all images. Feel like my CSS file is a little mess. Any feedback is welcome.
@marcus-hugo
Posted
Looks great! I really like the animations!
@samandavari
Submitted
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
@marcus-hugo
Posted
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!
@alessandro-giuzio
Submitted
Always appreciate the help from the community
@marcus-hugo
Posted
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
@Babajide777
Submitted
Good day all,
This is my first time using SASS, so I'll appreciate any comment on the file structure and how to make it better. Regards.
@marcus-hugo
Posted
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
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
@marcus-hugo
Posted
How did you change the color of the svgs?
@marcus-hugo
Submitted
How well did I use the CSS display and position properties?
@marcus-hugo
Posted
Thanks for the suggestions!
