1 00:00:04,400 --> 00:00:09,020 Hello everyone and welcome back to our bootstrap course and this lecture we're going to be setting up 2 00:00:09,020 --> 00:00:14,780 the header for our product landing page in the header we're going to have a background image with a 3 00:00:14,780 --> 00:00:16,130 dark overlay. 4 00:00:16,130 --> 00:00:18,130 And we're gonna have some text on top of the image. 5 00:00:18,140 --> 00:00:24,260 And on top of the overlay explaining the product and including a button that will send the user to purchase 6 00:00:24,260 --> 00:00:25,490 the product. 7 00:00:25,490 --> 00:00:28,820 So right now we have our header element just here. 8 00:00:28,880 --> 00:00:31,460 Let's go ahead and make a div inside of it. 9 00:00:31,470 --> 00:00:34,000 First we want to make a div of class overlay. 10 00:00:34,010 --> 00:00:35,640 This is a bootstrap class. 11 00:00:35,840 --> 00:00:39,940 And this will enable us to make an overlay. 12 00:00:39,950 --> 00:00:44,170 So the image will be a slightly darker because it'll have an overlay on top of it. 13 00:00:45,230 --> 00:00:46,670 And it followed the overlay. 14 00:00:46,670 --> 00:00:48,650 We can actually add the image itself. 15 00:00:48,740 --> 00:00:57,260 So to add an image you open an image tag and then you write source as are C equals and then in double 16 00:00:57,260 --> 00:01:04,190 quotation marks you will put the source of your image so you can find copyright free images on the Web 17 00:01:04,250 --> 00:01:06,620 such as on the site on Splash. 18 00:01:06,620 --> 00:01:13,730 Here I have an image I found on Splash and there are other websites like pix eBay with copyright free 19 00:01:13,730 --> 00:01:21,200 images from these rivers so you can either find images on the web make sure that a copyright free so 20 00:01:21,230 --> 00:01:26,000 you're allowed to use them or you can have your own images of your own products as well. 21 00:01:26,000 --> 00:01:31,610 Now you can either download the image by clicking on the dropdown arrow and downloading the original 22 00:01:31,610 --> 00:01:38,150 size make sure you download the original size because you want to download as large of a size as possible 23 00:01:38,180 --> 00:01:44,930 typically because you want to account for the largest screen size possible so you would download this 24 00:01:44,990 --> 00:01:46,550 original size. 25 00:01:46,610 --> 00:01:51,380 You can also instead of downloading the other option is to right click on the image and click open image 26 00:01:51,440 --> 00:02:00,950 in new tab and this will open the image in its own tab and then you can copy the you are L appear of 27 00:02:00,970 --> 00:02:06,180 where that image is located and then you can copy that into geo spin here. 28 00:02:06,200 --> 00:02:11,390 So that is the other option especially for just been this is convenient because you can just copy and 29 00:02:11,390 --> 00:02:13,130 the link to the image. 30 00:02:13,130 --> 00:02:21,200 And in this way the e-mail compiler will look through the Internet to find this you are L and it will 31 00:02:21,200 --> 00:02:23,700 grab the image at that you URL. 32 00:02:23,770 --> 00:02:26,720 Now it has to be a direct link to a specific image. 33 00:02:26,720 --> 00:02:27,140 Okay great. 34 00:02:27,140 --> 00:02:34,670 So now we have our image added and images are self closing which means you don't have to close this 35 00:02:34,730 --> 00:02:40,600 image tag whereas divs are not self closing which means you had to add a closing tag. 36 00:02:40,610 --> 00:02:45,890 OK so underneath the image let's go ahead and add a container with a text that will be on top of the 37 00:02:45,890 --> 00:02:46,570 image. 38 00:02:46,660 --> 00:02:52,180 So we're gonna open a new div and give it the class Container and we're gonna set its height to 100 39 00:02:52,910 --> 00:02:54,560 and then we're going to close that div. 40 00:02:54,590 --> 00:03:00,800 So this time we made a container using Bootstrap classes and inside of the container we're gonna make 41 00:03:00,800 --> 00:03:09,350 another another div and this is going to be of type D flex which means we can use flex box to style 42 00:03:09,380 --> 00:03:10,680 its positioning. 43 00:03:10,820 --> 00:03:15,620 We're gonna give it the height of 100 again and we're going to centre its text and in line its items 44 00:03:16,220 --> 00:03:17,720 to the center as well. 45 00:03:19,040 --> 00:03:19,880 OK great. 46 00:03:19,880 --> 00:03:24,370 So this will contain a div that will flex anything inside of it. 47 00:03:24,380 --> 00:03:28,960 Which means we'll put everything inside of it into a flex container. 48 00:03:29,000 --> 00:03:34,670 And this is better for responsively and positioning and allows for a fast positioning because bootstrap 49 00:03:34,670 --> 00:03:37,360 will position all the elements for you. 50 00:03:37,460 --> 00:03:37,670 Okay. 51 00:03:37,670 --> 00:03:38,030 Excellent. 52 00:03:38,030 --> 00:03:46,140 Now inside of here we're gonna make another div and we're going to set it's with two hundred and it's 53 00:03:46,250 --> 00:03:47,780 text to white. 54 00:03:48,860 --> 00:03:53,240 And let's go ahead and immediately close that div here so don't forget and inside of this one which 55 00:03:53,240 --> 00:03:57,710 has a width of one hundred and we said this text to white although we did set all of our paragraph text 56 00:03:57,710 --> 00:04:03,800 to white as well so we don't actually need this we can move it and add it if it's required but text 57 00:04:03,800 --> 00:04:05,950 White the bootstrap class that sets your text to white. 58 00:04:05,980 --> 00:04:08,330 But we did add that the ACA sets already. 59 00:04:09,170 --> 00:04:10,310 Okay great. 60 00:04:10,310 --> 00:04:12,760 So now we have the with the 100. 61 00:04:12,770 --> 00:04:15,970 Let's go ahead and in here we're going to add in each one class. 62 00:04:15,970 --> 00:04:22,950 So typically you want to have only one each one per page for ACL and you can set it size by using display 63 00:04:22,970 --> 00:04:24,000 3. 64 00:04:24,650 --> 00:04:29,840 And then in here we're going to write something like unlimited online courses. 65 00:04:29,840 --> 00:04:35,990 So we're going to suppose that the product reporting is a subscription to online courses. 66 00:04:35,990 --> 00:04:42,320 So we're going to use this as a site title which is unlimited online courses. 67 00:04:42,320 --> 00:04:47,510 This is the actual title that will be shown on a page whereas the title up here is the title that would 68 00:04:47,510 --> 00:04:49,340 be shown just right here 69 00:04:52,350 --> 00:04:56,130 so let's see let's change us to online courses as well. 70 00:04:56,130 --> 00:05:00,720 And you can of course replace this was with any product that you want to promote. 71 00:05:00,720 --> 00:05:00,940 Okay. 72 00:05:00,960 --> 00:05:06,870 We have a limited online courses let's also add a paragraph of a description of the product as well 73 00:05:06,930 --> 00:05:13,710 so we can give it the class lead to make it a bit bigger as well as and be zero and you can go ahead 74 00:05:13,710 --> 00:05:17,040 and experiment by adding more styling if you would like to as well. 75 00:05:17,890 --> 00:05:18,150 OK. 76 00:05:18,180 --> 00:05:24,570 So this will be a paragraph text containing something like a watch anywhere advance your career. 77 00:05:24,600 --> 00:05:27,520 So we're promoting some courses to advance your career. 78 00:05:28,330 --> 00:05:30,000 OK excellent. 79 00:05:30,000 --> 00:05:32,100 Now let's also added button. 80 00:05:32,100 --> 00:05:34,460 So we've added a button in previous projects. 81 00:05:34,470 --> 00:05:36,800 Let's go ahead and add one. 82 00:05:37,650 --> 00:05:42,720 We're going to make it by opening a paragraph tag and closing a paragraph tag and inside of the paragraph 83 00:05:42,720 --> 00:05:44,830 tag not open an anchor tag. 84 00:05:45,000 --> 00:05:48,860 And we're going to link it to the checkout page. 85 00:05:48,870 --> 00:05:56,850 So we're going to have to link it to one of the elements on the page which in this case is out so we 86 00:05:56,850 --> 00:06:01,590 can use this I.D. and link them down there whenever they click on this button. 87 00:06:01,670 --> 00:06:07,680 We're going to call it Heidi hashtag check out and then we're going to give it a class button which 88 00:06:07,680 --> 00:06:12,780 is a bootstrap class that will automatically make this element into a button and style it and we can 89 00:06:12,780 --> 00:06:15,940 sell it to button primary which will make it blue. 90 00:06:15,990 --> 00:06:22,110 We can also add a margin on the top and bottom of a five and a patting on the left and right off for 91 00:06:22,230 --> 00:06:26,250 any padding on the top and bottom of two as well. 92 00:06:26,250 --> 00:06:32,870 And of course you have to play around with these numbers to see what works best for you OK great. 93 00:06:32,870 --> 00:06:36,410 So now we have to close our anchor tag and in here we have to write the text that will be displayed 94 00:06:36,440 --> 00:06:37,320 in the button. 95 00:06:37,380 --> 00:06:40,740 So this case it'll be in roll now. 96 00:06:43,030 --> 00:06:48,370 This could also be you learn more or sign up or purchase by now et cetera. 97 00:06:49,340 --> 00:06:49,570 OK. 98 00:06:49,580 --> 00:06:50,960 Great. 99 00:06:51,820 --> 00:06:52,040 OK. 100 00:06:52,040 --> 00:06:57,390 So now we have a container with each one a paragraph and a button. 101 00:06:57,410 --> 00:07:00,910 Let's go ahead and test how this looks in the output. 102 00:07:00,950 --> 00:07:03,590 So if we go to the output and hide it. 103 00:07:03,920 --> 00:07:11,120 You can now see that our background is black and we have an image here of our background image and we're 104 00:07:11,120 --> 00:07:18,130 going to zoom out and we also have our header online courses and our text watch anywhere as well as 105 00:07:18,140 --> 00:07:19,040 a button. 106 00:07:19,040 --> 00:07:25,430 Now this the styling is looking a bit messy right now you can see we have our image at the top here 107 00:07:25,910 --> 00:07:27,470 and then our text way down below. 108 00:07:27,470 --> 00:07:29,930 So the page is quite large. 109 00:07:29,930 --> 00:07:34,160 However we do have this texture that's a bit great but we'll change that to white and we have a paragraph 110 00:07:34,160 --> 00:07:36,950 here and we have our bootstrap button. 111 00:07:36,950 --> 00:07:45,160 OK so we are going to go ahead and add more styling to this to ensure that the image is on the background. 112 00:07:45,190 --> 00:07:51,530 So right just behind the text and the image doesn't increase its size to be this huge. 113 00:07:51,680 --> 00:07:54,460 And we're also going to change the text of the each one. 114 00:07:54,560 --> 00:08:02,240 So we're going to go ahead and add more styling to that to solve all these styling issues in our CFS. 115 00:08:02,250 --> 00:08:04,840 So let's go ahead and close the EU melon open. 116 00:08:04,870 --> 00:08:06,270 This is us instead. 117 00:08:06,400 --> 00:08:07,180 And down here. 118 00:08:07,220 --> 00:08:12,060 Well we're going to style our header tag our header element up here. 119 00:08:12,110 --> 00:08:20,710 So first let's go ahead and add styling to the header itself and then we can style its internal elements. 120 00:08:20,720 --> 00:08:26,560 So first you can set its position to relative so as its background color to black. 121 00:08:26,570 --> 00:08:31,820 So the position relative means that it will be relative to the other elements on the screen and will 122 00:08:31,820 --> 00:08:32,690 be absolute. 123 00:08:32,720 --> 00:08:34,700 So it won't be fixed. 124 00:08:34,700 --> 00:08:39,660 This means it will move with other elements and be more responsive. 125 00:08:39,680 --> 00:08:44,390 Typically you always want to declare some kind of position for your elements so that you can set other 126 00:08:44,390 --> 00:08:46,000 properties as well. 127 00:08:46,340 --> 00:08:51,920 That early two position will also change the background color to black even though we already have it 128 00:08:51,920 --> 00:08:54,380 up here we can set it again that's fine. 129 00:08:54,380 --> 00:09:00,040 We can also set the height to be 100 percent make trees by height. 130 00:09:00,050 --> 00:09:00,930 Right. 131 00:09:01,070 --> 00:09:06,320 And you can also set something that is known as minimum height so you rate the property at midnight 132 00:09:06,890 --> 00:09:13,430 and Monheit will ensure that the header has a specific height even if the screen size is really small. 133 00:09:13,430 --> 00:09:21,360 So you can set this to five RAM which means twenty five times larger than the font size. 134 00:09:22,200 --> 00:09:22,620 OK. 135 00:09:22,640 --> 00:09:29,780 You can also set the with 200 percent and the overflow to hidden overflow hidden means that if there 136 00:09:29,780 --> 00:09:36,180 is some extra part of the image that would overflow we will hide it instead of showing it. 137 00:09:36,740 --> 00:09:37,410 OK. 138 00:09:37,610 --> 00:09:39,140 Let's add some more styling here. 139 00:09:39,140 --> 00:09:42,220 So we're also going to style the image inside of the header. 140 00:09:42,230 --> 00:09:44,270 So our background image. 141 00:09:44,270 --> 00:09:50,390 Let's go ahead and make it into a background by setting its position to absolute which is the opposite 142 00:09:50,390 --> 00:09:51,400 of relative. 143 00:09:51,410 --> 00:09:56,920 This means that this position will not be relative to any other positions. 144 00:09:56,930 --> 00:10:02,020 It will have its own and that will allow it to go to the background because it's absolute. 145 00:10:02,020 --> 00:10:09,320 We actually had a set its exact location so we're going to set it to be 50 percent from the top and 146 00:10:09,320 --> 00:10:19,490 50 percent from the left also said it's men with two hundred percent and it's men height to 100 percent 147 00:10:20,880 --> 00:10:27,300 and we can also said it's with two auto and it's height to auto which means it will automatically take 148 00:10:27,630 --> 00:10:31,200 the width and height of its container. 149 00:10:31,200 --> 00:10:38,070 You can also set the easy index of 1 2 2 0 and that will put it into the background because the index 150 00:10:38,160 --> 00:10:40,130 refers to the depth. 151 00:10:40,260 --> 00:10:45,310 So by default all elements have a z index of 1 which means they're flat on a page. 152 00:10:45,570 --> 00:10:52,440 And by making it the index 0 or pushing it back behind other elements if we made it to we would push 153 00:10:52,440 --> 00:10:54,920 it up in front of the other elements. 154 00:10:55,270 --> 00:11:00,360 Okay we can also add in some code for other browsers. 155 00:11:00,360 --> 00:11:04,250 So depending on the browser you are using elements can look different. 156 00:11:04,260 --> 00:11:16,920 So we're going to add for safari or either transform of translate X minus 50 percent those translate 157 00:11:18,030 --> 00:11:20,300 y of minus 50 percent. 158 00:11:20,310 --> 00:11:27,750 This will help account for different browsers and we can just copy this and paste it in three more times 159 00:11:29,130 --> 00:11:32,850 and will account for other browsers in the extra time. 160 00:11:32,860 --> 00:11:41,040 So for this one will add mods for Mozilla and also add web kids and we'll also add just a regular transform. 161 00:11:41,040 --> 00:11:46,740 This is pretty typically added to background images to account for these other browsers. 162 00:11:46,740 --> 00:11:46,950 OK. 163 00:11:46,950 --> 00:11:47,310 Excellent. 164 00:11:47,370 --> 00:11:49,170 Now we styled the header and the header image. 165 00:11:49,170 --> 00:11:54,150 Let's go ahead and see how this looks now in the output so I'm going to click on the output to open 166 00:11:54,150 --> 00:12:00,480 that and as you can see now we have our image and it's now taking up the whole screen but the overflow 167 00:12:00,480 --> 00:12:01,220 is being hidden. 168 00:12:01,230 --> 00:12:07,530 As you can see it's not changing the page size its height and width is 100 percent of the screen which 169 00:12:07,530 --> 00:12:09,990 means I can't scrolled up or down. 170 00:12:09,990 --> 00:12:15,390 Which means that the whole image was sort of shrunk into fit the size of the pages which is what we 171 00:12:15,390 --> 00:12:16,230 want. 172 00:12:16,290 --> 00:12:24,390 However you'll notice that the text disappeared because now the image is taking up 100 percent of the 173 00:12:25,140 --> 00:12:25,940 page. 174 00:12:26,130 --> 00:12:30,900 So we're gonna go ahead and fix this in the next lecture by showing the text and the button that we 175 00:12:30,900 --> 00:12:34,980 had previously used typically see this and see if I see your fixed one thing. 176 00:12:34,980 --> 00:12:36,500 This will create another problem. 177 00:12:36,730 --> 00:12:41,220 That's very typical and might go ahead and solve this in the next lecture. 178 00:12:41,220 --> 00:12:48,650 I'm going to add the text to be overlaid on top of the image and give the image a bit of a darker shade. 179 00:12:48,680 --> 00:12:52,810 So add a bit of overlay to the image. 180 00:12:52,830 --> 00:12:55,800 That way we can actually read the text clearly on top. 181 00:12:55,840 --> 00:12:57,930 OK so thank you all for watching. 182 00:12:57,930 --> 00:13:01,440 You now have a background image on your page. 183 00:13:01,530 --> 00:13:04,290 You've made it quite far and we'll see you in the next lecture.