In this project we are building a single page website template using Bootstrap 4 CSS framework. This video tutorial is intended for beginners who has basic knowledge of HTML and CSS and want to build a template using Bootstrap 4. This HTML template design tutorial is 7 video series. You can find full code below. Please make sure that you download your own assets (images) for this project. I recommend Unsplash for free images.
Demo
Part 1
Part 2
Part 3
Part 4
Part 5
Part 6
Part 7 (Final)
HTML code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<link rel="stylesheet" href="css/style.css">
<title>Green Agro</title>
</head>
<body id="home">
<!-- Navbar start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top" id="main-navbar">
<div class="container">
<a class="navbar-brand" href="#">Green Agro</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#vision">Mission & Vision</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#product">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar end -->
<!-- Slider start -->
<section class="home-slider">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/slider-1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Grazing</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sunt sapiente eveniet saepe, architecto volupta.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slider-2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Cultivation</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sunt sapiente eveniet saepe, architecto voluptas
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/slider-3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Maize plantation</h5>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sunt sapiente eveniet saepe, architecto voluptas
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Slider end -->
<!-- about section -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-10 m-auto">
<h2 class="text-center">About
<span class="text-muted">Green Agro</span>
</h2>
<div class="separator"></div>
Green Agro Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae itaque fuga quaerat cum dolorem pariatur voluptatum, alias eum inventore molestias animi, quibusdam magni esse porro odio? Asperiores illum facilis natus?
</div>
</div>
</div>
</section>
<!-- about section -->
<!-- mission and vision section -->
<section class="vision" id="vision">
<div class="vision-bg">
<div class="container">
<div class="row">
<div class="col-10 m-auto">
<h2 class="text-center">Vision and Mission</h2>
<div class="separator"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, molestiae a nostrum non doloribus animi, accusantium dicta quae dolor enim quidem aperiam placeat impedit itaque unde aspernatur fuga recusandae voluptas!
</div>
</div>
</div>
</div>
</section>
<!-- mission and vision section -->
<!-- product and services -->
<section class="product" id="product">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Products and Services</h2>
<div class="separator"></div>
<div class="row">
<div class="col-sm">
<div class="card text-white bg-success mb-2">
<div class="card-body">
<div class="card-title">Quality Seeding</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi aliquam aut possimus maxime necessitatibus!
</div>
</div>
</div>
<div class="col-sm">
<div class="card text-white bg-success mb-2">
<div class="card-body">
<div class="card-title">Farm setup</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi aliquam aut possimus maxime necessitatibus tempore non asperiores.
</div>
</div>
</div>
<div class="col-sm">
<div class="card text-white bg-success mb-2">
<div class="card-body">
<div class="card-title">Training</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi aliquam aut possimus maxime necessitatibus! non asperiores.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- product and services -->
<!-- gallery section -->
<section class="gallery" id="gallery">
<div class="container">
<h2 class="text-center">Photo Gallery</h2>
<div class="separator"></div>
<div class="row" id="image-gallery">
<div class="col-md-4">
<a href="img/slider-1.jpg">
<img src="img/slider-1.jpg" alt="seeds" class="img-fluid">
</a>
<small>Lorem ipsum dolor sit amet consectetur.</small>
</div>
<div class="col-md-4">
<a href="img/slider-2.jpg">
<img src="img/slider-2.jpg" alt="seeds" class="img-fluid">
</a>
<small>Lorem ipsum dolor sit amet consectetur.</small>
</div>
<div class="col-md-4">
<a href="img/slider-3.jpg">
<img src="img/slider-3.jpg" alt="seeds" class="img-fluid">
</a>
<small>Lorem ipsum dolor sit amet consectetur.</small>
</div>
<div class="col-md-4">
<a href="img/slider-3.jpg">
<img src="img/slider-3.jpg" alt="seeds" class="img-fluid">
</a>
<small>Lorem ipsum dolor sit amet consectetur.</small>
</div>
<div class="col-md-4">
<a href="img/slider-1.jpg">
<img src="img/slider-1.jpg" alt="seeds" class="img-fluid">
</a>
<small>Lorem ipsum dolor sit amet consectetur.</small>
</div>
<div class="col-md-4">
<a href="img/slider-2.jpg">
<img src="img/slider-2.jpg" alt="seeds" class="img-fluid">
</a>
<small>Lorem ipsum dolor sit amet consectetur.</small>
</div>
</div>
</div>
</section>
<!-- gallery section -->
<!-- contact section -->
<section class="contact" id="contact">
<div class="container">
<h2 class="text-center">Contact us</h2>
<div class="separator"></div>
<div class="row">
<div class="col-md-4">
<address>
<strong>Green Agro Company LLC.</strong>
555 Fake Address
Fake State (FS)
Fake Country (FC)
<abbr title="Phone">P: </abbr> 555-666-1234
</address>
<address>
<strong>Green Agro Company LLC</strong>
<a href="mailto:#">greenagro@fakeemail.com</a>
</address>
</div>
<div class="col-md-8">
<small>Please fill in the form below to contact us ...</small>
<form action="" method="">
<div class="row">
<div class="col-md">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Your Name">
</div>
</div>
<div class="col-md">
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Your Email">
</div>
</div>
</div>
<div class="row">
<div class="col-md">
<div class="from-group">
<textarea name="message" rows="3" class="form-control" placeholder="Your message"></textarea>
</div>
<button class="btn btn-success btn-block mt-3">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- contact section -->
<footer>
Copyright © Green Agro
</footer>
<a href="#" class="btn btn-success btn-lg back-to-top" id="back-to-top" role="button" title="Back to top" data-toggle="tooltip" data-placement="left">
<i class="fas fa-arrow-circle-up"></i>
</a>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
CSS code
Goal of this tutorial was to use bootstrap as much as possible and write limited amount of custom CSS code. So, I have tried to use minimal custom CSS. This template also uses Google font Raleway and Lato, make sure that its working properly.
body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;
}
.navbar-brand {
text-transform: uppercase;
text-shadow: 1px 1px 1px white;
}
.home-slider {
height: 500px;
}
.carousel {
max-height: 500px;
}
.carousel-item img {
height: 500px;
}
.carousel-caption {
background: rgba(0, 0, 0, 0.3);
color: white;
border-radius: 10px;
border: 1px solid black;
text-shadow: 1px 1px 1px #f1f1f1;
padding: 10px;
}
.separator {
border-top: 1px dotted #ff6600;
margin-bottom: 15px;
}
.about {
padding: 70px 0;
text-align: justify;
}
.vision {
background-image: url('../img/slider-1.jpg');
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: cover;
background-attachment: fixed;
}
.vision-bg {
text-align: justify;
padding: 70px 0;
background: rgba(0, 50, 0, 0.6);
color: white;
}
.product {
text-align: center;
padding: 70px 0;
}
.gallery {
text-align: center;
padding: 70px 0;
background: whitesmoke;
}
.contact {
padding: 70px 0;
background: white;
}
footer {
background: #318031;
color: white;
padding: 7px 0;
font-size: 13px;
}
footer p {
margin-bottom: 0;
}
.back-to-top {
cursor: pointer;
position: fixed;
bottom: 35px;
right: 10px;
display: none;
}
JavaScript code
Make sure that you include jQuery for this project. Also make sure that you add full version of jQuery and not the slim version.
$(document).ready(function(){
// Add smooth scrolling to our hash links
$("#main-navbar a").on('click', function(e){
if(this.hash !== '') {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
// Back to top functionality
$(window).scroll(function(){
if($(this).scrollTop() > 50){
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// add animation when going to top of our page
$('#back-to-top').click(function(){
$('#back-to-top').tooltip('hide');
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
$("#back-to-top").tooltip("show");
}); // document ready
