Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,090 --> 00:00:09,580
Now that we know about the material UI grid components and how we can use the container and item properties
2
00:00:09,910 --> 00:00:18,280
along with the justifying direction and the line items properties to control the layout of our contents
3
00:00:18,340 --> 00:00:25,510
let's go ahead then and start setting up a basic grid for ourselves to align all of our links in the
4
00:00:25,510 --> 00:00:29,850
footer so we can start by coming up to the top of our footer.
5
00:00:29,920 --> 00:00:41,040
J.S. and importing the grid from app material dash UI slash core slash grid will then come down and
6
00:00:41,040 --> 00:00:49,420
inside of our footer but above the image let's create a grid components and then open that up like that.
7
00:00:49,770 --> 00:00:56,970
We know that there are two kinds of grids the containers and the items and this outside wrapping grid
8
00:00:57,180 --> 00:01:01,710
is going to need to be a container container.
9
00:01:01,740 --> 00:01:09,690
So put the container prop on there and then on the inside we can have a grid item with the text home
10
00:01:10,170 --> 00:01:10,980
inside.
11
00:01:10,980 --> 00:01:18,090
So if we save this we'll now see in our footer the text home is now appearing above our little black
12
00:01:18,090 --> 00:01:25,120
slash this definitely doesn't look ideal though because instead of sitting above the Black flash we'd
13
00:01:25,120 --> 00:01:28,240
really like for it to just be sitting directly on top of it.
14
00:01:29,160 --> 00:01:37,780
To do this let's go over to our grid container and add a class name of classes classes.
15
00:01:38,010 --> 00:01:46,890
The main container which means we need to come up and add a main container style here and we'll just
16
00:01:46,890 --> 00:01:50,230
set the position to absolute.
17
00:01:50,340 --> 00:01:57,870
And that way we'll be able to move the links in the footer around regardless of any of the other elements.
18
00:01:57,900 --> 00:02:04,110
Let's go ahead and save that and we'll see the page refresh and our text now looks like it's gone but
19
00:02:04,110 --> 00:02:08,630
it's actually still here just being hidden underneath the little Slash.
20
00:02:08,790 --> 00:02:14,190
So it's sitting on top of it like we had wanted but we just need to actually make sure that the text
21
00:02:14,190 --> 00:02:14,910
is visible.
22
00:02:14,910 --> 00:02:17,640
So let's go in on our grid item.
23
00:02:17,760 --> 00:02:29,780
Let's add a class name equal equal to classes dot link and then we can go up and add a link style and
24
00:02:29,780 --> 00:02:34,310
we'll just go ahead and put in all of the footer link styles real quick.
25
00:02:34,310 --> 00:02:49,070
So we'll start with a color of white a font family of Ariel Ariel Ariel and a font size of zero point
26
00:02:49,070 --> 00:02:50,930
seven five REM.
27
00:02:50,930 --> 00:02:56,000
And finally a font weight set to just bold.
28
00:02:56,110 --> 00:02:58,000
Let's go ahead and save that.
29
00:02:58,030 --> 00:02:59,450
We'll see the page refresh.
30
00:02:59,470 --> 00:03:03,210
And now we've got a much nicer looking little home text down there.
31
00:03:04,200 --> 00:03:09,240
We know however that this home text shouldn't be pressed all the way against the edge of the screen
32
00:03:09,240 --> 00:03:09,960
right there.
33
00:03:10,050 --> 00:03:15,500
But we actually want it more in the center horizontally of this footer.
34
00:03:15,510 --> 00:03:22,470
Now we had talked about how we can use the justify and a line items properties to control the layout
35
00:03:22,500 --> 00:03:28,390
of our content but we need to figure out which one of those to use in this situation.
36
00:03:28,470 --> 00:03:37,110
We know that the justify property controls the main axis and the align items property controls the cross
37
00:03:37,110 --> 00:03:39,360
axis of our container.
38
00:03:39,360 --> 00:03:46,890
And if we look at the container that we have here our main container is not specifying a direction which
39
00:03:46,890 --> 00:03:55,380
means that it's on the default direction of row when you're in a direction of row the cross axis is
40
00:03:55,470 --> 00:03:57,960
your vertical up and down axis.
41
00:03:57,960 --> 00:04:06,180
But the main axis is your horizontal left and right direction now we just said that we want to censor
42
00:04:06,180 --> 00:04:14,460
our footer links horizontally on the footer and so that means we need to be styling the main axis for
43
00:04:14,460 --> 00:04:15,510
this container.
44
00:04:15,660 --> 00:04:16,830
And we just said that the.
45
00:04:16,860 --> 00:04:20,370
Justify property controls our main access.
46
00:04:20,430 --> 00:04:27,210
So let's go ahead and add a justify of a center onto our grid container.
47
00:04:27,210 --> 00:04:33,980
So let's go ahead and save this and we'll now see that our home text appears in the middle of the footer.
48
00:04:34,080 --> 00:04:40,620
So let's go and start adding the rest of our footer links now and to do this we'll actually refactor
49
00:04:40,650 --> 00:04:42,540
this first one just a little bit.
50
00:04:42,570 --> 00:04:50,040
So let's cut this class name off of this grid item and instead of just having the home in there let's
51
00:04:50,040 --> 00:04:56,220
create another grid container as the first item in here with a direction.
52
00:04:56,220 --> 00:04:59,300
Now set to column K.
53
00:04:59,340 --> 00:05:05,760
So we'll put that in there and then the first grid item within this new container will have our home
54
00:05:05,850 --> 00:05:13,340
text and so on this item we can now paste our classes dot link setting it up like this will make it
55
00:05:13,340 --> 00:05:17,000
consistent with the rest of the items that you'll see in just a second.
56
00:05:17,570 --> 00:05:21,320
So let's go now and here underneath this grid I don't.
57
00:05:21,410 --> 00:05:26,420
So this whole grid item will create a second grid item.
58
00:05:26,450 --> 00:05:34,700
This one also containing a grid container also with a direction equal to column.
59
00:05:34,700 --> 00:05:42,890
So now the grid items within this container are going to be stacked from top to bottom because we have
60
00:05:42,890 --> 00:05:46,150
set the direction equals column property.
61
00:05:46,190 --> 00:05:52,340
So instead of continuing to lay these out left to right these will all be stacked on top of one another.
62
00:05:52,460 --> 00:05:59,750
So we can go ahead and create a grid item and here this will be our services page and let's go ahead
63
00:05:59,780 --> 00:06:06,910
and paste on that class name of link onto there and then let's copy this entire grid item actually and
64
00:06:06,920 --> 00:06:18,040
paste that three more times underneath will then change services to custom software developments mobile
65
00:06:18,550 --> 00:06:27,810
mobile app developments and Web site developments if you remember from our footer that is our whole
66
00:06:27,840 --> 00:06:29,970
little column right there.
67
00:06:30,000 --> 00:06:41,790
And so then we'll go outside of this and create a another grid item with a grid container inside and
68
00:06:41,820 --> 00:06:49,680
let's also remember to set the direction to column here and inside of this column container we'll set
69
00:06:49,680 --> 00:07:00,450
our grid item to first be the revolution page and remember to get that class name of classes and link
70
00:07:00,690 --> 00:07:10,440
on there and then we'll paste that couple more times for our vision technology and paste that one more
71
00:07:10,440 --> 00:07:21,850
time for our process let's keep going and we'll create another grid item with a grid container with
72
00:07:21,850 --> 00:07:29,040
a direction of column inside and inside of there a grid item.
73
00:07:29,260 --> 00:07:39,490
This time with about us and make sure we get the class name classes dot link and then this time for
74
00:07:39,700 --> 00:07:54,500
history and for team finally that leaves are very last grid item with a grid container vague directions
75
00:07:54,500 --> 00:08:04,260
sets to column in inside of here just one single grid item with contact us inside.
76
00:08:04,490 --> 00:08:11,180
So you can see that we really are going to be alternating between our grid items containers and items
77
00:08:11,390 --> 00:08:14,960
to lay out and align all of the content on the screen.
78
00:08:15,050 --> 00:08:21,830
However we would like and then it's going to make sure that it's all consistent and aligned for us really
79
00:08:21,830 --> 00:08:24,050
making a nice layout.
80
00:08:24,050 --> 00:08:30,260
So let's go ahead and save this and see how that looks and it looks like we actually have a little bit
81
00:08:30,260 --> 00:08:31,190
of a problem.
82
00:08:31,190 --> 00:08:38,090
The contact us item looks like we didn't get that in exactly the right spot we were still inside that
83
00:08:38,090 --> 00:08:38,740
grid item.
84
00:08:38,750 --> 00:08:40,370
So make sure you come all the way out.
85
00:08:40,400 --> 00:08:46,850
So there's only one grid tag underneath and then we'll paste it that grid item with the grid container
86
00:08:46,970 --> 00:08:48,920
with our contact us item inside.
87
00:08:48,920 --> 00:08:50,260
So let's save this again.
88
00:08:50,420 --> 00:08:58,220
And now we'll see the page refresh and you can see our home link and then these services column and
89
00:08:58,220 --> 00:09:05,420
then the revolution column the about us column and then the contact us column even though it only has
90
00:09:05,480 --> 00:09:13,430
one row and you can really see now how we're laying these out from left to right for our biggest container.
91
00:09:13,580 --> 00:09:21,370
And then inside of each of these items is another container now laid out top to bottom we did obviously
92
00:09:21,370 --> 00:09:25,420
forget our class name for the contact us right there.
93
00:09:25,420 --> 00:09:33,340
So on this grid item item add the class name of classes dot link and we'll save that.
94
00:09:33,340 --> 00:09:40,040
And now it looks like everything is styled correctly I definitely don't like though how all of those
95
00:09:40,040 --> 00:09:41,630
links are squished together.
96
00:09:41,630 --> 00:09:46,850
That's obviously not the work that I designed or that the look that anyone would want.
97
00:09:46,880 --> 00:09:50,330
And so let's go ahead and add some spacing to this.
10969
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.