Help with my survey form page layout

1

Hello,
i want to realize this:

791828wireframe.png840×1181 24.6 KB

I did this:
https://codepen.io/pocahontas123/pen/ GyyOZW

My main css layout are these:


	/* PAGE LAYOUT */
/* html, body and #main-page have the same width and height */
html, body, #main-page {
	width: 1500px;
	height: 2000px;
}
html, body {
	background-color: yellow;
}
/* footer have the same width as html, body and #main-page */
footer {
	width: 1500px;
	height: 150px;
}
/* main and #main-form have the same width and height */
main, main #main-form {
	width: 1000px;
	height: 1400px;
	background-color: red;
}

main {
	margin: 0 auto;
}


/* Everything in the HEADER is centered */
header {
	/* work on p tag element */
	text-align: center;
}
/* Everything in the #main-form is centered */
#main-form {
	/* to make margin work */
	width: 1000px;
	margin: 0 auto;
}
/* Everything in the footer is centered */
footer {
	text-align: center;
	/* same height as the footer itself */
	line-height: 150px;
}

/* 
	sticky footer 
	https://css-tricks.com/snippets/css/sticky-footer/
*/
/* page wrapper */
main {
	/* same as footer height */
	margin-bottom: -150px;
	min-height: 100%;
}
main:after {
	content: "";
	display: block;
}
footer, main:after {
	height: 150px;
}
footer {
	background-color: orange;
}
/* END sticky footer */
/* END PAGE LAYOUT */
2

P.s. You should totally check out this CSS Grid tutorial: https://fcc.im/2E6oT6i

3

You can try CSS grids or if you want it quick try using Bootstrap or any such frameworks

4

Well, after lurking many times on google i found some thing. I don’t really understand what i did 100% but it work.
https://codepen.io/pocahontas123/pen / GyyOZW

Every tutorial i have (udemy too) are really bad when you come to real time use of css…
It’s always easy isolated stuff surronded by useless stuff like hardcore animation css.
You don’t learn how to do basic sticky footer, basic layout page, basic navbar, how colors work together…

5

I updated my Form to match FCC script criteria:

https://codepen.io/pocahontas123/pen/ GyyOZW