Homepage Template Bootstrap | Homepage Design

byCodingFlicks -November 09, 2020

0

Hi Friends, I am sharing another bootstrap-based snippet on creating a homepage template using bootstrap. I am using animate CSS to make an excellent text animation while bootstrap carousel works. I used a static background image for the carousel so that only the text animate. I have shared some bootstrap snippet in the blog before you might be interested. I have used bootstrap and animate CSS CDN for the project.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Homepage Template Bootstrap</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<header>
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><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="#"><img alt="" src="logo.png"></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>
	</header>
	<div class="banner-area">
		<div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-example-generic">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
				<li data-slide-to="1" data-target="#carousel-example-generic"></li>
				<li data-slide-to="2" data-target="#carousel-example-generic"></li>
			</ol><!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<div class="carousel-caption">
						<div class="container">
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<div class="banner-text">
										<h2 class="animated fadeInUp" style="animation-delay: 2s">Creative Agency</h2>
										<p>Lorem ipsum dolor sit amet.</p><a href="#">Learn More</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="carousel-caption">
						<div class="container">
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<div class="banner-text">
										<h2 class="animated fadeInUp" style="animation-delay: 2s">Graphics design</h2>
										<p>Lorem ipsum dolor sit amet.</p><a href="#">Learn More</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="carousel-caption">
						<div class="container">
							<div class="row">
								<div class="col-md-12 col-sm-12">
									<div class="banner-text">
										<h2 class="animated fadeInUp" style="animation-delay: 2s">Digital Marketing</h2>
										<p>Lorem ipsum dolor sit amet.</p><a href="#">Learn More</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- Controls -->
			 <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">
	</script>
</body>
</html>

CSS

.navbar-brand {
	font-family: poppins;
	color: #262626 !important;
	font-size: 25px;
}
.navbar-default .navbar-nav>li>a {
	color: #262626;
	text-transform: uppercase;
	font-weight: bold;
}
a:hover, a:focus {
	color: #fff !important;
}
.banner-area {
	background: #fff;
}
.carousel-inner {
	height: 100vh;
}
.carousel-caption {
	position: static;
}
.carousel-control.left {
	background-image: none;
}
.carousel-control.right {
	background-image: none;
}
.navbar.navbar-default {
	background: transparent;
	border-color: transparent;
}
.carousel-inner {
	background: url(https://images.pexels.com/photos/1731427/pexels-photo-1731427.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
.banner-text {
	padding: 20% 0;
}
.banner-text h2 {
	text-transform: uppercase;
	font-size: 47px;
	color: #262626;
	text-shadow: none;
	font-weight: bold;
}
.banner-text p {
	font-size: 18px;
	color: #262626;
	text-shadow: none;
}
.banner-text a {
	background: dodgerblue;
	text-decoration: none;
	color: #fff;
	display: inline-block;
	padding: 15px 30px;
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 50px;
}
.carousel-indicators .active {
	background-color: #262626;
}
@media (max-width: 600px) {
	.navbar-brand {
		color: #000;
		padding: 5px;
	}
	.navbar-default .navbar-nav>li>a {
		color: #fff;
	}
	.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
		color: #333;
		background-color: dodgerblue;
	}
	.navbar-header {
		background: #000;
	}
	.nav.navbar-nav.navbar-right {
		background: #000;
		margin: 0 -15px;
	}
	.banner-text {
		padding: 50% 0;
	}
	.banner-text h2 {
		font-size: 23px;
	}
}

Thank you for visiting the blog, and keep coming for more.

Please do not enter any spam link in the comment box.