"Header Sections - User Interface #User-Interface #ui"
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="//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

Related: See More


Questions / Comments: