Brand logo | hero image | favicon Using Bootstrap | Responsive Web Design tut_002

January 5, 2020 posted by


Welcome beck guys , in this tutorial we will
add a hero image like this a brand logo that will appears in the navigation bar and a favicon
that will appears in the browser bar lets start.. Ok , let’s add a hero image or
our main image for this we have to download an image Make another folder name img and download
an image in this folder Add another div below nav class container-fluid
Inside this another div class row Inside this another div class like bg-image
Inside this in img tag source write the path of the image close tags and see preview Define class bg-image style in css .bg-image write the position relative img tag of bg-image write display as block width 100% background size cover because we are making this the cover of our background and margin is 0 and auto See the preview
Great but I don’t want this space between image and navigation bar
Let’s fix it We can give our hero image another class name
hero-image And define this class property in css as margin
top is negative 20px This is because navbar default has a bottom
20px margin I want to add an brand logo on top of my navigation
bar like this You have seen social links icon on many webs
We are going to use the same method Awesome fonts
How to use that Download fonts from this webpage
Extract it and put the awesome-fonts folder in our website folder
We are going to use this awesome-fonts.min.css file Link it to our html Relation stylesheet, reference path of the
file , type text/css close tag Add another item in navigation bar but this
time use logo from the awesome fonts Use I tag and class as fa fa-apple for apple’s logo close tag You can use whatever you like fa-facebook fa-twitter like this You can also define size of logo in class
like fa-lg or fa-2x How about the favicon that appears in the
browser bar Download favicon png image inside img folder
It should be transparent and size should be small like 16px by 16px
Now link this file in to our html Relation is icon reference is path of the
file type is image / png close tag Save it
Let’s see wow All thing are working perfectly
This is a responsive user friendly web’s first step
And congratulation you have completed it. In the next tutorials we will add a slideshow
instead of hero image like this .. And content below it and more actions …
If you find it difficult or fast or I miss any things that should be explain more
Let me know in comment section Feel free to give suggestion and ask any quires
. Thanks foe watching now it’s your turn to
do it ..

1 Comment

One Reply to “Brand logo | hero image | favicon Using Bootstrap | Responsive Web Design tut_002”

  1. Yael Brown says:

    Turn your mic up.

Leave a Comment

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