Product Landing to Mars: Feedback Requested

Project Feedback
#1

Hi everyone,

I have mostly completed the product landing project. I am looking for feedback in general. But in particular, I have grown reliant and used to using css grid. The project asks for one use of flexbox, so if you have any ideas how to replace one grid section with flexbox, it would be helpful. Lastly, I am not sure why I am not passing the submit button user story.

codepen: https://codepen.io/GhostTheSavage/full/jXGxKK

Any feedback is appreciated.

Thanks!

#2

.main-nav {
display: flex;
flex-direction: column;
position: fixed;
width: 100%;
top: 0;
left: 0;
}

delete nav from your grid-template-area…

.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
“middle-container”
“package-container”
“footer”;

1 Like
#3

Thanks! I actually had to add header to grid-template-areas. Otherwise, it pushes the header to the bottom of the page.

#4

Do not worry

add this tag to pass the submits intead M24 logo

<img id=“header-img” src="#">

and simple add the attribute name=“email” to your email input

#5

I’m not at this project yet, but one thing I noticed is that the white text is difficult to read. Maybe try adding a box around your text to separate it from the background and/or make your text bold (definitely do this part. Or make the text a little bigger?). Or add an opacity to your background page?

Also, when I resize the screen, the bottom elements (Getaway, Escape, Stay and their texts) get cut off and you have to scroll to the right to read them. Everything else is responsive so :+1:

1 Like
#6