Submitted 4 months ago

Meet landing page

yoyov51234• 240

@yoyov51234

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Meet landing page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I didn't give up. I made it.
The code is heavy for different screens, aslo it's a small project, but I've already feel the file management is out of control, need to work on this.

What challenges did you encounter, and how did you overcome them?

For the same font, same size, same padding, same line-height, the paragraph's layout is different from the design, I looked for other devs code, and learned I can user padding to make the style.
Used BEM, but not good at defining elements. Will check codes of others to learn.

What specific areas of your project would you like help with?

For example, I have a container with 1000px width, and i give this container a gray background, then some content inside the container. When resizing the screen, sometimes the issue occur that the content is outside the container, any suggestion to prevent this from happening? I tried max-width:100%, but it seems doesn't work.

Community feedback

Jamie Reed• 120

@jreed-11

Posted 4 months ago

Hi Yoyov, First of all ood effort with this project it had many challenges to overcome and tested a lot of skills to acheive the layout. To answer your question about some content outside the container. Its becuase you are using fixed units 1000px for max with is not dynamic. Try changing px to rem for example.

The hero section with the imageswas tricky i notice yr images a cut of tp and bottom. To achive the design layout you use padding to move each image up and down and Object fit /poistion to reposition the image as the design shows the image is cut off right and left. Again the hero container should be in dynamic units like rem not px. Becuase your hero container is in px it is cut off top and bottom and the container can't adjust its self based on the content inside. see here at my soloution https://jr-meet-landing-page.netlify.app/.

Apart from the hero section you done pretty well. Only other thing i would suggest is really look at the sizes onthe design (widths) as your layout is eaxcatly the same. Again when set widths for containers don't usestatic units like px as they can't grow and shrink based on the content inside the container.

Hope this helps

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord