Bootstrap Templates - Header - 4

Bootstrap Templates - Header - 4 was made to showcase web applications on your website. The template is fully responsive and was built using the Bootstrap 4 framework.

The design and PSD for this template was provided by Designmodo, I have simply written the HTML & CSS for their design. If you would like to download PSD you can do so here https://designmodo.com/startup/sources/

For a live preview of this template click here.

Template Requirements

• Bootstrap 4

Implementation

For this to work you must meet the requirements listed above.

To make it as easy as possible to incorporate my templates into your own website design I've created two snippet files which you can view at the bottom of this post. The first snippet has the HTML code and the second one has the CSS code. To add these to your website begin by copying the HTML code and pasting it into your websites html file. Finally copy the CSS code and paste it into your websites stylesheet. That's all, Now the block should be working.

HTML Code:

	<!-- header-4 -->
	<div class="header-4">
	<div class="container h-100 d-flex align-items-end text-center">
	<div class="row">
	<div class="col-12 col-lg-8 text-lg-left">
	<h1>Simple design &amp; prototyping</h1>
	<h2 class="my-4 mx-auto mx-lg-0">Startup Framework gives you complete freedom over your creative process — you don’t have to think about any technical aspects. </h2>
	</div>
	<div class="col-12 col-lg-4">
	<div class="float-lg-right">
	<button type="button" class="btn btn-primary mt-2 mb-4">Get Started</button>
	<p>It is absolutely free.</p>
	</div>
	</div>
	<div class="col-12 pt-5">
	<img src="https://i.imgur.com/pBlkvjR.png" class="img-fluid" alt="">
	</div>
	</div>
	</div>
	</div>

view raw Bootstrap-Templates-Header-4.html hosted with ❤ by GitHub

CSS Code:

	/* start of header 4 */
	.header-4 {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background: #334ee2;
	background-size: cover;
	background-position: center;
	overflow-x: hidden;
	padding: 100px 0;
	color: #ffffff;
	}
	.header-4 h1 {
	font-size: 2.75rem;
	font-weight: 300;
	}
	.header-4 h2 {
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.4;
	}
	.header-4 p {
	font-size: 1rem;
	font-weight: 300;
	}
	.header-4 .btn {
	background: #ffffff;
	color: #334ee2;
	padding: 20px 60px;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	font-weight: 700;
	font-size: 1rem;
	}
	.header-4 .btn:hover {
	background: #fe0000;
	color: #ffffff;
	}
	@media (min-width: 992px) {
	.header-4 {
	height: 100vh;
	min-height: 850px;
	padding-top: 0;
	padding-bottom: 0;
	}
	}
	@media (min-width: 768px) {
	.header-4 h2 {
	width: 90%;
	}
	}
	/* end of header 4 */

view raw Bootstrap-Templates-Header-4.css hosted with ❤ by GitHub