Hello everyone and welcome back to our bootstrap course and this lecture we're going to be setting up
the header for our product landing page in the header we're going to have a background image with a
dark overlay.
And we're gonna have some text on top of the image.
And on top of the overlay explaining the product and including a button that will send the user to purchase
the product.
So right now we have our header element just here.
Let's go ahead and make a div inside of it.
First we want to make a div of class overlay.
This is a bootstrap class.
And this will enable us to make an overlay.
So the image will be a slightly darker because it'll have an overlay on top of it.
And it followed the overlay.
We can actually add the image itself.
So to add an image you open an image tag and then you write source as are C equals and then in double
quotation marks you will put the source of your image so you can find copyright free images on the Web
such as on the site on Splash.
Here I have an image I found on Splash and there are other websites like pix eBay with copyright free
images from these rivers so you can either find images on the web make sure that a copyright free so
you're allowed to use them or you can have your own images of your own products as well.
Now you can either download the image by clicking on the dropdown arrow and downloading the original
size make sure you download the original size because you want to download as large of a size as possible
typically because you want to account for the largest screen size possible so you would download this
original size.
You can also instead of downloading the other option is to right click on the image and click open image
in new tab and this will open the image in its own tab and then you can copy the you are L appear of
where that image is located and then you can copy that into geo spin here.
So that is the other option especially for just been this is convenient because you can just copy and
the link to the image.
And in this way the e-mail compiler will look through the Internet to find this you are L and it will
grab the image at that you URL.
Now it has to be a direct link to a specific image.
Okay great.
So now we have our image added and images are self closing which means you don't have to close this
image tag whereas divs are not self closing which means you had to add a closing tag.
OK so underneath the image let's go ahead and add a container with a text that will be on top of the
image.
So we're gonna open a new div and give it the class Container and we're gonna set its height to 100
and then we're going to close that div.
So this time we made a container using Bootstrap classes and inside of the container we're gonna make
another another div and this is going to be of type D flex which means we can use flex box to style
its positioning.
We're gonna give it the height of 100 again and we're going to centre its text and in line its items
to the center as well.
OK great.
So this will contain a div that will flex anything inside of it.
Which means we'll put everything inside of it into a flex container.
And this is better for responsively and positioning and allows for a fast positioning because bootstrap
will position all the elements for you.
Okay.
Excellent.
Now inside of here we're gonna make another div and we're going to set it's with two hundred and it's
text to white.
And let's go ahead and immediately close that div here so don't forget and inside of this one which
has a width of one hundred and we said this text to white although we did set all of our paragraph text
to white as well so we don't actually need this we can move it and add it if it's required but text
White the bootstrap class that sets your text to white.
But we did add that the ACA sets already.
Okay great.
So now we have the with the 100.
Let's go ahead and in here we're going to add in each one class.
So typically you want to have only one each one per page for ACL and you can set it size by using display
3.
And then in here we're going to write something like unlimited online courses.
So we're going to suppose that the product reporting is a subscription to online courses.
So we're going to use this as a site title which is unlimited online courses.
This is the actual title that will be shown on a page whereas the title up here is the title that would
be shown just right here
so let's see let's change us to online courses as well.
And you can of course replace this was with any product that you want to promote.
Okay.
We have a limited online courses let's also add a paragraph of a description of the product as well
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
and experiment by adding more styling if you would like to as well.
OK.
So this will be a paragraph text containing something like a watch anywhere advance your career.
So we're promoting some courses to advance your career.
OK excellent.
Now let's also added button.
So we've added a button in previous projects.
Let's go ahead and add one.
We're going to make it by opening a paragraph tag and closing a paragraph tag and inside of the paragraph
tag not open an anchor tag.
And we're going to link it to the checkout page.
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
can use this I.D. and link them down there whenever they click on this button.
We're going to call it Heidi hashtag check out and then we're going to give it a class button which
is a bootstrap class that will automatically make this element into a button and style it and we can
sell it to button primary which will make it blue.
We can also add a margin on the top and bottom of a five and a patting on the left and right off for
any padding on the top and bottom of two as well.
And of course you have to play around with these numbers to see what works best for you OK great.
So now we have to close our anchor tag and in here we have to write the text that will be displayed
in the button.
So this case it'll be in roll now.
This could also be you learn more or sign up or purchase by now et cetera.
OK.
Great.
OK.
So now we have a container with each one a paragraph and a button.
Let's go ahead and test how this looks in the output.
So if we go to the output and hide it.
You can now see that our background is black and we have an image here of our background image and we're
going to zoom out and we also have our header online courses and our text watch anywhere as well as
a button.
Now this the styling is looking a bit messy right now you can see we have our image at the top here
and then our text way down below.
So the page is quite large.
However we do have this texture that's a bit great but we'll change that to white and we have a paragraph
here and we have our bootstrap button.
OK so we are going to go ahead and add more styling to this to ensure that the image is on the background.
So right just behind the text and the image doesn't increase its size to be this huge.
And we're also going to change the text of the each one.
So we're going to go ahead and add more styling to that to solve all these styling issues in our CFS.
So let's go ahead and close the EU melon open.
This is us instead.
And down here.
Well we're going to style our header tag our header element up here.
So first let's go ahead and add styling to the header itself and then we can style its internal elements.
So first you can set its position to relative so as its background color to black.
So the position relative means that it will be relative to the other elements on the screen and will
be absolute.
So it won't be fixed.
This means it will move with other elements and be more responsive.
Typically you always want to declare some kind of position for your elements so that you can set other
properties as well.
That early two position will also change the background color to black even though we already have it
up here we can set it again that's fine.
We can also set the height to be 100 percent make trees by height.
Right.
And you can also set something that is known as minimum height so you rate the property at midnight
and Monheit will ensure that the header has a specific height even if the screen size is really small.
So you can set this to five RAM which means twenty five times larger than the font size.
OK.
You can also set the with 200 percent and the overflow to hidden overflow hidden means that if there
is some extra part of the image that would overflow we will hide it instead of showing it.
OK.
Let's add some more styling here.
So we're also going to style the image inside of the header.
So our background image.
Let's go ahead and make it into a background by setting its position to absolute which is the opposite
of relative.
This means that this position will not be relative to any other positions.
It will have its own and that will allow it to go to the background because it's absolute.
We actually had a set its exact location so we're going to set it to be 50 percent from the top and
50 percent from the left also said it's men with two hundred percent and it's men height to 100 percent
and we can also said it's with two auto and it's height to auto which means it will automatically take
the width and height of its container.
You can also set the easy index of 1 2 2 0 and that will put it into the background because the index
refers to the depth.
So by default all elements have a z index of 1 which means they're flat on a page.
And by making it the index 0 or pushing it back behind other elements if we made it to we would push
it up in front of the other elements.
Okay we can also add in some code for other browsers.
So depending on the browser you are using elements can look different.
So we're going to add for safari or either transform of translate X minus 50 percent those translate
y of minus 50 percent.
This will help account for different browsers and we can just copy this and paste it in three more times
and will account for other browsers in the extra time.
So for this one will add mods for Mozilla and also add web kids and we'll also add just a regular transform.
This is pretty typically added to background images to account for these other browsers.
OK.
Excellent.
Now we styled the header and the header image.
Let's go ahead and see how this looks now in the output so I'm going to click on the output to open
that and as you can see now we have our image and it's now taking up the whole screen but the overflow
is being hidden.
As you can see it's not changing the page size its height and width is 100 percent of the screen which
means I can't scrolled up or down.
Which means that the whole image was sort of shrunk into fit the size of the pages which is what we
want.
However you'll notice that the text disappeared because now the image is taking up 100 percent of the
page.
So we're gonna go ahead and fix this in the next lecture by showing the text and the button that we
had previously used typically see this and see if I see your fixed one thing.
This will create another problem.
That's very typical and might go ahead and solve this in the next lecture.
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.
So add a bit of overlay to the image.
That way we can actually read the text clearly on top.
OK so thank you all for watching.
You now have a background image on your page.
You've made it quite far and we'll see you in the next lecture.