Code Template from Scratch:Header Banner with HTML and CSS Part 2


Now let’s get back to the bigger part, now
we have to create this banner element here which is consisting of a left box which has
this image and a right box which has this particular text one. Let’s understand this. This is a particular banner element; this
is mother-wrapper; this is the left box which
will be consisting of this particular image; this is the right box that will be consisting
of all these things, this text. We are
first going to create the mother-wrapper and then we are going to create two parallel,
two side by side boxes, those will be containing this image and this particular text. So
that is why we are getting back to our index.html and we are creating another separate
‘container-fluid’ element; and inside this ‘container-fluid’ we are going to create a
col-sm-5 first and then we are going to create a col-sm-7. We have consumed up to 5
columns and in the second case we have consumed up to this 7 columns. As we have told
you that in case of a bootstrap element, it is practically divided into 12 grids; so
here if we divide these 12 grids into two particular boxes, the first one consisting
of 5 grids and the second one consisting of 7
grids, so there won’t be any problem but if we
use here instead of col-sm-7, if we use here col-sm-8, then that will be a massacre
cause 5 + 8 is 13 and 13 is greater than 12. So that is why we cannot use here col-sm-8,
but instead we can use here col-sm-7 and that will be equivalent to 12 total grids of a
bootstrap framework. Now in this particular case into this col-sm-5,
all we are going to do we are going to house this particular image
and in case of this col-sm-7 we are going to house this particular text over here. First of all let’s create this H3 tag and
here inside, this is the first case that we have created; in the second case we need to
create an H4 tag; reload and we can see that this thing is right into its position. So we have created first of all this
container-fluid, and then this col-sm-5 and this col-sm-7 and inside we are creating all
these things. Now the rest of the thing is we have to create
some particular class name in order to create all these effects, in order
to make it appear as if this particular case. So let’s get back to our project and here
we are creating some.. And inside
here… Now the rest of the things are customizing
all these things. This Banner element class
name, this banner-element-left-panel, we need to customize all these things; so first of
all we are going to customize this banner element; so we are getting back here and we
are copying this class name and we are pasting
it here. Reload and we can see that this is
the banner element. We have made up to this one and now let’s
get back to our project and here in this index.html. Now let’s concentrate into this particular
left box image. This
image will be certainly a background image because we will be making some filter effects
over here and some blending modes; we are imposing some blending modes here; so that
is why we will be creating it as a background
image, not as an image source. So let’s get
back to banner element here and in this banner-element-left-panel we are copying this
class name from here and we are pasting it..

1 thought on “Code Template from Scratch:Header Banner with HTML and CSS Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *