<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
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>
<p>with animation <a href="https://bootsnipp.com/snippets/Warp1" target="_blank">about</a></p>
<p>about sections <a href="https://bootsnipp.com/snippets/X26RG" target="_blank">about</a></p>
<p>advance header <a href="https://bootsnipp.com/snippets/M5Nyj" target="_blank">adv header</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">
<!-- demo only update note -->
<p class="update-note">update note :change gradient , add opacity text</p>
<div class="right">
<img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/laptop.png" alt="" class="img-fluid">
</div>
<p class="opacity-text">Soon!</p>
<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-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 MIT</p>
<p><i class="fa fa-camera-retro"></i> bg-image from <a href="http://stocksnap.io/">stocksnap</a></p>
</div>
</body>
</html>
/*
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, #4ac29a, #bdfff3);
z-index: 0;
overflow: hidden;
}
#header5 .right {
display: none;
}
#header5 .opacity-text {
position: absolute;
left: 75%;
top: 15%;
transform: translate(-50%, -50%);
font-size: 10rem;
font-weight: 900;
columns: #fff;
opacity: 0.1;
transform: rotate(90deg);
}
#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 .right {
display: block;
}
#header5 .caption {
text-align: right;
}
}
/* =======================================
demo css
========================================*/
/*=== for demo only ===*/
.demo-title {
text-align: center;
color: #808080;
padding-top: 10vh;
padding-bottom: 10vh;
}
.demo-more {
text-align: center;
color: #808080;
padding-top: 10vh;
padding-bottom: 10vh;
}
.demo-more i {
color: #696969;
}
.update-note {
position: absolute;
top: 2%;
left: 2%;
background-color: rgb(33, 33, 33);
color: #fff;
border-radius: 10px;
padding: 0 15px;
}
a {
text-decoration: underline;
color: #696969;
font-weight: 600;
}
a:hover {
color: #696969;
}
body {
overflow-x: hidden;
}
// contribute on github : https://github.com/alphadsy/alpha-ui
// credits:
// bootstrap
// font-awesome
// stocksnap
