Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,260 --> 00:00:07,740
The services page is a nice place to start this section off because it's very similar to what we've
2
00:00:07,740 --> 00:00:16,010
already done on part of the landing page think that now that we've gone through and use the grid component
3
00:00:16,040 --> 00:00:21,590
to build our home page and we understand more about how it works in practice.
4
00:00:21,620 --> 00:00:28,040
So I think that now these diagrams I've made of how we'll structure these more complex layouts are going
5
00:00:28,040 --> 00:00:31,550
to make more sense now that you have experience with the actual code.
6
00:00:31,850 --> 00:00:38,360
So we'll come over and this is a screenshot of these services page.
7
00:00:38,360 --> 00:00:44,860
This is the entire page and you can see it is basically the services block from the home page.
8
00:00:44,900 --> 00:00:53,770
Just move around a little bit to create this layout will first need an item for the entire page.
9
00:00:53,770 --> 00:00:56,750
So this will be our overall rapping grid.
10
00:00:56,890 --> 00:01:03,850
And this is going to be a great container with a direction of column so you can see how the items are
11
00:01:03,850 --> 00:01:11,740
laid out top to bottom and see if I go forward you'll see so the services title that is the first item
12
00:01:11,770 --> 00:01:20,920
in this grid container of column and that is a grid item wrapping a typography variant H2 and then the
13
00:01:20,920 --> 00:01:28,000
next grid item in this container direction column has our Iowa's an Android app development section
14
00:01:28,300 --> 00:01:32,150
and that itself is going to be broken into two items.
15
00:01:32,170 --> 00:01:37,370
So this is a grid item container and we're not setting a direction here.
16
00:01:37,420 --> 00:01:43,750
And so it's in the default direction of row and that will allow us to put our text on the left side
17
00:01:43,960 --> 00:01:46,550
having the icon appear on the right.
18
00:01:46,600 --> 00:01:53,050
So you can see then we have the next grid item and that is also going to be a grid item container with
19
00:01:53,050 --> 00:01:59,890
the default direction of row and then we have the grid item container for the website development section
20
00:02:01,340 --> 00:02:09,620
so hopefully this makes it a little more clear the four items within our overall grid container of direction
21
00:02:09,620 --> 00:02:13,820
column and how all of the items are sitting on top of one another.
22
00:02:13,850 --> 00:02:20,180
Thanks to the column direction but now let's go into one of these containers where the first item in
23
00:02:20,180 --> 00:02:28,820
this container is the text with the section title subtitle and they learn more button so that is going
24
00:02:28,820 --> 00:02:36,650
to be a grid item the container direction of column because this is containing these multiple typography
25
00:02:36,650 --> 00:02:43,180
components as well as the button components and it needs them to be arranged from top to bottom.
26
00:02:43,280 --> 00:02:51,520
And so we'll use the container direction of column that leaves the second grid item in this row container
27
00:02:51,790 --> 00:02:54,960
which is the image and that is a grid item.
28
00:02:54,970 --> 00:03:03,350
Simply wrapping in image within our grid item container of column for our text and the button we'll
29
00:03:03,350 --> 00:03:11,600
start off with the title here and that is a grid item typography variant H four so you can see that
30
00:03:11,600 --> 00:03:18,140
this is within our wrapping container of column and as the first grid item this will sit on the top
31
00:03:18,530 --> 00:03:24,160
and then we have our subtitle which is a typography variant of subtitle.
32
00:03:24,470 --> 00:03:30,100
And then the second subtitle is A typography subtitle one as well.
33
00:03:30,170 --> 00:03:38,920
And then the last item within that container is our button which is a grid Item button so hopefully
34
00:03:38,920 --> 00:03:45,460
this breakdown makes it a little more clearer especially seeing the code next to the actual screenshot
35
00:03:45,550 --> 00:03:47,180
of what we're going to be building.
36
00:03:47,290 --> 00:03:52,840
But for the sake of space here I'm not going to break down the custom software development or website
37
00:03:52,900 --> 00:03:58,150
development sections because they are set up the exact same way as our Iaw and Android app development
38
00:03:58,150 --> 00:04:04,600
section is here and we'll just be using our different justify values to arrange the sections towards
39
00:04:04,600 --> 00:04:10,360
the left or the right but thankfully for this page it actually won't be too hard because we'll be able
40
00:04:10,360 --> 00:04:15,520
to use the section that we've already made for the home page and then we'll just have to change it a
41
00:04:15,520 --> 00:04:16,720
little bit from there.
42
00:04:16,720 --> 00:04:19,470
So I'll switch over to the code editor and we'll get started.
5234
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.