Homepage design with Bootstrap and Animate css

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.

I suppose you have watched the entire video and have some idea what I am talking about. If the answer is yes, then let's move to the CSS part of this project.

You may also like:

In the CSS part, I have taken Poppins as the primary font and added that to the body tag. Then I have given the 'item' div a height of 100vh. I made the border color and background color transparent for the 'navbar-inverse' class. After that, I adjust the 'navbar-brand' by giving it a color, font-size, padding, and font-weight. I then gave 'navbar-right' a margin so that the nav-items align properly. Then I styled the nav-items and banner images that are used to make the bootstrap slider. Initially, the default bootstrap slider caption will be at the bottom of the slider. I gave the 'carousel-caption' a padding-bottom value so that the caption elements come in the middle of the homepage. later, I styled the rest of the elements of the 'carousel-caption.'

For making the snippet responsive, I have changed some values of some elements in CSS media-queries so that the snippet fits nicely in the smaller devices. After I have designed the homepage, I went to animate the CSS website and choose some animation from there, and added those to the h2,h3, and p tag of the 'carousel-caption.' for the animation to happen one after another, I have added a different animation-delay value to each item of the 'carousel-caption' class.

Responsive Homepage Design with bootstrap and animate CSS (Source Code):

to create this snippet, you have to create one HTML and one CSS file; after adding the necessary files that are required for this project, copy the code below and paste them to the respective file.

HTML

<!DOCTYPE html>
<!--Code by Divinector (www.divinectorweb.com)-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Homepage design with Bootstrap and Animate css</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">    

</head>
<body>

    <header>
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Franco</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">portfolio</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>


        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div class="banner" style="background-image: url(https://i.postimg.cc/pTGKnyy0/1.jpg);"></div>
                    <div class="carousel-caption">
                        <h2 class="animated bounceInRight" style="animation-delay: 1s">We Are <span>Creative</span></h2>
                        <h3 class="animated bounceInLeft" style="animation-delay: 2s">Web Design and Development Agency</h3>
                        <p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">Contact us</a></p>
                    </div>
                </div>
                <div class="item">
                    <div class="banner" style="background-image: url(https://i.postimg.cc/k4Bvsxrr/2.jpg);"></div>
                    <div class="carousel-caption">
                        <h2 class="animated slideInDown" style="animation-delay: 1s">We Are <span>Franco</span></h2>
                        <h3 class="animated fadeInUp" style="animation-delay: 2s">Web Design and Development Agency</h3>
                        <p class="animated zoomIn" style="animation-delay: 3s"><a href="#">Contact us</a></p>
                    </div>
                </div>
                <div class="item">
                    <div class="banner" style="background-image: url(https://i.postimg.cc/tgg3Rh41/3.jpg);"></div>
                    <div class="carousel-caption">
                        <h2 class="animated zoomIn" style="animation-delay: 1s">We Are <span>Diligent</span></h2>
                        <h3 class="animated fadeInLeft" style="animation-delay: 2s">Web Design and Development Agency</h3>
                        <p class="animated zoomIn" style="animation-delay: 3s"><a href="#">Contact us</a></p>
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    </header>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

CSS

body {
	font-family: 'Poppins', sans-serif;
}
header .carousel-inner .item {
	height: 100vh;
}
.navbar-inverse {
	background-color: transparent;
	border-color: transparent;
}
.navbar-inverse .navbar-brand {
	color: #fff;
	font-size: 40px;
	padding: 40px 15px;
	font-weight: 900;
}
.nav.navbar-nav.navbar-right {
	margin: 25px 0;
}
.navbar-inverse .navbar-nav>li>a {
	color: #fff;
	text-transform: uppercase;
}
.banner {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
}
.carousel-caption {
	padding-bottom: 250px;
	font-family: poppins;
}
.carousel-caption h2 {
	font-size: 70px;
	text-transform: uppercase;
	font-weight: bold;
}
.carousel-caption h2 span {
	color: #EDBB00;
}
.carousel-caption a {
	background: #EDBB00;
	padding: 15px 35px;
	display: inline-block;
	margin-top: 15px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 25px;
}
.carousel-control.right {
	background-image: none;
}
.carousel-control.left {
	background-image: none;
}
.carousel-indicators .active {
	background-color: #EDBB00;
	border-color: #EDBB00;
}
/*responsive css*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.carousel-caption {
		padding-bottom: 350px;
	}
	.carousel-caption h2 {
		font-size: 50px;
	}
}
@media only screen and (max-width: 767px) {
	.navbar-inverse .navbar-brand {
		font-size: 30px;
		padding: 20px 15px;
	}
	.navbar-collapse {
		background: rgba(0, 0, 0, 0.5);
	}
	.carousel-caption {
		padding-bottom: 120px;
	}
	.carousel-caption h2 {
		font-size: 25px;
	}
	.carousel-caption h3 {
		font-size: 18px;
	}
	.carousel-caption a {
		padding: 10px 25px;
	}
}

I hope you liked this snippet. For more, please follow my social media profiles and subscribe to the divinector youtube channel, and stay connected. Thanks for stopping by, and keep visiting.

2 Comments

Post a Comment

About Us

Contact Form

Homepage design with Bootstrap and Animate css

You might like

2 Comments

Post a Comment

Contact Form