We have created up to this part, so now we are going to place the image and the text
into its proper format and into its proper position.
First of all we have to insert image as a background to this banner-element-left-panel.
So we have created this image here.
If we get back into our project inside this image
folder we can see that this is the name of this folder and this is the name of the image.
If we just leave it up to this particular part and now if we get back into our project
and reload we can see that there is practically no difference in the output.
So what is the problem going on?
Actually there is no problem here; all we have to do we have
to provide a particular height, for say we are providing here 300px height.
Now if we get back and reload we can see that the image
is placed into its proper location but not into its proper position.
So if we get back here in into our template we can see that
this is the proper alignment of this particular image.
So that is why we need to get back into our project and here we have
to rectify all this thing.
First of all we have to provide here no-repeat condition.
And then we need to provide the exact position
of the image, it could be in the central position or it could be in the bottom position,
so it is required accordingly, but first of all we need to rectify the height.
This is not the recommended unit.
Press control + s, get back to your project, reload
and if we press Control + shift + m, we can see that this is the exact result.
This is the result that we can see over here; but
this may not be true in every cases, actually there is no need to provide a particular
height in pixel into this matter; so that is why we are going to remove this height
300px and we are now going to use 60vh.
So what is this unit vh?
VH here is the short term of viewport height.
That means we are going to consume up to 60% of this viewport
height.
So if we now get back into our project and reload, now we can see that this is
practically the exact viewport at 60% height.
Now instead of 60vh, if we use here 100vh, and if we reload we can see that this is a
100% of your total viewport height.
That means we have consumed here up to 100%.
But this in turn going to make your image appear in to
the bottom line instead of the topper part that we have intended here; this is the part,
this should be reckoning into the top position; not into the bottom position.
So that is what we need to rectify and 60vh or 70vh,
if we provide here 70vh and if we reload, we
can see that this is the ultimate result.
Now instead of center if we provide here bottom, what should be the outcome?
So now we can see that this is going to be better and
better;it is now reaching to the top of the surface and the bottom area is here and if
we press Control + shift + m, then we can see
the these things are in order.
But is has some letter concerns that will be discussed in
the latter half of this tutorial, first of all we need to provide some additional
blending effect into our image.
From our template view that is has practically been
imposed to it a kind of background blending mode.
So in order to create that first of all we need to add an additional color information.
So that is why we placed a black background along with this image.
First of all we have created this; let's get back to
our project and reload and we can see that there is absolutely no change over here.
Now if we get back into our project and we are
placing here background-blend-mode.
Now if we place here this screen, Press control + s,
get back to our project and reload and now we
can see that there is a little bit of blending effect that has been taken place.
Now for say we want to apply a filter effect along with this blending effect.
So that's why we are getting back to our project and
we are providing a contrast of 110% and a brightness of 90%.
So if we now get back to our project and reload, we can see that the
filter effect is being imposed into our image and it exactly resembles with the template
that we have created over here.
So now the image is ready to go for the time being.
If we now press control + shift + m, we can say
that the image is still on but into this lower resolution,into this lower dimension
of this device-width, if we suppose that we do not wish to show any kind of image over
here,all it gets executed will be a Pitch Black color here, and the writing or the text
will be present as it should have been.
So that is why all we need to do we need to get
back to our project first, there it goes; and we need to create some media query.
Max-width, for say we are providing here 767px; and we are getting back and we are copying
this particular banner-element-left-panel; first of all copy it and paste it here; and
we do not wish to execute any kind of image.
So that is why we will be placing here background..
So this is what we will place; now let's get back to our project and reload.
If we press Control + shift + m, we can see -
no there is a little bit of deviation we do not wish to have any kind of height thing
over here so this is the thing that we need to rectify again, so we will be going to take
on this height; we need to place it into the exact position and instead of height 70vh,
we will be placing here auto; let's get back, reload and now we can see that the same
thing that we intended is now back into action, is now in place.
So if we now change this 320px into 767px, and if we now press enter we can see that
the same exact thing is going on so far; But if
we place here 768px, and if we press enter then we can see that the image is back into
its position.
Now if you wish to keep on this image; at this dimension over at this
resolution there is absolutely no problem.
We will now just increase this dimension to 1199px,
then up to this particular dimension we can see that there's still no kind of background
image is present there.
But despite of the fact we can see that the contents are
getting aligned side by side; they are not start one upon another as we had observed
in case of 320px, or in case of a 480px, or in
case of a 640px dimension.
Show contents here or vertically stacked up, but instead of
768px, the contents are getting aligned side by side.
So this is due to the fact as we have placed here col-sm-7.
So instead of col-sm-7 if we put here col-lg, and if we put
here again col-lg, then the exact same thing will be reflected into your browser.
As we can see that instead of getting side by side
they are now getting vertically aligned.
As col-lg will be aligning there contents vertically
stacked one over another.
Instead of col-lg-7 or col-lg-5, if we place here col-sm, and if we now get back into
our project under 768px, now we load and we can see the contents are aligned side by
side.
So this is the thing in case of an image element; now we have to rectify this text
element....
For more infomation >> Bích Phương - Mình Yêu Nhau Đi (Mons Remix) - Duration: 3:08. 
For more infomation >> Fragen stellen, die Kommentare bringen | Folge 33 Facebook-Marketing leicht gemacht - Duration: 24:05. 
For more infomation >> Samsung Electronics to split stock by 50:1 - Duration: 2:31. 
For more infomation >> SON DAKİKA | TRANSFER | Galatasaray'ın Inter'den Kiraladığı Japon Sol Bek Nagatomo İstanbul'da - Duration: 6:18. 
For more infomation >> 【决胜女王】影評 Molly's Game 【茉莉牌局】【莫莉游戏】 - Duration: 2:33. 
For more infomation >> 8İ GÖRÜYORSAN RENK KÖRÜ OLABİLİRSİN KÖRLÜK TESTİ - Duration: 5:45. 
For more infomation >> Cheap Trip Day 12 Part 1 - Duration: 6:14. 
Không có nhận xét nào:
Đăng nhận xét