"Header user-Interface "
Bootstrap 4.1.1 Snippet by shu3aybbadran

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 #1</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> <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; } } /* ======================================= 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; }

Questions / Comments: