1
00:00:00,070 --> 00:00:06,480
In this project we'll be developing the javascript and CSX based photo gallery the gallery has a set

2
00:00:06,480 --> 00:00:07,940
of thumbnails at the top.

3
00:00:09,600 --> 00:00:12,640
And a main preview image image displayed below.

4
00:00:13,040 --> 00:00:18,410
When a user hovers their mouse over the thumbnail the main preview image changes to the corresponding

5
00:00:18,410 --> 00:00:22,230
thumbnail.

6
00:00:22,250 --> 00:00:28,580
There's also a hover effect on the thumbnails in some CSF styling for the borders background color and

7
00:00:28,580 --> 00:00:32,690
text formatting before we get started.

8
00:00:32,700 --> 00:00:38,670
You'll need to download the images folder that contains the images for this exercise From the downloads

9
00:00:38,670 --> 00:00:41,270
folder.

10
00:00:41,710 --> 00:00:47,530
Once you've done so you must place the entire images folder in the same directory that you'll be saving

11
00:00:47,530 --> 00:00:51,850
your HDMI file into with that complete.

12
00:00:51,860 --> 00:00:53,490
Let's go ahead and get started.

13
00:00:53,540 --> 00:00:59,460
Create your basic HCM page structure and save the file you can give it any file name you like.

14
00:01:01,440 --> 00:01:05,720
Next we'll need to create a style sheet for our page with several style rules.

15
00:01:07,980 --> 00:01:10,230
The first rule will style the page elements

16
00:01:13,100 --> 00:01:22,680
we've set the background color of the body to hex code 2 2 2 we've created a margin at the top of the

17
00:01:22,680 --> 00:01:23,850
page.

18
00:01:24,300 --> 00:01:31,050
We've set the default font family to aerial in the color of the the default font color to white.

19
00:01:31,080 --> 00:01:35,820
The next rule here is a class definition for the thumbnails in this class.

20
00:01:35,820 --> 00:01:45,060
We've defined the height as 80 pixels border is 4 pixels solid with the hex code of 5 5 5 1 pixel padding

21
00:01:45,810 --> 00:01:56,000
and some margin on the left in the right so that's what gives us this look for for each thumbnail image.

22
00:01:56,000 --> 00:01:59,150
Next we have a class for the hover effect on the thumbnails.

23
00:01:59,150 --> 00:02:06,770
This will change the color of the border to a four pixel solid border with this hex code and that's

24
00:02:06,770 --> 00:02:15,200
a light blue color in the last all we have here is the class that will style the main preview image.

25
00:02:15,550 --> 00:02:21,040
We've given the preview image a border some padding and the width of eight hundred pixels.