WEBVTT

00:00:06.930 --> 00:00:15.270
Let's not forget a couple of lines following the book's shadow property and onto the first line my sign

00:00:15.660 --> 00:00:23.910
goes to the second one minus sign where whether it's just for cross-browser compatibility like we did

00:00:23.910 --> 00:00:24.520
before.

00:00:24.750 --> 00:00:26.690
OK.

00:00:26.880 --> 00:00:31.160
All right so now we're going to move to the game over death.

00:00:31.380 --> 00:00:32.410
OK.

00:00:33.030 --> 00:00:37.160
So we're going to create another they've

00:00:44.100 --> 00:00:48.750
earned we're going to give it an ID.

00:00:48.750 --> 00:00:51.120
Game over.

00:00:53.010 --> 00:00:55.530
OK.

00:00:58.560 --> 00:01:00.390
So let's play some text.

00:01:00.450 --> 00:01:06.010
So later on we're going to be writing text inside this div using javascript.

00:01:06.510 --> 00:01:09.990
And we're going to be writing a couple of paragraphs.

00:01:10.290 --> 00:01:15.360
The first one is going to be game over.

00:01:16.920 --> 00:01:30.920
And the second one is going to say your score is whatever Coy's gay or it's.

00:01:32.400 --> 00:01:36.460
So let's leave this text for now just to test it.

00:01:36.680 --> 00:01:37.790
OK.

00:01:37.830 --> 00:01:38.220
So

00:01:44.850 --> 00:01:46.900
here is our game of a day.

00:01:47.370 --> 00:01:55.540
So let's Siletz going to access is using its ID.

00:01:55.740 --> 00:02:00.060
Game over.

00:02:00.060 --> 00:02:03.660
So let's give it a height

00:02:06.480 --> 00:02:17.030
of 200 pixels and a width of 500.

00:02:18.550 --> 00:02:20.260
OK.

00:02:22.050 --> 00:02:26.370
Let's also give it a background color.

00:02:26.650 --> 00:02:28.600
So we're going to use some linear gradients here.

00:02:28.620 --> 00:02:31.480
So we're going to use the background property not the background color.

00:02:31.650 --> 00:02:36.970
OK so we use the linear gradient function.

00:02:37.110 --> 00:02:52.190
So the first color I'm going to pick the top one and the second color in pick the Pottermore.

00:02:55.910 --> 00:02:58.780
Great.

00:03:01.020 --> 00:03:05.080
Now let's style.

00:03:07.250 --> 00:03:11.130
OK it looks like the colors on the right.

00:03:11.470 --> 00:03:16.050
It's like the way to the first color

00:03:19.870 --> 00:03:23.340
on the second color

00:03:33.920 --> 00:03:37.510
and it looks better.

00:03:38.100 --> 00:03:38.880
OK.

00:03:39.390 --> 00:03:42.990
All right so now let's style text inside our.

00:03:43.430 --> 00:03:51.500
So that is give it a color property going to white.

00:03:52.500 --> 00:04:01.360
And let's have the font size something big and have.

00:04:03.820 --> 00:04:04.540
OK.

00:04:04.870 --> 00:04:13.050
And also let's align the text in the center using the text align property.

00:04:14.190 --> 00:04:14.980
OK.

00:04:15.240 --> 00:04:22.230
And let's make all text uppercase using the text transform property.

00:04:22.240 --> 00:04:24.850
I'm going to go for uppercase.

00:04:25.290 --> 00:04:29.030
All right.

00:04:31.890 --> 00:04:37.200
Now let's position our div in the middle of the page.

00:04:37.390 --> 00:04:39.590
OK just like this.

00:04:39.660 --> 00:04:46.370
So we're going to give it's a position property absolute.

00:04:46.730 --> 00:04:47.500
OK.

00:04:48.000 --> 00:04:49.850
And when position is according.

00:04:50.110 --> 00:04:52.390
All relative to the container.

00:04:52.470 --> 00:04:53.100
Dave.

00:04:53.320 --> 00:05:06.900
OK so here's give is a top property of one hundred pixels and a left the property of

00:05:10.650 --> 00:05:11.250
20

00:05:16.740 --> 00:05:20.820
or 30.

00:05:22.310 --> 00:05:26.580
OK let's go for 45.

00:05:26.880 --> 00:05:28.760
That looks great.

00:05:29.910 --> 00:05:31.400
OK.

00:05:32.880 --> 00:05:35.540
Now I'm going to use another property here.

00:05:35.670 --> 00:05:37.700
It's going to be the Zad index.

00:05:37.740 --> 00:05:47.370
So just in case you made this bigger and it interacts with other elements which have got a position

00:05:48.090 --> 00:05:49.690
property absolute's.

00:05:49.930 --> 00:05:58.050
OK you may want to add the Zed index and set it to something greater than zero because the other elements

00:05:58.530 --> 00:06:00.950
by default have as an index of 0.

00:06:01.320 --> 00:06:05.570
So by doing this we make sure that's the game of a div appears.

00:06:05.580 --> 00:06:07.150
On top of the other elements.

00:06:07.320 --> 00:06:08.290
OK.

00:06:08.750 --> 00:06:13.790
And finally my defaults we want this div to be hidden.

00:06:13.880 --> 00:06:17.670
OK so we're going to use the display property.

00:06:17.830 --> 00:06:20.540
Now we're going to set it to none.

00:06:21.120 --> 00:06:24.500
All right.

00:06:24.930 --> 00:06:33.000
Now let's just get rid of the contents of this div because we're going to be creating these content

00:06:33.270 --> 00:06:38.170
using javascript later on.

00:06:41.550 --> 00:06:43.180
Let's empty this box.

00:06:43.410 --> 00:06:46.470
OK.

00:06:46.950 --> 00:06:55.080
So now we have finished creating the structure of our Web sites and doing all the decoration.

00:06:55.180 --> 00:06:59.940
And now we are ready to start writing some javascript code and creating our game