1 00:00:00,390 --> 00:00:05,130 Next up, we're going to take care of a contact section, so first, as always, let's start with our 2 00:00:05,130 --> 00:00:10,500 e-mail and go into our e-mail comments of context section. 3 00:00:13,840 --> 00:00:15,490 And end of contact section. 4 00:00:19,950 --> 00:00:21,320 Let's copy both of them. 5 00:00:23,910 --> 00:00:25,050 Going to access. 6 00:00:26,520 --> 00:00:27,240 Them in. 7 00:00:37,370 --> 00:00:38,420 And comment them on. 8 00:00:44,280 --> 00:00:50,780 OK, let's go back to our e-mail and start creating our contacts section again. 9 00:00:50,970 --> 00:00:52,710 We're going to use a section tag. 10 00:00:55,140 --> 00:00:57,870 I'm going to give it a idea of contact. 11 00:01:01,610 --> 00:01:06,980 Within here, we're going to create a title, the to contact us. 12 00:01:09,800 --> 00:01:10,880 US, just us. 13 00:01:15,170 --> 00:01:23,030 Now I'm going to have a generic container which will contain our entire contact, so contact container 14 00:01:24,530 --> 00:01:26,040 and within our contact container. 15 00:01:26,450 --> 00:01:31,040 I'm going to have actually free contact with a container. 16 00:01:31,070 --> 00:01:36,710 So that's to contact the class of contact, multiply it. 17 00:01:37,740 --> 00:01:46,560 With free I mean, to have free classes, but I'm also going to go to the theater to go in here and 18 00:01:47,070 --> 00:01:48,480 add another class. 19 00:01:49,430 --> 00:01:56,000 And I need to add now, I don't need that middle class, but what I do need to add is in each one of 20 00:01:56,000 --> 00:01:56,300 them. 21 00:01:59,810 --> 00:02:00,950 The anchor tag. 22 00:02:03,350 --> 00:02:03,950 Plus. 23 00:02:06,220 --> 00:02:07,570 A free tag. 24 00:02:10,210 --> 00:02:11,470 And then plus. 25 00:02:16,100 --> 00:02:28,500 Two paragraph text, so paragraph times two and I go, OK, now for I context, I'm going to start with 26 00:02:28,500 --> 00:02:29,120 the F a. 27 00:02:29,120 --> 00:02:29,600 S. 28 00:02:31,110 --> 00:02:44,610 Actually need to do a class, so class of EPP's, then Efate, Dash Street View, so Street View, this 29 00:02:44,610 --> 00:02:47,160 would be the first one and multiply it times. 30 00:02:48,280 --> 00:02:50,000 Free, OK? 31 00:02:50,050 --> 00:02:55,300 That's it, escape and now let's change them, the first one going to do it as it is, but the second 32 00:02:55,300 --> 00:02:57,930 one will be a phone call. 33 00:02:59,940 --> 00:03:07,220 And the first one will be mail bulk, actually, a mail mailbox was missing you there, sir. 34 00:03:08,310 --> 00:03:09,060 You'll need it. 35 00:03:09,360 --> 00:03:12,290 Control X and let me pass it in here. 36 00:03:15,450 --> 00:03:18,300 OK, now for the titles, so H frees. 37 00:03:19,910 --> 00:03:21,890 We have the first title with Visigoth. 38 00:03:26,330 --> 00:03:33,530 And after that, we have two paragraphs, and this would be just some sort of a postal code, then the 39 00:03:33,530 --> 00:03:37,100 city and after that. 40 00:03:39,010 --> 00:03:40,120 Some street. 41 00:03:44,870 --> 00:03:46,100 And some no. 42 00:03:46,990 --> 00:03:57,320 OK, then we have our last night, second night of call us some fantasy number plus something, something 43 00:03:59,550 --> 00:04:05,690 just gets to be some kind of number and then a mobile number plus, again, something something something 44 00:04:06,530 --> 00:04:07,070 no less. 45 00:04:07,070 --> 00:04:08,930 Title of writers. 46 00:04:15,830 --> 00:04:25,820 And this type of imagery, imagine immunologists info at some mail dot com, and then the last one is 47 00:04:25,820 --> 00:04:32,630 something the website w w w some site dot com. 48 00:04:33,610 --> 00:04:40,330 OK, so that's basically let's say let's see what we got to go down he you. 49 00:04:43,460 --> 00:04:44,180 And there we go. 50 00:04:44,240 --> 00:04:47,900 There's a cocktail, actually, let me actually check out a navigation bar. 51 00:04:47,930 --> 00:04:48,800 Yep, it's working. 52 00:04:49,560 --> 00:04:52,070 Okay, so let's start styling our contacts section. 53 00:04:53,990 --> 00:04:56,390 Go going here, context section. 54 00:04:56,420 --> 00:04:58,070 Let me go a bit up. 55 00:05:06,080 --> 00:05:08,000 Now, let's target our idea of contact. 56 00:05:12,920 --> 00:05:14,570 OK, let's display this flex. 57 00:05:20,080 --> 00:05:28,360 Let's change of direction to a column, and it's justified to come to the center, a line, the items 58 00:05:28,360 --> 00:05:31,690 to the center, and now we should have been the center of the page. 59 00:05:32,200 --> 00:05:33,640 Let's go down to contact. 60 00:05:34,020 --> 00:05:35,500 Everything's in the center of the page. 61 00:05:36,330 --> 00:05:46,270 OK, next up, the target again, the contact I.D. and within this, the contact container. 62 00:05:52,160 --> 00:05:54,590 OK, again, we're going to display those flags. 63 00:05:58,870 --> 00:06:00,790 Going to use flex rep again. 64 00:06:04,840 --> 00:06:10,000 And we're going to give it a margin from the top of forum. 65 00:06:13,910 --> 00:06:19,370 Now, for the full content, we can now justify it with space between. 66 00:06:20,740 --> 00:06:25,600 Actually, it's your space evenly and align the items to the center. 67 00:06:26,320 --> 00:06:27,700 OK, so let's check this out. 68 00:06:28,310 --> 00:06:28,860 There we go. 69 00:06:28,870 --> 00:06:34,510 There are items not as give them a bit of sizing. 70 00:06:35,470 --> 00:06:37,150 So they go down here. 71 00:06:44,460 --> 00:06:46,680 They started to contact again. 72 00:06:48,390 --> 00:06:56,700 And the class now contact, so each and every contact class within it, contact no, we're going to 73 00:06:56,700 --> 00:07:05,700 use IMEX with the again of three hundred pixels and a padding all around padding of the RAM unit to 74 00:07:05,700 --> 00:07:11,760 display them as flex and the flex direction they call them. 75 00:07:16,740 --> 00:07:19,650 OK, now we just need to align the items to the center. 76 00:07:21,290 --> 00:07:23,000 And change the background color. 77 00:07:26,280 --> 00:07:29,640 To a white collar case, let's check this out. 78 00:07:29,700 --> 00:07:30,200 There we go. 79 00:07:34,580 --> 00:07:39,000 Now, listen, I want to do is take the icons on the bed. 80 00:07:39,030 --> 00:07:43,460 I need a bit of space between the icons and the title right there. 81 00:07:43,460 --> 00:07:45,950 So that's to our contact ID. 82 00:07:50,050 --> 00:07:57,460 And the eye contact, actually, that's the eye stands for eye type text, but nobody uses teletext 83 00:07:57,460 --> 00:07:57,940 no more. 84 00:07:57,950 --> 00:08:03,790 So that's why I'm calling them eye contacts and I'm going to give them a monument to the bottom of undreamt. 85 00:08:04,450 --> 00:08:10,690 And the last thing I want to do is when I hover over them, must change color. 86 00:08:10,700 --> 00:08:15,130 So when they hover state, just give them a color. 87 00:08:16,350 --> 00:08:24,760 Well, Brooke, OK, so let's see what we just did, the perfect the good guy. 88 00:08:24,810 --> 00:08:27,840 So that's basically it for the contact section so soon. 89 00:08:27,840 --> 00:08:28,680 The next one by.