How exactly do you achieve this look on a webpage? Sorry, I can't figure it out

So, I’m currently trying to research how exactly you achieve 2 things that this webpage does in order of importance.

1-The big dark purple box that has all of the form information in it. How do they give that look? like you have the picture background (which I think is just importing an image and setting it as the body background, but I’m probably wrong) anyways, that’s not as important. How do they get that purple box in the center and all of the font inside? I might be asking a complicated question without knowing but I figured it was worth asking.

2-How exactly do they center everything like that? I understand text-align but I know that’s not how they achieved this.

These are good questions.
Did you try to use dev tools in your browser? That can be helpful to understand some things.
There is such property in CSS as background-image

Yeah, I just found out about background image. But I still can’t figure out how they put the box in the middle. Are they maybe adding a background image to the “form” itself? I’m aware of the “box” idea of css. Maybe that’s what they did?

You are talking about Box model or flexbox?
To center elements there are different approaches.
For example, you can play with properties margin, display, position.
There are plenty of possibilities… and plenty of possibilities to mess up the page)
EDIT: there are plenty of steps related to these properties in the curriculum by the way.

This is just pseudo-selector for body. As you see backgruond image - it’s for body not for form.

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: var(--color-darkblue);
    background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

You can either go through curriculum or try to do own research about layout of this page, dev tools are helpful. Maybe it will be both.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.