0:00
hello and welcome to tutorials point in
0:03
this video we will continue to design
0:05
our signup page using CSS so let's not
0:08
waste time and get started first we are
0:10
going to reset all the pre- stylings out
0:13
there that are by default so here in the
0:16
style. CSS firstly make sure that you
0:19
are going to link your style.css so here
0:21
in the head element itself we are going
0:27
CSS and the style sheet is link now
0:30
let's save it and let's go to
0:32
style.css now the first thing here is to
0:35
reset all the Styles so I'll select our
0:37
document and for the document we will
0:39
have a padding of zero and a margin of
0:43
zero and we will set the
0:47
Border we will set the Box sizing in
0:49
fact box sizing to border box so let me
0:53
just save it and let's go back to
0:54
browser and all the styles are now reset
0:58
okay next next up we are going to first
1:02
have a font family if I open the image
1:05
as you can see it has a different font
1:07
so we need to get these two fonts I'll
1:09
show you which fonts are these for that
1:12
I'll need to open my browser and we will
1:14
go to fonts. google.com quickly so here
1:17
in my browser I'll open a new tab and
1:19
I'll just simply search for Google fonts
1:22
and the first link here is the Google
1:24
fonts link now inside the Google fonts
1:27
link we are going to search for some of
1:30
fonts we have selected families I have
1:33
no one so here I'm going to search the
1:36
first font is going to be DM serif as
1:41
you can see this one dm serif display
1:44
and I'll just tr get this font and it's
1:46
inside here okay now let me just quickly
1:50
get the code so get embid code and we'll
1:53
be using the import one so I'll just
1:55
copy this line here I'll just copy it
1:59
and let's go back to vs code and I'll
2:01
just place them at the top something
2:06
this we'll be needing another font so
2:08
let me just go back to Google fonts and
2:11
another font that we'll be needing is
2:14
what we call as DM Sans so I'll quickly
2:18
write DM Sans this one right here I'll
2:21
write I'll click get font and get embit
2:26
code and the import statement and let's
2:29
just copy this line quickly press contrl
2:32
C to copy and let's just go back to the
2:35
visual studio code and paste it right
2:38
here and save it next next thing let's
2:40
check the browser as you can see the
2:43
font hasn't changed because we need to
2:44
Target the font family style here so
2:48
I'll Target my body element and for the
2:51
body element we will have a font family
2:54
property and it will be set to
3:01
display and in case of a fallback F font
3:05
we will write siif let me save it and
3:08
let's go back to browser and as you can
3:09
see the font has changed now okay now
3:13
let's start designing our website using
3:16
CSS to design our left side of the page
3:20
that is we are going to Target this left
3:22
ta so firstly let me just Target this
3:25
entire section so let me just give this
3:27
section a quick ID of container because
3:29
we only have one section and we can use
3:31
the idid property here so I'm going to
3:36
container so hashtag and then a
3:39
container and for this container what
3:41
I'm going to do is I I'll give it a
3:45
100% let me just save it and if we go
3:49
back to the browser nothing happens
3:51
because the width by default is 100%
3:53
here next up what we are going to do
3:57
is since I want both these both of these
4:01
to have side by side so we will use the
4:03
display Flex property so that this icon
4:06
and text appear on the left side and the
4:08
get started this portion appears on the
4:11
right side so I will write
4:14
here display flex and let me save it and
4:19
let's go back to check as you can see it
4:21
is divided into two sides down all right
4:26
want uh we will give this a height as
4:28
well for now so the height is going to
4:31
be something like 100 will
4:36
height so let me save it and let's check
4:39
and nothing happens but this will be
4:40
used later on after that what we are
4:43
going to do is we're going to Target
4:45
this left one so I'll just write left
4:49
and starting with the left we need a
4:51
blue color let me open the image we need
4:54
this blue color here let me just
4:56
maximize it we need this blue color
5:00
so for this left one I'm going to have a
5:03
background color and the color is 023 f8
5:08
0 let me save it and let's go back to
5:11
check and we have this blue color all
5:14
right after this the text color should
5:17
be white so I'll quickly have text color
5:20
equal to white or also you can use this
5:23
# FFF in short so I'll write hash FFF
5:28
that stands for white color it
5:32
it now let's go back to browser to check
5:35
if it is working as you can see the text
5:37
is in white color right now next up
5:41
after this we will give it a width of
5:44
50% so I'll just quickly write a width
5:49
50% and save it if we go and check as
5:52
you can see the page is now equally
5:54
divided 50% from this side and 50% from
5:57
this side as well next up we are going
6:00
to Target this icon and this text so I'm
6:04
going to give them a display of flex so
6:06
I'll write display flex and save it and
6:09
as you can see they are side by side so
6:11
we need to change the flex direction to
6:13
column right now so I'll write Flex
6:17
Direction column and save it and let's
6:20
go back and as you can see they are now
6:23
on top of each other next up I'm going
6:26
to do align items sent
6:30
and save it and let's go back to check
6:32
and they are in center right now we'll
6:34
also do a justify content Center and
6:37
save it and as you can see they are in
6:40
complete center right now horizontally
6:42
as well as vertically let's give them
6:44
some Gap so let's give them a gap of 20
6:49
pixels I'll save it and there is a
6:52
little bit gap of 20 pixels as you can
6:55
see let's go back to vs code so next we
6:58
are going to Target this icon this image
7:00
element right here so right here what
7:03
I'm going to do is I'll write do icon
7:06
that is this D icon de inside icon de we
7:08
have an image so how do I Target this
7:10
image I'll write do icon and then this
7:13
angle bracket and then I'll write the
7:15
image tag okay next I want to change its
7:17
width let's say something like 90 pixels
7:21
let me save it and let's go back and as
7:24
you can see the width is changed a
7:26
little bit let me just close this one
7:28
okay let's go back to to be a scode
7:30
after this we're going to Target this D
7:32
that has the banner hitting inside so
7:35
I'll write something like dot Banner
7:39
heading now for this we're going to give
7:41
it a color if we open the image as you
7:44
can see it has a goldenes color right
7:47
here so we are going to give it the same
7:49
color so I'll give it a font color of
7:54
F9 B D7 C and let me save it and let's
8:00
check as you can see the font color
8:02
changes we need to you know give it a
8:04
font size we need to make it bigger so
8:07
quickly I'll give it a font size of 42
8:12
pixels not 32 but 42 pixels and let me
8:16
save it and let's go back and as you can
8:19
see the text is bigger but we can of
8:21
course change the width here all right
8:24
so what I'm going to do is I'll just
8:27
take the width property
8:30
and I'll write a width and let's give
8:32
something like 400 pixels let me save it
8:35
and let's check as you can
8:37
see the width is changed to be more
8:40
specific I'm going to Target the
8:42
paragraph element here now there is no
8:43
difference even if I write the width
8:45
here but to make it more beginner
8:48
friendly basically I am targeting the
8:50
banner heading and inside Banner heading
8:52
we have this paragraph tag right and for
8:54
this paragraph tag what am I going to do
8:57
is I'm going to give it a width of 400
9:00
pixels or let's say 450 pixels now let
9:05
me just save it and let's go back and
9:07
yeah it looks all right so if we check
9:11
the image the final image as you can see
9:14
it is almost similar to what we have
9:17
done on the left side here now it's time
9:20
to design this right side using CSS so
9:24
that'll be enough for this video in the
9:26
next video we will continue to design
9:28
the right side of of our signup page
9:30
using CSS so make sure to subscribe to
9:33
the channel hit that like button and I
9:35
will see you in the next video
