@Elioskas
@koalalikecode
Submitted
This is a wonderful project for you to practice Js skills and make a layout in CSS and Js. I don't know why my solution image is different from the design, but they are similar on my site. I appreciate any suggestions or advice. Thank you!
@Elioskas
Posted
Amazing job on this project! It really looks great.
If you do something like this:
min-height: 100vh;
display: grid; (it should work with flex as well)
align-items: center;
justify-content: center;
on your body it should position your class "background" right at the center. Oh, and one more thing, I believe that Total should be displayed also per person, so you might want to divide the value with number of people. Good luck with your next projects! I hope this helps a bit.
Marked as helpful
@mirk-00
Submitted
Hi, this is my first try at html and css so i have some doubts i couldn't figure out by myself (lines refer to css file):
line 42: I specified margins in order to center my card but i think it shouldn't be needed. I tried different align and justify properties but none of them centered the .card div in the viewport
line 112, the most troublesome part: I wanted the image to take 48% of the whole card. I thought to specify width=48% since .bg-image is direct child of .card. But this only let the image take less than 25% (width values). Also setting width to 100% makes the image take less then half of the .card container. I can't understand how the width percentages work. I also used viewport height and width (vh and vw) because i thought that 100vw should have let the image cover the whole viewport but instead only took about half of the card container, so there's obviously something I'm missing. I'd really like an explaination for this behaviour
line 118: i'm not sure this is the smartest way to set the padding. Suggestions? Thanks in advance
@Elioskas
Posted
Great job with this one! One thing, though, consider adding a margin top in the media query because part of the picture is cut of from the screen.
@Zulfaabam
Submitted
@Elioskas
Posted
Great job on the design! You can use background-blend-mode to make the lower part of background blue as it is in the original. I'm only a beginner, so I can't really comment on any other specifics. Keep up the great work, though!
Marked as helpful
