Header Sections User Interface

This bootstrap snippet called "Header Sections User Interface" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: header,section,ui,interface,hero

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab




<!-- 
AlPhaD UI - Header

* Version: 1.0
* Build Date    :  15-12-2017 
* Last Update   :  - []
* Author: ALPhA D
* Website: www.alphadsy.com
* contribute on github : https://github.com/alphadsy/alpha-ui
more ui & layout https://github.com/alphadsy
-->
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Header by AlPhaD</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- font-awesome icons -->
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<!-- header css -->
<link rel="stylesheet" href="header.css">
</head>
<body>

<!-- demo-title -->
<div class="demo-title">
    <h1 class="display-1">Header</h1>
	<p>by <a href="#">@AlPhaD</a></p>
	<p>contribute on github <a href="https://github.com/alphadsy/alpha-ui" target="_blank">alpha-ui</a></p>
</div>

<!-- header #1 -->
<header class="header" id="header1">
	<div class="center">
		<div class="caption">
			<h2 class="title display-3">Header title</h2>
			<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ea accusamus enim hic, itaque eius quibusdam maxime veritatis maiores, ipsum porro beatae. Quisquam deleniti maxime velit tempora, molestias corrupti iusto!</p>
			<button class="action btn btn-primary">click me</button>	
			<button class="action btn btn-Light">click me</button>	
		</div>	
	</div>
	<!-- scroll-down -->
	<i class="scroll fa fa-angle-double-down"></i>
</header>

<!-- header #2 -->
<header class="header" id="header2">
	<div class="left">
		<div class="caption">
			<h2 class="title display-3">Header title</h2>
			<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ea accusamus enim hic, itaque eius quibusdam maxime veritatis maiores, ipsum porro beatae. Quisquam deleniti maxime velit tempora, molestias corrupti iusto!</p>
			<div class="action input-group">
			  <input type="text" class="form-control" placeholder="Search for..." required>
			  <span class="input-group-btn">
			    <button class="btn btn-success" type="button">Go!</button>
			  </span>
	    </div>
		</div>	
	</div>
	<i class="scroll fa fa-angle-double-down"></i>
</header>

<!-- header #3 -->
<header class="header" id="header3">
	<div class="left">
		<div class="caption">
			<h2 class="title display-3">Header title</h2>
			<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ea accusamus enim hic, itaque eius quibusdam maxime veritatis maiores, ipsum porro beatae. Quisquam deleniti maxime velit tempora, molestias corrupti iusto!</p>
			<button class="action btn btn-danger">click me</button>	
		</div>	
	</div>
	
	<div class="right">
	  <img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/laptop.png" alt="" class="img-fluid">
	</div>
	<i class="scroll fa fa-angle-double-down"></i>
</header>

<!-- header #4 -->
<header class="header" id="header4">
	<div class="center">
		<div class="caption">
			<h2 class="title display-3">Header title</h2>
			<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ea accusamus enim hic, itaque eius quibusdam maxime veritatis maiores, ipsum porro beatae. Quisquam deleniti maxime velit tempora, molestias corrupti iusto!</p>
			<form class="action">
		    <input type="Email" class="form-control mr-1" id="email" placeholder="Email">		   
	      <button type="submit" class="btn btn-warning">Submit</button>
	    </form>
		</div>	
	</div>
	<i class="scroll fa fa-angle-double-down"></i>
</header>

<!-- header #5 -->
<header class="header" id="header5">
	<div class="left">
	  <img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/laptop.png" alt="" class="img-fluid">
	</div>
	
	<div class="right">	
		<div class="caption">
			<h2 class="title display-3">Header title</h2>
			<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ea accusamus enim hic, itaque eius quibusdam maxime veritatis maiores, ipsum porro beatae. Quisquam deleniti maxime velit tempora, molestias corrupti iusto!</p>
			<button class="action btn btn-light">click me</button>	
		</div>	
	</div>
	<i class="scroll fa fa-angle-double-down"></i>
</header>


<div class="demo-more d-lg-flex justify-content-around">
	<p><i class="fa fa-users"></i> contribute on github <a href="https://github.com/alphadsy/alpha-ui" target="_blank">alpha-ui</a></p>
	<p><i class="fa fa-gift"></i> more ui and layout <a href="https://github.com/alphadsy">alphadsy</a></p>
	<p><i class="fa fa-balance-scale"></i> under AGPL-3.0</p>
	<p><i class="fa fa-camera-retro"></i> bg-image from <a href="http://stocksnap.io/">stocksnap</a></p>
</div>

<a href="http://bootdey.com/" class="text-centerr">www.bootdey.com/</a>

</body>
</html>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview




/* 
AlPhaD UI - Header

* Version: 1.0
* Build Date    :  15-12-2017 
* Last Update   :  - []
* Author: ALPhA D
* Website: www.alphadsy.com
* contribute on github : https://github.com/alphadsy/alpha-ui
more ui & layout https://github.com/alphadsy

[Layout]

* body
    - Header / #header
	  + center || + left || + right
	    + caption || -img
        - title  
        - text
        - action

[Color codes]

[Typography]

[content table]

- header main css 
  - header main css (lg)
- #header1 css
  - #header1 css (lg)
.
.
.    
- demo css (for demo purpose only)

*/
 
/* =======================================
 header
========================================*/
.header {
  position: relative;
  width: 100vw;	
  height: 600px;	
}
.header .center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform:translate(-50%,-50%);
	z-index: 5; 
  padding: 1rem;
}
.header .left {
  position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform:translate(-50%,-50%);
	z-index: 5; 
  padding: 1rem;
}
.header .right {
  position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform:translate(-50%,-50%);
	z-index: 5; 
  padding: 1rem;
}
.header .scroll {
  position: absolute;
  top: 95%;
  left: 50%;
  transform:translate(-50%,-50%);
  color: #fff;
  font-size: 1.5rem;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
.header .center {
  width: 50%;
}
.header .left {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 40%;
  height: 60%;
  transform:translate(0, 0);
  padding: 1rem;
}
.header .right {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 40%;
  height: 60%;
  transform:translate(0, 0);
  padding: 1rem;
}
}

/* =======================================
 header#1
========================================*/
#header1 {
	background: #355c7d;
  background:
    /* gradient overlay */
    linear-gradient(
      to bottom,
      rgba(203, 53, 107, 0.6), /* #cb356b */
      rgba(189, 63, 50, 0.5) /* #bd3f32 */
    ),
    /* bottom image */
    url('https://cdn.stocksnap.io/img-thumbs/960w/VPYPAS4FVT.jpg') no-repeat left top;
  background-size: cover;  
	z-index: 0; 
}
#header1 .caption {
	text-align: center;
  color: #fff;
}
#header1 .caption .title {
	margin-bottom: 1.5rem;
} 
#header1 .caption .text {
	margin-bottom: 1.5rem;
}
#header1 .caption .action {
	margin-bottom: 1rem;
	padding-left: 3rem;
	padding-right: 3rem;
	border-radius: 15px;
}
  
/* =======================================
 header#2
========================================*/
#header2 {
	background: #355c7d;
  background:
    linear-gradient(
      rgba(53, 92, 125, 0.8), /* #355c7d */
      rgba(108, 91, 123, 0.8), /* #6c5b7b */
      rgba(192, 108, 123, 0.8) /* #c06c7b */
    ),
    url('https://cdn.stocksnap.io/img-thumbs/960w/LPPN6E2YK4.jpg') no-repeat left top;
  background-size: cover;  
	z-index: 0; /* bottom layout */
}
#header2 .caption {
	z-index: 5; 
  text-align: center;
  color: #fff;
}
#header2 .caption .title {
	margin-bottom: 1.5rem;
}
#header2 .caption .text {
	margin-bottom: 1.5rem;
}
#header2 .caption .action {
  display: flex;
	margin-bottom: 1rem;
	margin-left: 15%;
  width: 70%;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header2 .caption {
  text-align: left;
}
#header2 .caption .action {
  display: flex;
  margin-bottom: 1rem;
  margin-left: 0%;
  width: 80%;
}
}

/* =======================================
 header#3
========================================*/
#header3 {
	background: #355c7d;  
  background: 
    linear-gradient(
      to left,
      rgba(214, 109, 117, 0.8), /* #d66d75 */
      rgba(226, 149, 135, 0.7) /* #e29587 */
    ),
    url('https://cdn.stocksnap.io/img-thumbs/960w/IZJKSG1FLK.jpg') no-repeat left top;
  background-size: cover;  
	z-index: 0; /* bottom layout */
}
#header3 .right {
	display: none;
}
#header3 .caption {
	z-index: 5; 
  text-align: center;
  color: #fff;
}
#header3 .caption .title {
	margin-bottom: 1.5rem;
} 
#header3 .caption .text {
	margin-bottom: 1.5rem;
} 
#header3 .caption .action {
	margin-bottom: 1rem;
	padding-left: 3rem;
	padding-right: 3rem;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header3 .caption {
  text-align: left;
}
#header3 .right {
  display: block;
}
}

/* =======================================
 header#4
========================================*/
#header4 {
	background: #355c7d;  
  background:
    linear-gradient(
      rgba(53, 92, 125, 0.8), /* #355c7d */
      rgba(108, 91, 123, 0.8), /* #6c5b7b */
      rgba(192, 108, 123, 0.8) /* #c06c7b */
    ),
    url('https://cdn.stocksnap.io/img-thumbs/960w/Y01VDYAX63.jpg') no-repeat left top;
  background-size: cover;  
	z-index: 0; /* bottom layout */
}
#header4 .caption {
	z-index: 5; 
  text-align: center;
  color: #fff;
}
#header4 .caption .title {
	margin-bottom: 1.5rem;
}
#header4 .caption .text {
	margin-bottom: 1.5rem;
}
#header4 .caption .action {
  display: flex;
  margin-bottom: 1rem;
  margin-left: 15%;
  width: 70%;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header4 .caption .action {
  margin-left: 10%;
  width: 80%;
}
}

/* =======================================
 header#5
========================================*/
#header5 {
	background: #355c7d; 
	background:
    linear-gradient(to right, #0f0c29, #302b63, #24243e);
  z-index: 0; 
}
#header5 .left {
  display: none;
}
#header5 .caption {
	z-index: 5; 
  text-align: center;
  color: #fff;
}
#header5 .caption .title {
	margin-bottom: 1.5rem;
} 
#header5 .caption .text {
	margin-bottom: 1.5rem;
} 
#header5 .caption .action {
	margin-bottom: 1rem;
	padding-left: 3rem;
	padding-right: 3rem;
	border-radius: 10px;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header5 .left {
  display: block;
}

#header5 .caption {
  text-align: left;
}
}
 
/* =======================================
demo css
========================================*/

/*=== for demo only ===*/
.demo-title {
  text-align: center;
  color: #808080;
  padding-top: 20vh;
  padding-bottom: 20vh;
}
.demo-more {
  text-align: center;
  color: #808080;
  padding-top: 10vh;
  padding-bottom: 10vh;
}
.demo-more i {
  color: #696969;
}
a {
  text-decoration: underline;
  color: #696969;
  font-weight: 600;
}
a:hover {
  color: #696969;
}
body {
  overflow-x: hidden;
}


                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview




// contribute on github : https://github.com/alphadsy/alpha-ui
// credits:
// bootstrap
// font-awesome
// stocksnap 

Information about this bootstrap snippet

Creator: shu3ayb badran

Bootstrap version: 4.0.0-beta

Created: Dec 19th 2017, 00:01

Views: 85