1
00:00:00,590 --> 00:00:06,800
And welcome back, I want to show you a property that is commonly used with images, so I have a really

2
00:00:06,800 --> 00:00:09,690
funny picture here of an alpaca.

3
00:00:09,740 --> 00:00:10,900
So we're going to copy that.

4
00:00:10,910 --> 00:00:16,490
Actually, we're going to use the link for this and we're going to add an image to our website.

5
00:00:17,090 --> 00:00:19,760
Let's just make our font size a little bit smaller.

6
00:00:21,240 --> 00:00:27,030
Perfect, and I'm going to try and add a picture to the left over here, so if we go to our about page

7
00:00:27,420 --> 00:00:33,450
and in our section over here, we can try and add a picture.

8
00:00:33,880 --> 00:00:35,340
So let's do an image tag.

9
00:00:35,730 --> 00:00:41,070
And if you remember, we have a source and that source I just copy and pasted the link.

10
00:00:41,070 --> 00:00:43,320
And if I save this and refresh.

11
00:00:44,740 --> 00:00:49,600
Well, that's a big picture, so as you may remember, we have to do with.

12
00:00:51,110 --> 00:01:01,670
Let's to 50 pixels and height, 50 pixels, let's say, then refresh and you can see that we broke.

13
00:01:01,820 --> 00:01:04,700
Let's make that a little bit bigger actually us to.

14
00:01:05,870 --> 00:01:08,960
Two hundred and 200.

15
00:01:12,500 --> 00:01:19,340
Perfect, you can see here that we actually broke a bit of our success, and that is because if you

16
00:01:19,340 --> 00:01:27,980
look over here, we have used this selecter which says immediate neighbor of two, we can just do this

17
00:01:27,980 --> 00:01:28,360
for now.

18
00:01:31,370 --> 00:01:38,240
Refresh and there you have it, but I kind of want the text to be on the right side over here.

19
00:01:38,390 --> 00:01:39,210
How do we do that?

20
00:01:39,530 --> 00:01:40,640
Well, we can.

21
00:01:41,690 --> 00:01:50,670
So like the image and use a property called float and float, you can do right or left.

22
00:01:50,690 --> 00:01:52,280
So if we do left.

23
00:01:56,470 --> 00:02:04,510
If flows the image to the left and you see that the text wraps around in this property was created specifically

24
00:02:04,510 --> 00:02:11,620
for these reasons to have images floating to either left or right and be able to have text wrapped around

25
00:02:11,620 --> 00:02:11,820
them.

26
00:02:13,050 --> 00:02:19,740
You'll see instances where float is being used for positioning elements, and that's not the best practice

27
00:02:19,740 --> 00:02:25,170
because it has some funny properties for now, just use it with images if you can.

28
00:02:26,190 --> 00:02:32,190
And one thing to note with float and just to show you that I can do it on the right as well, if I go

29
00:02:32,190 --> 00:02:36,310
like this and refresh, it flows to the right, I kind of like this better.

30
00:02:36,330 --> 00:02:37,380
So we'll keep that there.

31
00:02:38,310 --> 00:02:45,210
The other thing I want to show you is that if we added anything so after the image, we want to have

32
00:02:45,660 --> 00:02:47,010
a footer.

33
00:02:48,420 --> 00:02:54,240
And in this Futer say website Made with love.

34
00:02:55,720 --> 00:03:02,860
Close that and safe, and we also want to make this actually a lot smaller, so I'm going to do five

35
00:03:02,860 --> 00:03:04,810
pixels because I want to show you something.

36
00:03:05,680 --> 00:03:11,530
So you see over here, I've made this line had very, very small, but I wanted to demonstrate for you

37
00:03:11,620 --> 00:03:17,130
because this is floated to the right everything just kind of tax on to the left side over here.

38
00:03:17,500 --> 00:03:24,280
And if we wanted to make sure that our footer is at the bottom of the website, we would have to use

39
00:03:24,280 --> 00:03:32,050
a property that always, almost always comes with float and it's usually put in the property after the

40
00:03:32,050 --> 00:03:33,040
float is being used.

41
00:03:33,050 --> 00:03:38,090
So in our case, footer and we have to specify clear both.

42
00:03:38,800 --> 00:03:40,180
So if I save and refresh.

43
00:03:41,200 --> 00:03:46,480
We have that at the bottom and let's align it to the center here and refresh.

44
00:03:48,020 --> 00:03:49,290
Oh, I didn't.

45
00:03:49,760 --> 00:03:55,160
And let's do center save and refresh perfect.

46
00:03:55,940 --> 00:04:03,020
Now we have website made with love with a whole bunch of gibberish, but I wanted to show you that property

47
00:04:03,260 --> 00:04:11,810
float for images and make sure that we clear so you can start on the website on its own past the image.

48
00:04:13,520 --> 00:04:14,430
I'll see in the next one.

49
00:04:14,810 --> 00:04:15,120
Bye bye.