1 00:00:00,330 --> 00:00:04,880 Hi welcome to the part one of building had a section in this lecture. 2 00:00:05,040 --> 00:00:11,250 I will be writing a Stephen markable for the header section for really responsive web site. 3 00:00:11,270 --> 00:00:14,000 This is the wireframe for the header section. 4 00:00:14,000 --> 00:00:22,280 It has this large image on the background and a logo Lo-Shon in the middle and on the right side there 5 00:00:22,280 --> 00:00:30,200 is a phone image and on the left side we have some headings and subheadings and two button for download 6 00:00:30,410 --> 00:00:33,810 and there are two. 7 00:00:34,010 --> 00:00:35,700 This will be the final version. 8 00:00:35,720 --> 00:00:38,610 After this lecture and coming that year you can see. 9 00:00:38,630 --> 00:00:48,920 So let us get according the header section or Kim just the H-2 and page called so project it has nothing 10 00:00:49,700 --> 00:00:50,700 at this stage. 11 00:00:50,700 --> 00:00:53,600 You'll start writing the H-G and marker from sketch. 12 00:00:53,610 --> 00:00:54,870 Hit me open. 13 00:00:55,080 --> 00:01:02,200 Steimle in the Chrome browser so you can see that it's a disk. 14 00:01:02,350 --> 00:01:04,240 It is a blank page. 15 00:01:04,240 --> 00:01:05,140 There is nothing left. 16 00:01:05,150 --> 00:01:12,300 Now do you see this is a title be added in the previous lecture and table. 17 00:01:12,470 --> 00:01:17,790 I can have a can. 18 00:01:17,840 --> 00:01:23,900 So it has nothing except only the resources are there like I took. 19 00:01:23,990 --> 00:01:27,920 Google course for bike and I think there is a mistake. 20 00:01:27,920 --> 00:01:30,500 This should be only one for Explain it fix it. 21 00:01:30,500 --> 00:01:32,940 Quickly before we move forward. 22 00:01:35,180 --> 00:01:36,910 It should be ONE. 23 00:01:39,800 --> 00:01:43,670 Should we once close CMH suit has nothing to date. 24 00:01:43,730 --> 00:01:49,550 Now we have all the resources set up in the previous sections so we can start building the hardest section 25 00:01:49,560 --> 00:01:50,400 in this lecture. 26 00:01:50,430 --> 00:01:51,620 So let's get started. 27 00:01:53,640 --> 00:01:55,980 I will remove the extra spaces. 28 00:01:56,090 --> 00:01:59,740 It is a good practice to remove an intent indent your code. 29 00:02:03,200 --> 00:02:07,550 We can come for the header section. 30 00:02:08,160 --> 00:02:14,310 I will add the element and no you are familiar with the hidden element because I explained the head 31 00:02:14,360 --> 00:02:18,610 element in the steamin section inside the header. 32 00:02:18,620 --> 00:02:23,550 Let us also add Klaas's while awaiting the similar marker. 33 00:02:23,840 --> 00:02:26,360 This would be it. 34 00:02:28,070 --> 00:02:42,910 And inside the hated it'd be need class or div of the data to overload your place an hourly on the header. 35 00:02:43,100 --> 00:02:44,300 There are elements 36 00:02:47,570 --> 00:02:49,430 inside the header. 37 00:02:49,580 --> 00:02:50,670 Orderly. 38 00:02:50,980 --> 00:02:54,680 You're starting to grade classes of yourself. 39 00:02:54,890 --> 00:03:00,860 Like do laws contain. 40 00:03:02,110 --> 00:03:07,510 No you are also familiar the most good classes. 41 00:03:09,730 --> 00:03:11,830 And inside the container. 42 00:03:12,580 --> 00:03:18,700 I need to add a row class or so. 43 00:03:19,710 --> 00:03:28,940 And inside that we need to add the local the logo should. 44 00:03:29,040 --> 00:03:36,830 OK why are the columns so close and call empty. 45 00:03:36,840 --> 00:03:40,120 This is a single set of column Krome would. 46 00:03:40,700 --> 00:03:41,840 It. 47 00:03:42,800 --> 00:03:48,100 And this could occupy all the columns of boresight and lives. 48 00:03:48,100 --> 00:03:50,100 Eg Marco for the middle 49 00:03:56,430 --> 00:04:05,050 class logo Lotus center line it takes Center. 50 00:04:05,250 --> 00:04:08,470 This is the class combo. 51 00:04:08,520 --> 00:04:12,330 It would align the element in the center of the middle of column 52 00:04:16,120 --> 00:04:17,070 and inside. 53 00:04:17,140 --> 00:04:20,050 Let me add each card logo 54 00:04:23,980 --> 00:04:25,800 and G. 55 00:04:25,990 --> 00:04:29,020 So any images and lobal 56 00:04:32,670 --> 00:04:36,470 item name if the logo is not available. 57 00:04:36,810 --> 00:04:47,400 That district should be shown Akeem area or logo there to see that is added. 58 00:04:49,510 --> 00:04:54,690 OK we have our logo on our page. 59 00:04:56,310 --> 00:05:01,530 You find just for our dad. 60 00:05:01,540 --> 00:05:04,470 We need one another. 61 00:05:09,190 --> 00:05:11,030 The same. 62 00:05:11,170 --> 00:05:19,540 You lost four for all you can create multiple rules inside a single container of 63 00:05:25,010 --> 00:05:31,570 D-Wade this disco into eight columns and perform columns. 64 00:05:32,890 --> 00:05:34,620 Like do you 65 00:05:38,220 --> 00:05:40,880 call them medium. 66 00:05:41,220 --> 00:05:43,110 Great. 67 00:05:43,600 --> 00:05:52,320 And this will be for data and description and also the burdens go inside this column 68 00:05:55,460 --> 00:05:57,070 do you last noticed today. 69 00:05:57,120 --> 00:06:08,280 Marco for the titles on the head of section header takes had to takes and you said this. 70 00:06:08,490 --> 00:06:08,880 Ed 71 00:06:11,760 --> 00:06:12,210 Koch 72 00:06:26,340 --> 00:06:32,820 It just cost hating it shuang it should be a gleaming 73 00:06:35,970 --> 00:06:43,510 and Martinon looking responsive responsive good site. 74 00:06:44,450 --> 00:06:52,980 And we also have a better job offer today which will be buried deep. 75 00:06:53,460 --> 00:06:53,750 Love 76 00:06:57,650 --> 00:07:02,790 looking on this notice and muttons 77 00:07:26,790 --> 00:07:32,820 there are two buttons one button is for download and the second button is 40 acre color. 78 00:07:33,170 --> 00:07:40,400 I would use Ankerberg cookies and I would use the plain cream. 79 00:07:40,700 --> 00:07:44,560 But now a lot of the circuit and work like 15. 80 00:07:44,590 --> 00:07:57,560 This is the most gloss and then between download and it should hopefully be it pointing to nothing. 81 00:07:57,560 --> 00:08:04,980 At this stage I don't look at just the second button. 82 00:08:06,080 --> 00:08:11,730 Plus 18 and between. 83 00:08:11,840 --> 00:08:20,440 So you can add some custom t s s h h and you should also point to nothing at this stage. 84 00:08:20,450 --> 00:08:23,730 You figure it out later. 85 00:08:26,830 --> 00:08:31,340 Here let me see evidence that isn't Nepos or 86 00:08:34,870 --> 00:08:35,620 it. 87 00:08:35,870 --> 00:08:37,160 OK. 88 00:08:37,960 --> 00:08:43,950 Now you can see your columns article paying the heading. 89 00:08:44,040 --> 00:08:47,850 One paragraph and the anger takes. 90 00:08:47,850 --> 00:08:52,720 You also need to don't at all for this take a quarter or take notice. 91 00:08:52,750 --> 00:08:54,900 Add it to the iPhone 4S. 92 00:08:54,970 --> 00:08:58,500 Awesome icons good use. 93 00:08:58,590 --> 00:08:59,460 Yes and this is the view. 94 00:08:59,460 --> 00:09:03,530 Do you want ice and glass. 95 00:09:03,550 --> 00:09:06,390 I would use the classic. 96 00:09:07,400 --> 00:09:09,560 Awesome point. 97 00:09:09,740 --> 00:09:11,570 Awesome Dortmunder see is this. 98 00:09:11,630 --> 00:09:13,550 This is the C assist. 99 00:09:13,910 --> 00:09:16,660 And if you will use it as a form. 100 00:09:16,700 --> 00:09:17,670 Awesome. 101 00:09:18,140 --> 00:09:18,760 Awesome. 102 00:09:18,920 --> 00:09:27,760 Desch angle Don because we need angry don't I can at this stage exhibit. 103 00:09:28,220 --> 00:09:30,880 It is you that isn't working. 104 00:09:30,890 --> 00:09:32,230 No you have angry down. 105 00:09:32,280 --> 00:09:33,670 I can hear the answer. 106 00:09:34,050 --> 00:09:37,900 Every shooting will come will recall. 107 00:09:37,950 --> 00:09:42,850 You can see it has this crank and dash. 108 00:09:42,870 --> 00:09:47,650 Awesome don't mean you don't see this. 109 00:09:47,750 --> 00:09:52,390 So if you know them in container in say the container we have a single room for the logo and it is a 110 00:09:52,420 --> 00:09:56,240 put occupying all of the 12 columns and inside the container. 111 00:09:56,240 --> 00:10:01,040 We had the second drill and right now it is occupying the eight columns. 112 00:10:01,040 --> 00:10:06,650 Let us add Marco for the rest of the four columns. 113 00:10:12,110 --> 00:10:27,290 Like call him Dean hole this last fall will be complete columns and just all the columns in a grid system. 114 00:10:27,300 --> 00:10:27,910 Never said. 115 00:10:28,020 --> 00:10:29,690 And then in this 116 00:10:34,510 --> 00:10:38,320 it isn't hey do I. 117 00:10:38,380 --> 00:10:42,660 Of course we have to replace the acorn image on the right side of the head of 118 00:10:49,360 --> 00:10:50,550 a dog. 119 00:10:50,810 --> 00:11:00,700 I hope to see image of seeing those images. 120 00:11:01,540 --> 00:11:04,570 And I find I can. 121 00:11:04,570 --> 00:11:05,530 Header. 122 00:11:05,900 --> 00:11:08,710 But Binjie. 123 00:11:12,090 --> 00:11:18,700 Is this one I need kind of neutral. 124 00:11:20,530 --> 00:11:26,290 Hey do I hug macros. 125 00:11:27,400 --> 00:11:29,310 Let us see the desert in the browser. 126 00:11:32,310 --> 00:11:42,960 OK we have this very big image we'll be applying see sense in the next lecture so it will then become 127 00:11:42,960 --> 00:11:45,160 fixed to this header section. 128 00:11:45,240 --> 00:11:49,710 So this is the Estival marker for the header section. 129 00:11:49,710 --> 00:11:53,240 Let me see if I didn't miss anything here. 130 00:11:53,270 --> 00:11:58,860 The header element and inside the hidden element we have overly overlay. 131 00:11:58,950 --> 00:12:05,430 I will explain in the next lecture when I play some TSS inside the oberlé we have a main container and 132 00:12:05,430 --> 00:12:13,470 inside the container we have rules like this one and this one and the first rule is occupying all the 133 00:12:13,470 --> 00:12:19,130 girl column for the logo and the second drawer is occupying the first side. 134 00:12:19,200 --> 00:12:27,000 It columns which contains headings and burdens and the second side is occupied for them. 135 00:12:27,140 --> 00:12:28,690 Four columns. 136 00:12:29,070 --> 00:12:35,080 Are just taking this Aykan had an image Sutin next picture. 137 00:12:35,190 --> 00:12:39,110 Next I read Eddings Scrooge's head of Section. 138 00:12:39,170 --> 00:12:39,590 Thanks.