So, were you successful?
Let's now solve this challenge together
and let's apply what you learned over this module
to build this form from the ground up with all the inputs
and features you saw in the last lecture.
And for this,
I'll first of all create a new sub-folder named basics,
where I placed the existing HTML and CSS file in.
And then I'll add a new folder, challenge,
where I want to, well, work on that challenge I gave you.
For this here,
I'll again add a new index.html file,
but now in that challenge folder,
and also already a styles.css file,
which will hold the styles,
and I'll open this index.html file
in the challenge folder with live-server now.
And close that other page.
Now here, I'll create that skeleton,
and name it Forms Challenge,
get rid of that line here,
and then start laying out that form which you saw.
And actually, that page had two parts.
It had that form as the main content,
but above that form, I also had a small header
with a little text.
And therefore, I'll add this as well.
I'll add a header element with a h1 element
with Contact Us as text inside of it.
But then they're (indistinct) at this main block
with the form inside of it.
And we can do that right away.
Add that form inside of main,
because that's the structure which we'll need
in the end for this.
With this, If I reload here, we see contact us.
Now before I start adding elements to the form.
I already want to dive into the styles of this page,
because I definitely did not use such a serif font
in that preview which has showed you.
And we also had a background color for this page.
And therefore, I want to apply that here as well.
For this here in styles.css, I will select the body here.
And first of all, set the font-family to sans-serif.
We could also grab a font from Google Fonts,
if we wanted to,
but here I will just use this sans-serif font.
This basic sensor of font.
I will also set a background color,
and here we had a blue color.
So I'll use blue as a starting point and then select
a light blue color with that color picker.
So let's maybe go here, more into this light bluish area,
and then use this very, very, very, light blue.
It's almost white just with a tint of blue in it.
Like this.
And with that in index.html,
if we add a link to style.css below our title,
we now have this light blue background color,
and this text here with the sans-serif font.
And I'll actually use a little bit more blue here, I guess,
little bit further to the right.
Yeah, like this, that looks good.
Now I also want to align my h1 text in the header
and therefore we can select h1,
and set text aligned to center here.
Like this, and now this is centered.
And I will always add a bit more spacing.
Hence here I'll set my margin to 1.5 rem maybe,
so that we have a little bit more space
around the h1 tag, maybe 2rem, like this.
So now that's the basic look here,
but now let's focus on the form.
And for this,
I will already select the form element here for styling,
because I already did add the form here to give that
some dedicated style as well.
And here I'll give that form of width of,
let's say 40rem and a margin of auto to center it.
And then all the background color, off white,
so that we can see it against the background.
Though we don't see anything at the moment
because I have no content in the form.
So if I had temporarily add The Form,
so just some text in there, we can now see that here.
Now, as a next step,
I also want to change that white a little bit
and go into the bluish area here as well,
and use a darker blue,
but still only a tint of blue here.
So that we just barely see that blue, like this maybe.
We can fine tune this later.
Next, I will also add a padding here.
So some internal spacing between the border
and the content of this form, and I'll add a box shadow.
So a little drop shadow behind that form,
and here a box shadow with zero distance on the x-axis
and two pixels on the y-axis,
as well as a blur radius of eight pixels,
and then RGBA value of 0, 0, 0, 0.2,
should look quite good like this.
And of course you can tweak to your likings
and change the shadow if you want a different look.
Now last but not least here,
I also will give this form rounded corners
by giving it a border radius of six pixels here like this.
And that's now my container, my box,
that will hold this form.
Now as a next step,
let's populate this form with a couple of elements.