"Header user-Interface "
Bootstrap 4.0.0 Snippet by shu3aybbadran

<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

Related: See More


Questions / Comments: