<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
AlPhaD UI - Advance Header sections
* Version: 1.5
* Build Date : 27-2-2018
* Last Update : 05-04-2018 [ ADD New Header and Boost old design ]
* Author: ALPhA D
* Website: www.alphadsy.com
* Github: www.github.com/alphadsy/
* License : MIT
-->
<!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>Advance 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 -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- header css -->
<link rel="stylesheet" href="header2.css">
</head>
<body>
<!-- demo-title -->
<div class="demo-title">
<h1 class="display-1">Advance Header V1.5</h1>
<p>by <a href="#">@AlPhaD</a></p>
<p>Updata Note : ADD New Header and Boost old design</p>
<p>contribute on github <a href="https://github.com/alphadsy/alpha-ui">alpha-ui</a></p>
</div>
<!-- header #1 -->
<header class="header" id="header1">
<img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" alt="">
<div class="circle">
<div class="caption">
<h2 class="title display-3">Alphad <strong>Design & Inpsertion</strong></h2>
<p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
</div>
</div>
<!-- demo only -->
<p class="update-note">Update Note : Add Gradient Animation</p>
</header>
<!-- header #2 -->
<header class="header" id="header2">
<img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" alt="">
<div class="caption">
<h2 class="title display-3">Alphad Design & Inpsertion</h2>
<p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
</div>
</header>
<!-- header #3 -->
<header class="header" id="header3">
<div class="center">
<div class="caption">
<h2 class="title display-3">HAY Im HEADER!</h2>
<p class="text">Lorem ipsum dolor sit ametaipi dsicing, consectetur elit!</p>
</div>
</div>
</header>
<!-- header #4 -->
<header class="header" id="header4">
<img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" alt="">
<div class="caption">
<h2 class="title display-3">Alphad Design & Inpsertion</h2>
<p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
</div>
</header>
<!-- header #5 -->
<!-- need more development -->
<!-- <header class="header" id="header5">
<div class="big-box yellow text">
<i class="fa fa-balance-scale"></i>
<h3 class="display-3">Lorem ipsum dolor sit amet, consect adipisicing elit.</h3>
<p class=" display-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sed reiciendis reprehenderit consequuntur suscipit architecto itaque accusantium earum, ea alias dignissimos molestiae at. A maiores aliquam voluptatem esse repellendus doloremque!</p>
</div>
<div class="box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToMtYve_V7v5THZQD1rwHtGHVZZHkEXMaLaHViOTbhA9cGeH_2">
<div class="overlay icon">
<i class="fa fa-search"></i>
</div>
</div>
<div class="box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBaldmFrGyhGu3TQHlxbXkxfBQtuhZQZ_paAS9yIiz5utg9Ly9">
<div class="overlay text">
<div class="text">
<i class="fa fa-arrow-circle-o-down"></i>
<h5>Lorem ipsum, dolor sit amet consectetur</h5>
</div>
</div>
</div>
<div class="box gray text">
<i class="fa fa-arrow-circle-o-down"></i>
<h5>Lorem ipsum, dolor sit amet consectetur</h5>
<p class=" display-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sed r adipisicing elit. Consequatur sed reiciendimque!</p>
</div>
<div class="box flip">
<div class="side">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLDnt4Tge0YJfTwM07EiEG_qnJXn_JVONRKjcc6Dzcod-haEJC">
</div>
<div class="side back">
<i class="fa fa-arrow-circle-o-down"></i>
<h5>Lorem ipsum, dolor sit amet consectetur</h5>
<p class="display-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sed r adipisicing elit. Consequatur sed reiciendimque!</p>
</div>
</div>
</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">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 <a>MIT</a></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 Advance
* Version: 1.0
* Build Date : 27-2-2018
* Last Update : - []
* Author: ALPhA D
* Website: www.alphadsy.com
* Github: www.github.com/alphadsy/
* Lic : MIT
[Layout]
[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: 25%;
transform:translate(-50%,-50%);
z-index: 15;
padding: 1rem;
}
.header .left {
position: absolute;
top: 0%;
left: 0%;
width: 50%;
height: 100%;
z-index: 5;
}
.header .right {
position: absolute;
top: 0%;
left: 50%;
width: 50%;
height: 100%;
z-index: 5;
}
.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 {
}
.header .right {
}
}
/* =======================================
header#1
========================================*/
#header1 {
background: linear-gradient(to right, #614385, #516395);
overflow: hidden;
background-size: 400% 400%;
-webkit-animation: gradanim-2 8s ease infinite;
-moz-animation: gradanim-2 8s ease infinite;
animation: gradanim-2 8s ease infinite;
}
@-moz-keyframes gradanim-2 {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gradanim-2 {
0%{background-position:11% 0%}
50%{background-position:90% 100%}
100%{background-position:11% 0%}
}
#header1 img {
position: absolute;
left: 50%;
}
#header1 .circle {
position: absolute;
left: 10%;
top: 10%;
width: 50vw;
height: 50%;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header1 {
}
#header1 img {
z-index: 5;
}
#header1 .circle {
position: absolute;
left: 20%;
top: 20%;
width: 40vw;
height: 40vw;
border-radius: 50%;
background: linear-gradient(to left, #ff512f, #dd2476);
background-size: 200% 200%;
-webkit-animation: gradanim-2 8s ease infinite;
-moz-animation: gradanim-2 8s ease infinite;
animation: gradanim-2 8s ease infinite;
}
@-moz-keyframes gradanim-2 {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gradanim-2 {
0%{background-position:11% 0%}
50%{background-position:90% 100%}
100%{background-position:11% 0%}
}
#header1 .caption {
color: #fff;
position: relative;
top: 15%;
left: -5%;
padding-right: 3rem;
}
}
/* =======================================
header#2
========================================*/
#header2 {
background: linear-gradient(
to right,
#fff,
#fff 55%,
#F4F4F4 55%,
#F4F4F4 100%
);
}
#header2 img {
position: absolute;
left: 15%;
}
#header2 .caption {
color: #000;
position: absolute;
top: 25%;
left: 15%;
width: 70%;
z-index: 5;
text-align: center;
}
#header2 .caption .title {
opacity: .9;
font-size: 5rem;
font-weight: 600;
}
#header2 .caption p {
color: #aaa;
margin-top: 2rem;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header2 {
background: linear-gradient(
to right,
#fff,
#fff 20%,
#F4F4F4 20%,
#F4F4F4 55%,
#DAE6E6 55%,
#DAE6E6 80%,
#F4F4F4 80%,
#F4F4F4 100%
);
}
#header2 img {
left: 50%;
opacity: 1;
}
#header2 .caption {
top: 15%;
left: 10%;
width: 40%;
padding-right: 3rem;
z-index: 5;
text-align: left;
}
#header2 .caption p {
margin-top: 2rem;
}
}
/* =======================================
header#3
========================================*/
#header3 {
background: #000;
background:
/* gradient overlay */
linear-gradient(
to right,
rgba(0, 0, 0, 0.6), /* #000000 */
rgba(67, 67, 67, 0.5) /* #434343 */
),
/* bottom image */
url('https://cdn.stocksnap.io/img-thumbs/960w/XSTO5645BM.jpg') no-repeat left top;
background-size: cover;
z-index: 0;
}
#header3 .center {
border-radius: 50%;
width: 350px;
height: 350px;
padding: 3%;
box-shadow: 0 16px 18px -6px rgb(15, 2, 2);
background-color: #1b1616;
}
#header3 .caption {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
text-align: center;
color: #fff;
}
#header3 .caption .title {
}
#header3 .caption .text {
}
/* =======================================
header#4
========================================*/
#header4 {
}
#header4 img {
position: absolute;
left: 15%;
opacity: 0.6;
}
#header4 .caption {
color: #000;
position: absolute;
top: 25%;
left: 15%;
width: 70%;
z-index: 5;
background-color: rgba(221, 221, 221, 0.103);
text-align: center;
}
#header4 .caption .title {
opacity: .9;
color: #eee;
font-size: 5rem;
font-weight: 600;
background: -webkit-linear-gradient(#c94b4b, #4b134f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 400%;
-moz-animation: gradanim 8s ease infinite;
animation: gradanim 8s ease infinite;
}
@-moz-keyframes gradanim {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gradanim {
0%{background-position:11% 0%}
50%{background-position:90% 100%}
100%{background-position:11% 0%}
}
#header4 .caption p {
margin-top: 2rem;
}
/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
#header4 {
}
#header4 img {
left: 40%;
opacity: 1;
}
#header4 .caption {
top: 15%;
left: 15%;
width: 40%;
padding-right: 3rem;
z-index: 5;
text-align: left;
}
#header4 .caption p {
margin-top: 2rem;
margin-left: 1rem;
}
}
/* =======================================
header#5 - need more work! -
========================================*/
/* #header5 {
margin: 1%;
}
#header5 .big-box {
width: 98%;
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
#header5 .box {
width: 48%;
height: 48%;
float: left;
background-color: #ddd;
margin-right: 1%;
margin-bottom: 1%;
}
#header5 .yellow {
background-color: rgb(236, 215, 18);
}
#header5 .gray {
background-color: #ddd;
}
#header5 .text {
padding: 2rem;
}
#header5 .text p {
padding-top: 1rem;
}
#header5 img {
width: 100%;
height: 100%;
}
Large devices (desktops, 992px and up)
@media (min-width: 992px) {
#header5 .big-box {
width: 48%;
height: 98%;
}
#header5 .box {
position: relative;
width: 23%;
}
#header5 .box .overlay {
position: absolute;
top: 5%;
bottom: 0;
left: 5%;
right: 0;
height: 90%;
width: 90%;
opacity: 0;
transition: .5s ease;
}
#header5 .box .overlay.text {
background-color: #008CBA;
}
#header5 .box .overlay.icon i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #eee;
font-size: 2rem;
}
#header5 .box:hover .overlay {
opacity: 1;
}
#header5 .box .overlay .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box.flip {
width: 100%;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.box.flip:hover {
transform: rotateY(180deg);
}
.box.flip .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.box.flip .side.back {
padding: 1rem;
background-color: #ddd;
transform: rotateY(180deg);
}
} */
/* =======================================
demo css
========================================*/
/*=== for demo only ===*/
.demo-title {
text-align: center;
color: #808080;
padding-top: 5vh;
padding-bottom: 5vh;
}
.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
