1 00:00:07,880 --> 00:00:08,870 In this video. 2 00:00:08,870 --> 00:00:13,910 Let's go ahead and then style the photo to have something like this. 3 00:00:14,090 --> 00:00:20,720 So back to the CSS before the media query, let's go ahead and add the photo. 4 00:00:20,840 --> 00:00:26,510 So here I'm going to be so here is going to be as photo. 5 00:00:26,540 --> 00:00:36,620 The first step is let's target the photo and I want to have a width of 100% and then display to be flex 6 00:00:36,800 --> 00:00:40,370 and the justified content to be. 7 00:00:42,850 --> 00:00:53,860 Center and align items to be center also and change the direction to column and then padding to be ten 8 00:00:53,860 --> 00:00:54,610 pixels. 9 00:00:54,610 --> 00:00:57,820 And let's give it a background color. 10 00:00:58,120 --> 00:01:03,190 As hashtag 003049. 11 00:01:03,190 --> 00:01:06,430 And the color going to be as. 12 00:01:08,730 --> 00:01:11,670 As hashtag three four FS. 13 00:01:11,670 --> 00:01:18,330 So let's see the magic and this is what we have as compared to the final one. 14 00:01:18,330 --> 00:01:27,420 So let's get continue the next step is let's go ahead and style the about great so here we go so our 15 00:01:27,420 --> 00:01:37,440 target the photon dot about we're going to be as dots about and for that I'm going to use this play 16 00:01:37,470 --> 00:01:38,730 as flex. 17 00:01:41,200 --> 00:01:49,530 And then flicks direction as column and then align items to be centred and just content to be sent. 18 00:01:49,630 --> 00:01:57,130 So these are the most commonly used Flexbox properties, save it and let's see indeed is at the center 19 00:01:57,130 --> 00:02:00,610 of the page, but let's go ahead and style. 20 00:02:00,610 --> 00:02:03,400 The paragraph to that is this one. 21 00:02:03,400 --> 00:02:05,560 So here we go. 22 00:02:05,590 --> 00:02:08,320 We would target the footer. 23 00:02:09,380 --> 00:02:14,840 And then the PE element or PE tag and change the color to. 24 00:02:16,580 --> 00:02:25,510 Hash tag HD 99a so let's see yes something like this. 25 00:02:25,520 --> 00:02:29,900 So let's go ahead and style the logo which is this one. 26 00:02:29,900 --> 00:02:32,210 So I'm going to start the Novatek alone. 27 00:02:32,210 --> 00:02:36,980 That is why I gave it as pan of logo text. 28 00:02:36,980 --> 00:02:39,230 So it's supposed to be logo text. 29 00:02:39,410 --> 00:02:45,110 So coming back to the CSS, let's go ahead and then start it to a DOT logo. 30 00:02:47,740 --> 00:02:49,060 Dallas, Texas. 31 00:02:49,060 --> 00:02:50,890 And here we go. 32 00:02:50,920 --> 00:03:03,150 Let's give it a font size of 4.5 ram and then font weight to be bold and then the color to be hashtag 33 00:03:03,160 --> 00:03:08,800 F, F, B, zero B, let's see what we have. 34 00:03:08,800 --> 00:03:12,370 And this is what we have as compared to the final one. 35 00:03:12,370 --> 00:03:15,700 Or we can we increase the font size a little bit. 36 00:03:15,700 --> 00:03:19,450 So I think instead of two, we can make it as four. 37 00:03:20,500 --> 00:03:21,340 Yes. 38 00:03:21,760 --> 00:03:25,450 And that yes, everything is in the pipeline. 39 00:03:25,720 --> 00:03:26,170 Okay. 40 00:03:26,170 --> 00:03:30,880 So next step is let's style the contact, which is this one. 41 00:03:30,880 --> 00:03:34,990 So if I open it, I only style the phone number and then the email. 42 00:03:35,020 --> 00:03:36,640 So here we go. 43 00:03:36,910 --> 00:03:42,760 I'm going to be the same as for I can copy this one and down here paste this one and then change this 44 00:03:42,760 --> 00:03:44,470 one to contact. 45 00:03:45,100 --> 00:03:45,700 Great. 46 00:03:45,700 --> 00:03:47,890 So how are we going to do this? 47 00:03:47,890 --> 00:03:52,960 Same properties for color and line center and then just file content center. 48 00:03:53,140 --> 00:04:02,380 But what we are going to add to add about the pattern, so padding here to be ten X and then the color 49 00:04:02,650 --> 00:04:13,720 to be white, that is F, F, F, and next I'm going to be the margin bottom margin bottom here to be 50 00:04:14,050 --> 00:04:16,480 us ten pixels. 51 00:04:16,480 --> 00:04:22,600 And lastly, the font size to be 1.5 REM. 52 00:04:22,810 --> 00:04:27,340 So let's see the magic and indeed this is what we have. 53 00:04:27,460 --> 00:04:29,620 The next step is less style. 54 00:04:29,620 --> 00:04:32,380 The span, the contact, the span. 55 00:04:32,380 --> 00:04:34,930 This is what I mean contact. 56 00:04:34,930 --> 00:04:39,820 And then a span element inside that is the email and then the phone number. 57 00:04:39,820 --> 00:04:41,710 So here we go. 58 00:04:41,710 --> 00:04:48,040 So our target, the footer and then those contacts and then the span. 59 00:04:48,100 --> 00:04:53,590 So here, give it a pattern of ten POSIX. 60 00:04:54,130 --> 00:04:55,360 Let's see. 61 00:04:55,360 --> 00:04:58,660 And we have something like this. 62 00:04:58,780 --> 00:05:00,820 The next one going to be the icons. 63 00:05:00,820 --> 00:05:03,460 I want to have some spacing between them. 64 00:05:03,460 --> 00:05:12,400 So the same process I would select this one and down here for to contact some around the icons and for 65 00:05:12,400 --> 00:05:20,050 the icons pattern ten and then the font size to be 36 as that. 66 00:05:20,080 --> 00:05:23,800 Now let's see a something like this. 67 00:05:23,920 --> 00:05:26,860 Lastly, let's change the color of this one. 68 00:05:26,860 --> 00:05:30,580 So we are going to target the a tag. 69 00:05:30,580 --> 00:05:32,470 So here we go. 70 00:05:32,500 --> 00:05:40,210 I will select this one down here, paste this one and change this one to A that is a H link. 71 00:05:40,210 --> 00:05:47,770 So let's remove the pattern and let's add the text decoration to non. 72 00:05:47,770 --> 00:05:56,140 And lastly, the color of it to be hashtag 0077b6. 73 00:05:57,070 --> 00:06:00,610 So let's see and something like this. 74 00:06:00,610 --> 00:06:04,930 Lastly, let's style the social media icons. 75 00:06:04,930 --> 00:06:07,390 So let's go ahead and then implement that. 76 00:06:07,390 --> 00:06:11,920 So remember, this is a container for social media, which is this one. 77 00:06:12,070 --> 00:06:14,590 So let's target the H lengths. 78 00:06:14,590 --> 00:06:23,260 So here you go, going to be footer and then dot sutures and then the links. 79 00:06:23,260 --> 00:06:31,930 So here we're going to have as margin to be ten pixels and then the font size also 30 pixels. 80 00:06:31,930 --> 00:06:39,550 And then the color is going to be hashtag F, C, be F for nine. 81 00:06:39,550 --> 00:06:42,790 So let's see and this is what we have. 82 00:06:42,790 --> 00:06:44,830 We can remove the underline. 83 00:06:44,830 --> 00:06:48,490 So here is going to be as. 84 00:06:49,850 --> 00:06:51,410 Text declaration. 85 00:06:52,830 --> 00:06:54,810 To none. 86 00:06:55,720 --> 00:06:59,580 And this is what we have as compared to the final one. 87 00:06:59,590 --> 00:07:01,180 That is it. 88 00:07:01,210 --> 00:07:03,700 So for responsiveness, let's check it out. 89 00:07:03,700 --> 00:07:08,960 And you can see that everything is responsive on bigger screen. 90 00:07:08,980 --> 00:07:12,520 You can see everything is aligned perfectly. 91 00:07:12,550 --> 00:07:13,130 Great. 92 00:07:13,150 --> 00:07:15,820 So guys here ends the project.