1
00:00:00,450 --> 00:00:07,350
Now that we're familiar with CSX we'll work on creating a CSX based web page using a commonly used three

2
00:00:07,350 --> 00:00:10,150
column responsive layout.

3
00:00:10,170 --> 00:00:12,950
This is what the final result will look like.

4
00:00:13,090 --> 00:00:19,450
We'll have a navigation menu at the top with four links each link has a mouse over effect and one of

5
00:00:19,450 --> 00:00:27,580
the links is active by default the navigation bar is also nested inside a header div and that's the

6
00:00:27,580 --> 00:00:32,650
black background area that you see behind the navigation.

7
00:00:32,650 --> 00:00:37,170
Next we have our three columns which will hold the content of our page.

8
00:00:37,420 --> 00:00:43,210
We've placed text content in this example to keep it simple and easy to follow.

9
00:00:43,210 --> 00:00:50,560
The three columns are designed to collapse below one another depending on the user screen size.

10
00:00:50,560 --> 00:00:54,490
As you can see when we shrink the screen the header is on top

11
00:00:59,520 --> 00:01:07,800
the center content area is second followed by the blue and yellow content areas at the very bottom we

12
00:01:07,800 --> 00:01:12,300
have our footer as well.

13
00:01:12,480 --> 00:01:19,760
This makes the Web page fully compatible with any mobile device in any screen size.

14
00:01:19,780 --> 00:01:21,970
So with that out of the way we'll go ahead and get started.