All solutions

It's responsive but only for the asked viewport sizes, not inbetween. I would love to hear some feedback regarding css. For some reason, i just don't get flexbox. I had to use grid to achieve desktop design because i could do grid-template-columns: 1fr 1fr. When using flexbox, the image would be smaller than the content div. Could i get an explanation why? I'd love to be comfortable with flexbox and not have to use grid for such simple designs.

I'd love to get a feedback regarding semantic html here. If i ever become a front-end dev, i'd love to be sure im doing something right but honestly, i don't know how to write markup properly. Is the div on the left aside? Does it contain articles? Same with the main content on the left, is it an article? Same with footer, that's what i wrapped 3 divs on the bottom in at least, are they each an article or?...

Should i even be trying to make these challenges responsive or just work hardcoded on 375 and 1440 sizes? I don't like the fact that i add all-around padding to make it look good on desktop but then it's impossible to make it responsive on smaller sizes unless im just really bad at css and close-minded. I also feel like i have some problems with flexbox and it was hard for me to make the image and the left panel hit their desired sizes. Looking for every bit of advice so i can improve and continue my journey with frontend, thanks in advance!

Hello. I think i've nailed the challenge, although there's one thing that's bothering me. For whatever reason, the h2 in calculator card is higher than h2 in other cards. They all have the same line-height and font-size which results in the calculator card being higher than the others.

Second thing is, i couldn't have done the box-shadows, i just for some reason can't hit the numbers to come close to what was done in the design.

Looking for advices on the things that i've listed and anything else that You think that could be improved, from html markup to css!

I feel like i don't entirely know how the social div was done. When the socials div appears on mobile version, the card's height changes like it wasn't done through position absolute but rather display: none;

On desktop size the arrow icon disappears from social div and as well, don't know how that was done so i just cheated it and did it through position absolute, but definitely not proud of that...

Looking on feedback on literally everything that Your eye catches so i can improve, thank You in advance!

edit: I see that my poor solution falls apart really badly when it's not at full size and the media query switches to desktop size at 700px, definitely looking for help with how to fix that.

edit v2: Instead of positioning the arrow that closes the socials div on desktop size with position: absolute, i just made the same button open and close it. Now i have a problem with keeping socials position in the same spot from 700px when it switches to desktop size to 1440px.

In all honesty, I am kinda disappointed that this challenge was like 5 times harder for me that it actually looks like, i feel like i should've done it way faster and way better. Im looking for literally any kind of advice at both html and css so i can get better and keep going at my front-end adventure. Thanks in advance.

Prior to this challenge, i had no js experience and was lost looking at this by myself so i did it along a yt video and later re-did it by myself and think that i will have an easier time tackling challenges that contain js from now on. If there's anything that i should change to work better, feel free to comment!

Hello there. I did it but i feel like i've done it in a somewhat disgusting way. I've slapped flexbox everywhere and feel like it was a bit too much?

I also didn't know how to add height to the container containing 3 consumer's cards so i just added margin-top to 2 of them as translateY would overflow content under that container?

On top of that i don't know how to add background images and position them properly for now.

I've used 2 media queries for medium and desktop screen sizes. While going from medium to desktop size, 2 bottom cards have a little transition to make it a little more fancy. I've tried doing it with the 5 star ratings too but i couldn't make it to transition to center and right positions.

Any kind of feedback that will help me improve and grow is appreciated!

Had a lot of fun putting this together. This was my VERY first time using grid so if there's anything that needs to be improved, help me out! Each card was styled with grid just to learn more about it. On small screen sizes, whole page uses flexbox, on medium and large screen sizes the page uses grid to generate 2 and 4 columns. Waiting for your feedback!

If You see anything that like really, really hurts Your eyes at first glance, tell me what i can improve.