Startup Landing Page using Bootstrap/HTML/CSS
Check the updated DevOps Course.
Course Registration link:
Course Link:
YouTube link:
Here we are going to create a Landing Page of our StartUp company(DevOps Learning)using Bootstrap/HTML/CSS.
First let start with Regular Boiler Plate Syntax
- Add Title to the Page (<title>DevOps Learning</title>)
- Add BootStrap CDN link (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
- Add jQuery CDN link (https://code.jquery.com/jquery-3.1.1.js)
- Add JavaScript CDN link(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js)
- We need jQuery/JavaScript for navbar
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>Devops Learning</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”><link rel="stylesheet" type="text/css" href="index.css"> </head>
<body>
<script
src=”https://code.jquery.com/jquery-3.1.1.js"
integrity=”sha256–16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=”
crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>
</body>
</html>
Let’s Begin with the text in the middle
- Let’s put everything inside container,so text will not be at the edge (<div class=”container”>)
- Here we are using grid we need to use class row(<div class=”row”>)
- Use this class so that when we squeeze our page/image on browse or view it in mobile device it will not break(<div class=”col-lg-12">)
- Add a hr tag so that it will create a line(<hr>)
- Add a button class(btn btn-default btn-lg)
<div class=”container”>
<div class=”row”>
<div class=”col-lg-12">
<div id=”test”>
<h1>DevOps Learning</h1>
<h3>Automating the Process of Software Delivery</h3>
<hr>
<button class=”btn btn-default btn-lg”>Get Started!</button>
</div>
</div>
</div>
</div>But this is not what we are looking for, we need these contents to be centered as well as we need to add padding, to do that let add div with id test(<div id=”test”>) and add stylesheet to our project. Dont forget to link html to stylesheet (<link rel=”stylesheet” type=”text/css” href=”index.css”>)
#test {
text-align:center;
padding-top: 25%;
}After that let’s add background image, so our css will look like this
body{
background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Jenkins_logo_with_title.svg);
background-size: cover;
background-position: center;
}
#test {
text-align:center;
padding-top: 25%;
}Now lets add the navbar(start with the default one and choose parameters depend upon your requirement http://getbootstrap.com/components/#navbar)
- Put everything inside container( <div class=”container”>)
- Add Brand to your site (<a class=”navbar-brand” href=”#”>Devops</a>)
- Add Home,About,Contact,SignUp and Login Link
<nav class=”navbar navbar-default”>
<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=”#”>Devops</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”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”#”>SignUp</a></li>
<li><a href=”#”>Login</a></li>
</ul>
</div><! — /.navbar-collapse →
</div><! — /.container-fluid →
</nav>
Now to fix the Image and Increase heading size
html{
height: 100%;
}
h1{
font-weight: 700;
font-size: 5em;
}Now only some cosmetic part left,if you want to add icon next to SignUp and Login icon
<link rel=”stylesheet” href=”https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity=”sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU” crossorigin=”anonymous”> <body><li><a href=”#”>SignUp<i class=”fa fa-user”></i></a></li>
<li><a href=”#”>Login<i class=”fa fa-user”></i></a></li>
Finally our site look like this :-)
SourceCode Link https://github.com/lakhera2016/startuplandingproject
