1
00:00:00,300 --> 00:00:05,250
So in this video, we're going to swell style, that's the format, because we're left off, this is

2
00:00:05,250 --> 00:00:08,460
where we left off at the tablet format.

3
00:00:08,820 --> 00:00:11,610
Now let's go to a responsive, complete responsive format.

4
00:00:11,620 --> 00:00:13,320
So we're going to actually leave those.

5
00:00:14,570 --> 00:00:19,430
Five hundred pixels, and this is from the phone format.

6
00:00:20,560 --> 00:00:27,820
This is for the tablet format, and if we go now in a completely responsive format desktop, we reached

7
00:00:27,820 --> 00:00:29,930
1500 pixels, for example.

8
00:00:30,700 --> 00:00:33,780
Well, I don't like what this looks, so let's take care of it.

9
00:00:34,910 --> 00:00:40,040
Actually, I don't have much work to do, but essentially we're going to start, first of all, our

10
00:00:40,040 --> 00:00:40,430
main.

11
00:00:42,920 --> 00:00:50,000
I mean, s. and let's start by targeting by limiting our own media queries, so we're going to go with

12
00:00:50,000 --> 00:00:53,000
media and media and we're going to start with a Menwith.

13
00:00:55,890 --> 00:01:05,580
Of nine hundred pixels, no, I said we still we need to, first of all, target our main so mean and

14
00:01:05,580 --> 00:01:11,490
we don't mean we're going to change now the max width of the page to nine hundred pixels, not on the

15
00:01:11,490 --> 00:01:14,790
entire page, but of our main section.

16
00:01:15,360 --> 00:01:18,240
And the main section was until we started with the photo section.

17
00:01:18,240 --> 00:01:20,130
So only this part will be styled.

18
00:01:21,260 --> 00:01:27,710
But also, the header was in the main section, so that's, first of all, push it to the center of

19
00:01:27,710 --> 00:01:28,120
the page.

20
00:01:28,160 --> 00:01:32,810
We're going to use margin and order and this will push a page to the center right here.

21
00:01:33,950 --> 00:01:36,930
Now, this doesn't look where this does not look very good.

22
00:01:37,070 --> 00:01:44,210
So in order to differentiate our page form from this margins right here, we are going to now use a

23
00:01:44,210 --> 00:01:45,400
bit of a box shadow.

24
00:01:45,920 --> 00:01:51,890
So let's go in here, use box shadow, and I'm going to do with further pixels.

25
00:01:52,130 --> 00:01:57,590
You obviously change this and also encourage you to constantly play around with this then for the pixels

26
00:01:58,160 --> 00:02:05,660
and then for the color going through the RBA of two and now comma, who's minus for the pixels.

27
00:02:06,440 --> 00:02:13,950
Zero for the pixels and R.G. B, A or B A two.

28
00:02:14,460 --> 00:02:21,890
OK, so we save, we have this nice shadow and also our page just the bit pops out of the of the background.

29
00:02:23,120 --> 00:02:29,280
Next up on took care of the button, so this one right here, let's.

30
00:02:29,600 --> 00:02:32,000
Well, not only in a desktop format now we can use hover.

31
00:02:32,030 --> 00:02:36,410
So let's take this button class and install it when we hover over it.

32
00:02:37,970 --> 00:02:39,450
They're supposed to have a course of point.

33
00:02:39,450 --> 00:02:48,740
Does it indicate that we are over our button and are going to also take out this effect of device toggle

34
00:02:48,770 --> 00:02:50,930
so we can no longer change the devices?

35
00:02:51,680 --> 00:02:53,150
OK, so now we know that's the format.

36
00:02:53,180 --> 00:02:57,890
So as soon as we go over our button, we have this hover pointer effect.

37
00:02:59,920 --> 00:03:04,570
But I also want to have another effect, and that is that the background color should change.

38
00:03:04,600 --> 00:03:09,310
So let's go back on color and let's use our evil color again of 66.

39
00:03:11,360 --> 00:03:15,530
OK, now we have our button, the that goes just a bit, uh.

40
00:03:17,160 --> 00:03:24,480
In the greyish area now, that's it for the hover effect now also wanted to have a active effect, this

41
00:03:24,480 --> 00:03:28,790
just means when we do something with the button in our case, we will click it.

42
00:03:28,800 --> 00:03:33,300
So we're going to use the active and then we're going to scale it a bit.

43
00:03:33,330 --> 00:03:40,320
So this is a transform then scale and we're going to scale it to zero point ninety six percent of its

44
00:03:40,320 --> 00:03:41,210
initial size.

45
00:03:42,060 --> 00:03:50,070
And I also want to try this out when we click it to consider scaling happening, but also want the effect

46
00:03:50,070 --> 00:03:54,330
that the button is what is clicked inwards.

47
00:03:54,340 --> 00:03:56,090
So let's take out the spot shadow.

48
00:03:56,370 --> 00:03:59,580
And for this, we're going to Xbox Shadow and none.

49
00:04:04,440 --> 00:04:10,120
OK, so as soon as we do this and click it, we have no more box shadow holding down the click.

50
00:04:10,140 --> 00:04:10,410
Now.

51
00:04:12,680 --> 00:04:15,080
OK, so that's pretty much it for Dysport.

52
00:04:15,410 --> 00:04:16,910
Now I want to change.

53
00:04:17,770 --> 00:04:18,940
A contact section.

54
00:04:20,140 --> 00:04:22,060
Let's go down to our contacts section.

55
00:04:23,720 --> 00:04:30,080
And we in here, we said that we want to have a hover effect on them.

56
00:04:31,210 --> 00:04:32,230
All right here.

57
00:04:34,020 --> 00:04:38,520
Not an architect, and we also did it up there, but I want to have it actually in here.

58
00:04:38,540 --> 00:04:40,850
So this was within.

59
00:04:42,000 --> 00:04:46,360
Try through contact social exactly.

60
00:04:46,380 --> 00:04:52,530
We're going to take the social media icon's class no, not the social media.

61
00:04:52,560 --> 00:04:53,640
I'm sorry about that.

62
00:04:54,000 --> 00:04:55,380
We did not contact that.

63
00:04:55,380 --> 00:04:56,810
We had contact.

64
00:04:56,820 --> 00:04:58,050
I did the anchor tag.

65
00:05:00,330 --> 00:05:01,800
And now within a couple state.

66
00:05:04,210 --> 00:05:06,940
It should have a text declaration of.

67
00:05:08,750 --> 00:05:16,030
OK, and as soon as I do this and I hover over our email address, we have now this online that you

68
00:05:16,030 --> 00:05:22,120
could also, for example, give it the color of hash if you want.

69
00:05:23,000 --> 00:05:27,220
And it would also have this white color when you go over it.

70
00:05:28,300 --> 00:05:31,360
OK, next up, let's take care of a social context.

71
00:05:32,290 --> 00:05:34,730
Now, I just want to have a couple of things for them.

72
00:05:34,960 --> 00:05:42,370
First of all, each time I'm hopping over a I can't take what they have because so on the Christmas

73
00:05:42,370 --> 00:05:43,500
to be shown as pointers.

74
00:05:43,530 --> 00:05:49,110
So let's take our social have it actually get the tablet.

75
00:05:49,450 --> 00:05:51,730
So social media icons.

76
00:05:53,150 --> 00:05:57,880
And within here, we're going to target all of our income tax.

77
00:05:58,940 --> 00:06:06,080
Now I'm going to set the cursus pointer and now for all of them, well, we have this point, but I

78
00:06:06,080 --> 00:06:08,170
also want them to have a change of color.

79
00:06:08,390 --> 00:06:14,120
So let's target, first of all, the class of this first icon here of Facebook

80
00:06:17,270 --> 00:06:21,200
and let's say when we holler or Facebook or icon.

81
00:06:22,160 --> 00:06:28,340
Then let's change the color to a hash one eight seven seven.

82
00:06:29,530 --> 00:06:37,220
AB f two, that is the Facebook, but you could also Google us, so when we hover with the color changes

83
00:06:37,220 --> 00:06:37,580
to blue.

84
00:06:38,260 --> 00:06:46,860
Well, I was honored to have a bit of a ease in and transition effects I'm going to use transition options

85
00:06:46,990 --> 00:06:47,350
for.

86
00:06:48,380 --> 00:06:49,190
Transition.

87
00:06:54,140 --> 00:06:59,080
Of zero point four seconds, you could go with more or less and ease.

88
00:06:59,920 --> 00:07:05,620
So as soon as I hover or icon has, this is in effect and also changing the color.

89
00:07:05,990 --> 00:07:10,530
But when I'm leaving the icon, the color change happens a bit too abrupt.

90
00:07:11,150 --> 00:07:21,260
So the solution for this is also to put right here the initial state of of the icon to have a transition

91
00:07:21,260 --> 00:07:21,630
effect.

92
00:07:22,160 --> 00:07:29,300
So in a hover in it, has the color, the color changing affect them in a holler out also, and it's

93
00:07:29,300 --> 00:07:32,400
going back to its initial state or its initial color.

94
00:07:32,630 --> 00:07:33,650
This will have this effect.

95
00:07:35,140 --> 00:07:38,420
Not the sort of the same thing for Instagram.

96
00:07:38,440 --> 00:07:39,460
So let's go down here.

97
00:07:40,760 --> 00:07:44,330
And this changed the effort to Instagram.

98
00:07:45,280 --> 00:07:54,470
And it's now changed a color to the Instagram color, which is C30 to a and free ad for free, said

99
00:07:54,490 --> 00:07:54,910
Save.

100
00:07:54,910 --> 00:07:56,860
And let's take a look at our Instagram now.

101
00:07:57,910 --> 00:07:58,660
OK, perfect.

102
00:07:59,170 --> 00:08:04,600
Now we need to do the same thing for Twitter and YouTube, but what I don't like is that I'm repeating

103
00:08:04,600 --> 00:08:05,080
myself.

104
00:08:05,080 --> 00:08:11,830
So this one right here, this transition, I would need to do the same thing for Twitter.

105
00:08:15,470 --> 00:08:19,300
And so it quickly changed to call this one.

106
00:08:20,520 --> 00:08:22,560
The A one F two.

107
00:08:26,010 --> 00:08:32,460
So when I'm hovering over, Tittered is also changing, but we have already three extra lines of code

108
00:08:32,460 --> 00:08:39,180
that we actually don't need, and the solution to this is actually go to the social media icons.

109
00:08:39,180 --> 00:08:42,030
And within this target, the class of F a, b.

110
00:08:43,780 --> 00:08:45,180
A autistic artist, curser.

111
00:08:46,170 --> 00:08:49,560
So by doing this and this Fibi class is actually from here.

112
00:08:49,740 --> 00:08:56,940
OK, so each icon from our social media has a different class, but it also has the common class of

113
00:08:56,940 --> 00:08:57,570
Fabi.

114
00:08:59,120 --> 00:09:03,170
And I'm going to tell the class that, hey, we're going to hover over you.

115
00:09:04,940 --> 00:09:13,040
We should have this transition effect so I can now she selected from here command or control the take

116
00:09:13,040 --> 00:09:13,540
it out.

117
00:09:13,550 --> 00:09:15,680
And now let's see if a whole lot of them.

118
00:09:16,460 --> 00:09:16,880
Yep.

119
00:09:17,180 --> 00:09:21,080
The fact still remains that we still need to change this to also YouTube.

120
00:09:24,110 --> 00:09:27,280
You Tube and the collar.

121
00:09:28,820 --> 00:09:34,550
Was actually pretty simple, one F to F's and four zeros.

122
00:09:38,280 --> 00:09:38,840
OK.

123
00:09:40,040 --> 00:09:47,990
So you saw that we just actually had four lines of code removed and just placed them here by targeting

124
00:09:47,990 --> 00:09:49,190
an extra class.

125
00:09:50,680 --> 00:09:52,850
I guess that's pretty much it for this project.

126
00:09:52,880 --> 00:09:53,840
Hope you enjoyed it.

127
00:09:53,990 --> 00:10:00,980
And as I said, this project was only meant for you to understand the basic the basic principles of

128
00:10:00,980 --> 00:10:07,340
a mobile first approach, which with mobile, we worked as we worked ourselves upwards with a mobile

129
00:10:07,340 --> 00:10:09,110
format and we worked USCIRF upwards.

130
00:10:09,620 --> 00:10:13,460
And then we took care of it Thaxted format.

131
00:10:13,460 --> 00:10:16,040
And then we took care as a tablet format.

132
00:10:16,040 --> 00:10:18,960
And then we also took care of a desktop format.

133
00:10:19,400 --> 00:10:22,010
So I hope you enjoyed this project and seen the next one.

134
00:10:22,280 --> 00:10:22,710
Thank you.

135
00:10:22,730 --> 00:10:23,140
Bye bye.