0:00
hey welcome to tutorial's point we are
0:02
continuing to build our Hospital landing
0:04
page using reactjs you can find the
0:06
links for GitHub and previous part in
0:08
the description below now in this video
0:10
we will build the Navar component okay
0:13
now in our Navar let me just close this
0:17
terminal by pressing contrl G and here
0:22
in my na bar. jss let me just collapse
0:27
first this de all right the First St let
0:30
me give it a class uh the class name is
0:33
going to be Navar container it will
0:35
contain the entire Navar for us okay now
0:38
in here we are going to have three divs
0:41
this we are going to have three divs the
0:44
first D will hold our logo all right
0:47
simple first D will hold our logo the
0:50
second logo I mean to say the second D
0:52
will hold our na items so I'll give it a
0:56
class of n items all right and the third
0:59
de will hold our side now items so I'll
1:03
write side nav items hit enter okay so
1:08
we have three divs let me just format
1:11
okay as you can see we have three divs
1:13
inside this SAR container D okay now uh
1:16
for the first de in our logo we are
1:18
going to Simply have have a image tag
1:21
for our logo and of course let me write
1:24
an alternative name of logo and for the
1:27
source let me just import our logo as
1:29
you as you can see if we go to file
1:31
explorer in our assets as you can see
1:35
we're going to have this logo.png in our
1:37
images folder so it me just use
1:40
it so here I'm going to import it I'll
1:46
from something like this assets images
1:52
logo.png and we are going to use it here
1:55
and to use JavaScript we need curly
1:57
braces and in here I'll write logo okay
2:00
so I will hit save let's go back to
2:03
browser to check if the logo is there as
2:05
you can see the logo is here
2:07
perfect okay back to visual studio code
2:11
after this in our now items what it is
2:14
going to be all right now in our now
2:16
items simply we are going to have all
2:18
the now items that I showed you earlier
2:21
so I will create the now items are uh
2:24
five I guess so I will create five H3
2:27
dos and let's start with the first one
2:30
is Medical Care the second one is
2:36
health Okay the third one is
2:43
test fourth one is medical
2:47
lab and the L Capital we can also use
2:50
CSS to capitalize but yeah we can do it
2:53
here at as well medical contact okay let
2:57
me save it let's go to browser to check
3:00
yeah of course it's here
3:03
great okay back to vs code and the third
3:06
D is going to have our side now items so
3:09
another H3 tag that will be
3:11
login and of course an image for our
3:14
search icon so I'll create image let's
3:18
give it alternate name of search now for
3:21
this uh image let's go back to the
3:23
assets folder and in our assets folder
3:27
if you we have this search.png we will
3:29
use okay so let's go back we need to
3:33
import it first I'll write import
3:40
from okay assets images and then
3:44
search.png and we are going to use this
3:46
search here but we need curly braces so
3:49
search hit save uh let's go back to our
3:53
browser as you can see we have this icon
3:55
all right so this is the basic HTML we
3:57
need for our NAB now we need to style it
4:01
okay so I'll just go to na. CSS all
4:05
right okay so in our na. CSS we can also
4:09
split it so that we get an idea of what
4:11
element we are actually targeting right
4:14
something like this all right now let us
4:16
start with our Navar container so I'll
4:22
navbar container now inside naar
4:25
container I'm going to give it a display
4:27
of flex and then and line okay wait all
4:31
right so just give it align items Center
4:34
H save let's go back to this all right
4:39
okay so as you can see this play Flex at
4:42
that and now we need some Gap we can use
4:45
the Gap property but I'm going to use
4:47
something more Dynamic let's say justify
4:50
content I'll write space between hit
4:53
save let's go back to browser that is
4:56
too much of a space we don't need that
4:57
much I'll just write space uh evenly
5:02
okay save it again let's go back to
5:04
check okay it looks fine for now all
5:07
right but this is like you know uh okay
5:10
let's first Target our next STS let's
5:14
first Target this image so we have this
5:17
class name logo for this de that
5:20
contains this image so I'll go here and
5:23
I'll Target this logo and inside logo we
5:26
have an image right an image element for
5:28
that I'll just give it
5:30
width of 115 pixels and of course the
5:34
logo always has a cursor pointer so I'll
5:36
write cursor pointer let's save it go
5:39
back to browser and as you can see the
5:41
cursor is p poter now okay let's go back
5:44
to visual studio code all right now
5:53
nav items now inside our now items I'm
5:56
just going to give them a display of
5:58
flex uh because they are you know in
6:01
this way Direction so I'll just save it
6:03
go back and as you can see they are in
6:06
horizontally aligned Now Let's do let's
6:09
give them some Gap right so let's say a
6:12
gap of 30 pixels save it try again yeah
6:18
they look okay now all
6:20
right okay what is next after this we
6:24
need to change uh their fonts these now
6:27
items their font look off I mean the
6:30
font weight right and the font size so
6:32
let's change it go back now let's target
6:35
these h3s which are inside are nav items
6:38
right so all right nav items have H3
6:42
tags inside let's target them now inside
6:45
we are going to have a font weight of
6:47
400 great and a font size of course of
6:50
16 Pixel It Is by default by the way or
6:53
I don't know it's 18 or 16 I guess it's
6:54
16 anyways the cursor will be pointer
6:58
let's save this go back to browser yeah
7:01
see they look much much
7:03
better okay what is next we can also
7:06
give them some hover effect since the
7:09
color of this uh landing page reactjs
7:12
project is blue so on Hover we will give
7:14
them a blue color text right so I'm just
7:18
going to say let me just copy it now
7:21
items H3 so whenever someone hores on
7:25
them what we are going to do is change
7:27
the color and the color I have he
7:33
eb2 okay it's SP so save it let's go
7:37
back and check as you can see they look
7:40
fine okay all right we are done with the
7:44
now items then we have these side now
7:46
items all right so we are of course
7:49
going to use display Flex so that they
7:50
are alongside each other and not you
7:53
know below right so let's go back to
7:55
visual studio code and let's target our
7:58
side now items so I'll write a side
8:03
NAB items and for the side na items I
8:06
will give them a display of flex okay
8:09
let's check okay so they are like this
8:13
what else can we do is we can have align
8:16
items Center and we also should give
8:19
them a gap so I'll give them a gap of 16
8:23
pixels let's check yeah that's fine now
8:27
we need to Target this right so what I'm
8:30
going to do is firstly I'm going to
8:31
Target this H3 the login one right so
8:34
I'll just copy this and I'll write do
8:38
side M items has an H3 inside it okay
8:42
now for that H3 the font size should be
8:45
uh let's say 16 pixels and the font page
8:50
400 and of course let's just save it to
8:53
check it first all right okay it's fine
8:57
let's give it maybe color so I'll give
9:00
it a color the same color we gave to the
9:03
hover effects of our H3 in the now items
9:05
okay and after that of course we are
9:08
going to have cursor pointer save it
9:11
let's check it as you can see it has a
9:13
blue color and a cursor pointer
9:15
perfect now we are going to Target this
9:19
image this search icon image right so
9:24
write uh side now items has an image tag
9:28
ins sight Target that one give it a
9:31
width of 30 pixels let us say and I've
9:35
pointer let's save it let's go back to
9:39
browser and yeah as you can see
9:41
everything looks okay so I think yeah
9:44
that is pretty much it for our naar I
9:47
think it is very much stick to the top
9:49
we should give it a margin top or
9:51
something right so that it looks much
9:54
better so I'll go to visual studio code
9:56
and here for our Navar container
9:59
I'm actually going to give it a margin
10:02
top of let's say 20 pixels let's check
10:05
it a bit more we can of course 24
10:09
pixels all right this looks perfect for
10:12
now all right so we have just completed
10:14
our naar so let me just close the nabar
10:18
okay let's go back to Explorer now after
10:21
our nabar let me just close this yeah so
10:25
after our naar we are going to design
10:28
our Banner component that will be it for
10:30
this video in the next video we will
10:32
build the banner component now make sure
10:34
to like this video share it with your
10:36
friends and I will see you in the next
