Hello friends, today, I will be sharing a responsive homepage design snippet made using HTML, CSS, and Bootstrap framework. I have used the bootstrap version of 3.3.7 to make this program. The homepage is the entry point of any webpage, and it helps the visitor to discover the pages inside the website. If we can make the homepage eye-catching, then there is a chance that the visitor will explore more of the website. There is a saying that the first impression is the best impression. Bearing that in mind, we have to be extra careful while we design our website homepage.
For designing the project, you have to download the bootstrap CSS and js file from their website and add them to your project. Besides, you have to add animate CSS so that you add the text animation we are making here for the bootstrap slider. You need to add the latest jquery file for the bootstrap slider to work. For the sake of this snippet, I am using CDN versions of each file, but you can add them by downloading it.
First, I will start with HTML markup. I have taken a header tag then implemented the basic bootstrap premade navbar snippet from their website. From there, I have discarded the navbar from the left and the form because I don't need those for this project. I have added a 'navbar-fixed-top' and a 'navbar-inverse' bootstrap class to nav. I have added five nav-items, namely home, about, portfolio, services, and contact, inside the 'navbar-right' unordered list. For the 'navbar-brand,' I have taken a random text named 'Franco.' You can use any name of your choice or a png logo image here. Then I went back to bootstrap's website copy and paste the bootstrap carousel code and paste that underneath the bootstrap nav element. Inside each 'item' div element, I have created a custom div named 'banner' and provided a background-image using inline CSS. for the 'carousel-caption,' i have used an h2,h3, and a p tag where I put the call to action button. For better understanding, I will highly suggest you follow the below tutorial from start to finish and then continue with the rest of the parts here.
HTML
CSS
can you put them together cause i dont know what part i should ad the CSS in ;c
ReplyDeletehello
ReplyDeletePost a Comment
Please Do not Enter any spam link in the comment box