1
00:00:00,770 --> 00:00:01,090
All right.

2
00:00:01,100 --> 00:00:02,060
Welcome back.

3
00:00:02,330 --> 00:00:07,870
So the Tauriel we will be creating the background slider for our landing page of Joachim.

4
00:00:08,150 --> 00:00:12,830
The background slider is going to have five images that fade into one another so they're visible for

5
00:00:12,830 --> 00:00:13,640
five seconds.

6
00:00:13,640 --> 00:00:18,620
They take a five second fade in and then a five second fade out and the fade out overlaps with the fade

7
00:00:18,620 --> 00:00:21,140
in for the next image creating a crossfade effect.

8
00:00:24,920 --> 00:00:31,340
So the first thing I'm going to do is open up my scene I have a directory called background slider and

9
00:00:31,340 --> 00:00:34,740
background cyder is actually just version 11 of your cam.

10
00:00:35,150 --> 00:00:42,150
So if you take your version of 11 and create a version 12 then you can begin working from that directory.

11
00:00:42,230 --> 00:00:45,960
So I'm going to visit the tutorial that I created on get have

12
00:00:50,030 --> 00:00:57,530
the euro for this is get have dot com slash my user name which is in a x 3 T and then slash background

13
00:00:57,530 --> 00:00:59,310
dash slider.

14
00:00:59,870 --> 00:01:05,750
So the first thing we're gonna want to do is open up our landing that Ejaz page go back over to my workspace

15
00:01:06,110 --> 00:01:14,030
go to the views directory and open up landing W.J. as though I'm going to go back over here to the tutorial

16
00:01:14,630 --> 00:01:22,230
and I'll copy this whole portion of code so that it can replace all of this.

17
00:01:22,300 --> 00:01:28,930
Now what we have here is our doctype set is to mount and then inside of our head area we have a couple

18
00:01:28,930 --> 00:01:29,490
of links.

19
00:01:29,500 --> 00:01:34,340
We have one for bootstrap Mendonsa SS That's our CDN for bootstrap.

20
00:01:34,390 --> 00:01:36,260
Then we link to our custom stylesheet.

21
00:01:36,430 --> 00:01:40,390
This is a new style sheet that I created because I don't want to use any of the styles from the main

22
00:01:40,650 --> 00:01:44,360
CSSA these styles are going to be specific to the landing page.

23
00:01:44,560 --> 00:01:50,050
So we're also going to have to add a landing that CSSA inside of our stylesheets directory but we'll

24
00:01:50,050 --> 00:01:51,510
get back to that in a second.

25
00:01:51,910 --> 00:01:54,940
I've also added the CDN for something called moderniser.

26
00:01:55,180 --> 00:02:00,550
So what modernisers going to do is going to check the browser for the version and then it'll add some

27
00:02:00,550 --> 00:02:06,330
special classes to our page in case the browser is older like Internet Explorer 8 and that will allow

28
00:02:06,330 --> 00:02:12,100
our CSSA to latch onto those classes that are added by moderniser and make our page more cross-browser

29
00:02:12,100 --> 00:02:16,100
compatible inside of our body.

30
00:02:16,100 --> 00:02:22,670
We have our container div and then we have our conditionals for our errors or success messages and then

31
00:02:22,670 --> 00:02:26,950
we have a div that I've created with an idea of landing header.

32
00:02:27,050 --> 00:02:30,450
This is where I put the H-1 with our Welcome to your camp text.

33
00:02:30,500 --> 00:02:34,500
Then we have our view all campgrounds button.

34
00:02:34,650 --> 00:02:39,790
We've also added an ordered list with a class of slideshow and it has five list items.

35
00:02:39,870 --> 00:02:41,340
So this is pretty interesting.

36
00:02:41,490 --> 00:02:46,740
We're not actually going to use the body to create the background because we have multiple backgrounds

37
00:02:46,740 --> 00:02:48,620
that are fading into one another.

38
00:02:48,660 --> 00:02:51,690
We need to attach them to some type of Tummo element.

39
00:02:51,840 --> 00:02:56,000
So what we've chosen to do is attach each background to each one of these list items.

40
00:02:56,010 --> 00:03:00,360
So you'll notice we have five list items that correspond with the five background images that we're

41
00:03:00,360 --> 00:03:05,400
going to have cross fading into one another and at the bottom we have our Parshall's filter just like

42
00:03:05,400 --> 00:03:06,150
before.

43
00:03:06,180 --> 00:03:11,070
We're going to go ahead and use the include tag and then directed to Parshall's for Slash for.

44
00:03:11,250 --> 00:03:18,120
So we say for landing that UJA us and we go ahead and run our server so run Mongar the and that gets

45
00:03:18,120 --> 00:03:22,560
my Monga daemon running then we can open up another tab and run node on.

46
00:03:22,740 --> 00:03:27,880
If you don't know about Pneumon yet go and install it it's an alternative to using node app.

47
00:03:28,010 --> 00:03:28,500
Yes.

48
00:03:28,530 --> 00:03:33,870
And what it does is it listens for any file changes on your server and if it gets changed and saved

49
00:03:34,100 --> 00:03:37,890
it goes ahead and restarts the server for you that we don't have to keep going back and forth to your

50
00:03:37,890 --> 00:03:38,710
server tab.

51
00:03:38,880 --> 00:03:47,340
Closing it down and restarting node so to install that we're going to run the command NPM install Dutchie

52
00:03:47,440 --> 00:03:57,270
for global and then node 9 or no daemon so once it's install as long as we're inside of our parent directory

53
00:03:57,270 --> 00:04:03,160
for our project we can run no daemon and then look for the Apter jazz file.

54
00:04:03,480 --> 00:04:05,150
Or you can explicitly tell it.

55
00:04:05,280 --> 00:04:09,420
No daemon app that Jad.

56
00:04:09,440 --> 00:04:17,100
So now that we have our server running let's go and preview it I'll open it up full screen here.

57
00:04:18,110 --> 00:04:23,730
And currently we have this H-1 and then we have a button and we have our five list items.

58
00:04:23,870 --> 00:04:30,910
So now what we have to do is go back and Stuy all of this to make it to where this is center and these

59
00:04:30,910 --> 00:04:36,170
list items are all the bullets for the list items are hidden and then replaced with a giant background

60
00:04:36,170 --> 00:04:38,490
image that takes up the entire page.

61
00:04:38,510 --> 00:04:42,680
You'll notice that we no longer have the navigation bar on top because on the landing page we don't

62
00:04:42,680 --> 00:04:43,490
really need it.

63
00:04:43,670 --> 00:04:47,870
We can just go to view all campgrounds and then the user wants to sign it and they can sign up or sign

64
00:04:47,870 --> 00:04:48,510
in from there.