Bootstrap Templates - Header - Logo

Bootstrap Templates - Header - Logo lets you display your logo along with your main message on your website. This bootstrap template offers a nice and clean design that is fully responsive and will look great on any device.

For a live preview of this template click here.

Block 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 1 -->
	<section class="header-1">
	<div class="container h-100 d-flex align-items-center text-center">
	<div class="row">
	<div class="col">
	<img src="https://i.imgur.com/A0t1a3D.png" class="img-fluid mb-2" alt="logo">
	<h1>Let's make design fast and easy.</h1>
	<p class="mx-auto mb-4">We offer a huge collection of simple, beautiful and ready to use blocks. All blocks can be downloaded free of charge from learnwd.com</p>
	<a class="btn btn-primary rounded" href="https://www.learnwd.com/">Download Now</a>
	</div>
	</div>
	</div>
	</section>

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

CSS Code:

	/*start of header-1*/
	.header-1 {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background: linear-gradient(rgba(62, 63, 64, 0.6), rgba(62, 63, 64, 0.6)), url("https://i.imgur.com/FVieG2F.png");
	background-size: cover;
	background-position: center bottom;
	color: #ffffff;
	overflow-x: hidden;
	padding-top: 100px;
	padding-bottom: 100px;
	}
	.header-1 h1 {
	font-size: 3.875rem;
	font-weight: 300;
	}
	.header-1 p {
	font-size: 1.15rem;
	font-weight: 300;
	}
	.header-1 .btn {
	padding: 10px 26px;
	background-color: #313131;
	color: #FFF;
	border: solid 2px #313131;
	}
	.header-1 .btn:hover {
	color: #FFF;
	background-color: #1f69ff;
	border-color: #1f69ff;
	}
	@media (min-width: 992px) {
	.header-1 {
	height: 100vh;
	min-height: 650px;
	padding-top: 0;
	padding-bottom: 0;
	}
	}
	@media (min-width: 768px) {
	.header-1 p {
	width: 75%;
	}
	}
	/*end of header-1*/

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