From this part we are going to start coding our template.
So stay tuned.
Hello and welcome to another new episode of learning simplified.
From this part of this series of tutorial we are going to start coding
our template.
Make sure that you are connected to this page, you are connected
to this channel.
So we are going to build up this whole template but first of all as we
can see this is the header part where we have a certain header area and then we have this
banner element with a background image and there are some texts on to it.
So all we are going to do we are going to start coding
our template and we are going to start from the header part, from the head part of this
particular template.
So let's proceed.
Now in the final stage that we will be achieving over here is this one.
Now as we can see we have created the index.html in our previous
tutorial as we have observed and we have created another custom_stylesheet.CSS and
we had linked this index.html with bootstrap.min.css and custom_stylesheet.CSS.
As we have connected this page with this bootstrap.min.css, that is why before this
closing body tag we have connected this page to bootstrap.min.js in order that every feature
of bootstrap is accessible.
So these are the requirements we had done and this is the
final output so far that we have observed up
to our previous tutorial.
Now in this stage we are creating something which is equivalent
to this one.
This is this means we are going to create this header part over here.
Now in the first case we are going to create the containing element.
Now you can use here 'container' class if you want a 1200px container
every of your content to be confined within a 1200px container and if you wish
that your contents become full page, then all
you need to do you need to consider this one.
'Container- fluid'.
Now this is the thing in the first case; we are going to make sure
that this div is closed; another thing, whenever you are creating something like this
always make sure that the divs are closed.
That means whenever you are opening a div your approach should be something like this;
you are opening this Div, that means you have to close this div first.
Anything that comes inside you should go on further, like
this.
So we are consuming up all those 12 grids over here and if you do wish that your
content to be fixed within a mobile device properly then all you need to do you need
to make sure that col-sm-12 is on.
And inside this col-sm-12, the first thing that we are
going to see is 'For related information call us at' this one.
So this is the thing that we need to ensure here.
So that is why we are creating H3 tag.
So up to this part we have created this thing; so this is the result, this will be the
output so far that we have created and we can see that the bootstrap features are been
reflected over here.
If we press F12 and we click on it and we can see that these are the
properties which is been observed here.
You can see that this font family font size, font-weight, or line- height, margin-top,
margin-bottom every of this short of things those are being reflected into your web page
and this is due to the linkage with the bootstrap.min.css.
That means so far is styling Properties are being attributed by the
Bootstrap framework.
In this particular case we can see that this is practically the
output of the header part.
So naturally we need to modify our framework such that it
executes this kind of properties as we can see here.
So let's get back to our project and here we are using another class along
with col-sm-12 and it is head banner.
So we are getting back to our custom style sheet and
here we are providing all these properties.
Now we will be needing to provide a background image.
Which will be a linear gradient.
So why linear gradient?
We can see that this is practically executing a linear gradient
nature over here.
So we need to pick up these two or three or more or whatever it is,
these color properties from here.
So that is why we are now getting back to our GIMP
software where we have already opened these things and here first of all let's select
this topmost color property; there it goes.
If we now click we can see that this is the color property.
So copy and here we need to paste it.
This is the first color stop, and in order to achieve the second one, we need
to select the last color stop here, we need to see what kind of color code is been imposed
over here; we have picked it up and now click here, this is the color code.
We need to copy it and we need to paste it here.
Now we will be pasting it 4 more Times...
Providing on with this hack codes here.
Now pressing Control + s and getting back to our
project and reloading and we can see that this is the thing which is been created so
far and as we can see that here are two gaps at
the two ends, so this is the thing that we need to rectify.
If we use this class name along with this col-sm-12 property then there
will be an inbuilt padding of 15px from both the ends - from the left and from the right.
But instead of using it over here if we just cut it and then paste it here, and now if
we reload we can see that all these paddings are gone.
Now instead of using this 'container-fluid' if we use here 'container'
only, reload and now you can see that this is a 1200px container that has been created
Over here.
So instead of using 'container-fluid' if we use 'conatiner' then
the contents will be confined within a 1200px container element and instead of using
'container' if we now use here 'container-fluid' then your contents will
be coming full page.
Then your contents will be appearing full page.
So this is the first thing that we have created up to this one.
Now we have to make this alignment to the extreme right position
as we can see here and we have to change this particular font family and then we need
to change this color element; so that is why we are getting back to our index.html and
from here, we need to modify this head-banner h3.
Let's get back to customstylesheet.CSS and here...
Another thing.
We need to change this font family into this one, so, what was the font
family?
The font family here in this case used was 'josefin slab'.
So that is why we need to get back to Google and here we will
be searching for google fonts.
And after opening this Google fonts, we will be searching
for 'josefine slab'.
So all we need to do first, we need to copy this one, we need
to get back to index.html and below this custom style sheet, we are going to paste
this one.
Inside this custom style sheet.css, all we are going to do now we are going to
copy this thing and we are going to paste it
here.
We have specified the font family and now we have to specify the font size; just as
we can see that the font size is now changed and the font family is getting changed here.
We need to change the color and the text alignment and the line-height.
So all those things are now changed.
So let's get back to our project and reload and we can see that
already this thing, these attributes are changed; we can see that this is the for
related information; press control + shift + m and this is the exact thing that is going
to be observed at this particular case under 320 by 480px, this is the exact thing that
we are going to observe at the device width of 320px.
Now if we get back to our template then we can see that the number is written in a
different font color.
So this is what in the next case we need to rectify.
Get back here and here...
Come back and reload and we can see that the mobile number is now changed.
It is not getting a different color then the previous one.
So this is the part that we have created...
Không có nhận xét nào:
Đăng nhận xét