Header sections makes the entire page elegant as the user lands this above the fold area. You can add beautiful header sections in Web-Boots theme by copying and pasting one of the below code blocks.
Header Style 1
<section class="header1 cid-rkNLTuuWv0" id="header16-20">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-10 align-center">
<h1 class="wn-section-title wn-bold pb-3 wn-fonts-style display-1">
HEADER STYLE 1</h1>
<p class="wn-text pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="wn-section-btn"><a class="btn btn-md btn-black-outline display-4" href="headers.html">LEARN MORE</a></div>
</div>
</div>
</div>
</section>
Header Style 2
<section class="cid-rkNLRLqYxZ wn-fullscreen wn-parallax-background" id="header2-1z">
<div class="wn-overlay" style="opacity: 0.5; background-color: rgb(35, 35, 35);"></div>
<div class="container align-center">
<div class="row justify-content-md-center">
<div class="wn-white col-md-10">
<h1 class="wn-section-title wn-bold pb-3 wn-fonts-style display-1">HEADER STYLE 2</h1>
<p class="wn-text pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="wn-section-btn"><a class="btn btn-md btn-secondary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>
Header Style 3
<section class="header1 cid-rkNLV53asJ wn-parallax-background" id="header1-21">
<div class="wn-overlay" style="opacity: 0.6; background-color: rgb(20, 157, 204);">
</div>
<div class="container">
<div class="row justify-content-md-center">
<div class="wn-white col-md-10">
<h1 class="wn-section-title align-center wn-bold pb-3 wn-fonts-style display-1">HEADER STYLE 3</h1>
<h3 class="wn-section-subtitle align-center wn-light pb-3 wn-fonts-style display-2">
Beautiful mobile websites
</h3>
<p class="wn-text align-center pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="wn-section-btn align-center"><a class="btn btn-md btn-secondary display-4" href="headers.html">
<span class="wn-iconfont wns-file"></span>LEARN MORE</a></div>
</div>
</div>
</div>
</section>
Header Style 4
<section class="header4 cid-rkNLXajblb wn-parallax-background" id="header4-22">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(35, 35, 35);">
</div>
<div class="container">
<div class="row justify-content-md-center">
<div class="media-content col-md-10">
<h1 class="wn-section-title align-center wn-white pb-3 wn-bold wn-fonts-style display-1">HEADER STYLE 4</h1>
<div class="wn-text align-center wn-white pb-3">
<p class="wn-text wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="wn-section-btn align-center"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
<div class="wn-figure pt-5">
<img src="assets/images/background2.jpg" alt="Web-Boots" style="width: 60%;">
</div>
</div>
</div>
</section>
Header Style 5
<section class="header6 cid-rkNLYvsIGs wn-fullscreen" data-bg-video="https://www.youtube.com/watch?v=36YgDDJ7XSc" id="header6-23">
<div class="wn-overlay" style="opacity: 0.5; background-color: rgb(35, 35, 35);">
</div>
<div class="container">
<div class="row justify-content-md-center">
<div class="wn-white col-md-10">
<h1 class="wn-section-title align-center wn-bold pb-3 wn-fonts-style display-1">HEADER STYLE 5</h1>
<p class="wn-text align-center pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="wn-section-btn align-center"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>
Header Style 6
<section class="header8 cid-rkNM02qrAa wn-parallax-background" id="header8-24">
<div class="wn-overlay" style="opacity: 0.4; background-color: rgb(255, 51, 102);">
</div>
<div class="container align-center">
<div class="row justify-content-md-center">
<div class="wn-white col-md-10">
<h1 class="wn-section-title align-center py-2 wn-bold wn-fonts-style display-1">HEADER STYLE 6</h1>
<p class="wn-text align-center py-2 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="wn-media show-modal align-center py-2" data-modal=".modalWindow">
<span class="wn-iconfont wns-play" style="color: rgb(20, 157, 204); fill: rgb(20, 157, 204);"></span>
</div>
<div class="icon-description align-center font-italic pb-3 wn-fonts-style display-7">
Icon's descriptions
</div>
<div class="wn-section-btn text-center"><a class="btn btn-md btn-primary display-4" href="headers.html">MORE</a></div>
</div>
</div>
</div>
<div>
<div class="modalWindow" style="display: none;">
<div class="modalWindow-container">
<div class="modalWindow-video-container">
<div class="modalWindow-video">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="1" data-src="https://www.youtube.com/watch?v=36YgDDJ7XSc"></iframe>
</div>
<a class="close" role="button" data-dismiss="modal">
<span aria-hidden="true" class="wns-close wn-iconfont closeModal"></span>
<span class="sr-only">Close</span>
</a>
</div>
</div>
</div>
</div>
</section>
Header Style 7
<section class="header9 cid-rkNM16riIk wn-fullscreen wn-parallax-background" id="header9-25">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(255, 255, 255);">
</div>
<div class="container">
<div class="media-container-column wn-white col-lg-8 col-md-10">
<h1 class="wn-section-title align-left wn-bold pb-3 wn-fonts-style display-1">HEADER STYLE 7</h1>
<h3 class="wn-section-subtitle align-left wn-light pb-3 wn-fonts-style display-2">
Beautiful mobile websites
</h3>
<p class="wn-text align-left pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="wn-section-btn align-left"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-black-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>
Header Style 8
<section class="header10 cid-rkNM27tRZt wn-fullscreen wn-parallax-background" id="header10-26">
<div class="container">
<div class="media-container-column wn-white p-5 align-left col-lg-8 col-md-10">
<h1 class="wn-section-title wn-bold pb-3 wn-fonts-style display-1">HEADER STYLE 8</h1>
<p class="wn-text pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="wn-section-btn"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>
Header Style 9
<section class="header12 cid-rkNM30ZYSd wn-fullscreen wn-parallax-background" id="header12-27">
<div class="wn-overlay" style="opacity: 0.5; background-color: rgb(35, 35, 35);">
</div>
<div class="container ">
<div class="media-container">
<div class="col-md-12 align-center">
<h1 class="wn-section-title pb-3 wn-white wn-bold wn-fonts-style display-1">HEADER STYLE 9</h1>
<p class="wn-text pb-3 wn-white wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="wn-section-btn align-center py-2"><a class="btn btn-md btn-secondary display-4" href="headers.html">MORE</a></div>
<div class="icons-media-container wn-white">
<div class="card col-12 col-md-6 col-lg-3">
<div class="icon-block">
<a href="#">
<span class="wns-layers wn-iconfont"></span>
</a>
</div>
<h5 class="wn-fonts-style display-5">
Multi Layout
</h5>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<div class="icon-block">
<a href="#">
<span class="wns-sun wn-iconfont"></span>
</a>
</div>
<h5 class="wn-fonts-style display-5">
Creative Idea
</h5>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<div class="icon-block">
<a href="#">
<span class="wns-cash wn-iconfont"></span>
</a>
</div>
<h5 class="wn-fonts-style display-5">
Target Buyers
</h5>
</div>
<div class="card col-12 col-md-6 col-lg-3">
<div class="icon-block">
<a href="#">
<span class="wns-mobi wn-iconfont"></span>
</a>
</div>
<h5 class="wn-fonts-style display-5">
Reach Top
</h5>
</div>
</div>
</div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>
Header Style 10
<section class="header13 cid-rkNM3VS42D wn-parallax-background" id="header13-28">
<div class="wn-overlay" style="opacity: 0.5; background-color: rgb(239, 239, 239);">
</div>
<div class="container">
<div class="wn-media show-modal align-center pb-4 mb-4 pt-5" data-modal=".modalWindow">
<span class="wn-icofont wns-play" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
</div>
<h1 class="wn-section-title align-center pb-3 wn-bold wn-fonts-style display-1">HEADER STYLE 10</h1>
<h3 class="wn-section-subtitle wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="container mt-5 pt-5 pb-5">
<div class="media-container-column" data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="IfdM7QrFEu912CvQJMqWfmlX+P2XaPmz/4nYNhRRg4JWy+faXfQoQyggyv/uNbQHqC3a0ClfH9SB6Hagqt9/vqQurGIW0U9FeTeeQuhkWUxKBAniBhyC00T7ohPhuSfe">
<div class="row justify-content-center form-inline">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row justify-content-center form-inline">
<div class="col-auto form-group " data-for="name">
<input type="text" name="name" placeholder="Name" data-form-field="Name" required="required" class="form-control input-sm input-inverse display-7" id="name-header13-28">
</div>
<div class="col-auto form-group " data-for="email">
<input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control input-sm input-inverse display-7" id="email-header13-28">
</div>
<div data-for="phone" class="col-auto form-group ">
<input type="tel" name="phone" placeholder="Phone" data-form-field="Phone" class="form-control input-sm input-inverse display-7" id="phone-header13-28">
</div>
<div class="col-auto buttons-wrap">
<button type="submit" class="btn btn-primary display-4">SUBSCRIBE</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-header13-28" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
<div>
<div class="modalWindow" style="display: none;">
<div class="modalWindow-container">
<div class="modalWindow-video-container">
<div class="modalWindow-video">
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="1" data-src="https://www.youtube.com/watch?v=uNCr7NdOJgw"></iframe>
</div>
<a class="close" role="button" data-dismiss="modal">
<span aria-hidden="true" class="wns-close wn-iconfont closeModal"></span>
<span class="sr-only">Close</span>
</a>
</div>
</div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>Header Style 11
<section class="header15 cid-rkNM4S1Ev7 wn-fullscreen wn-parallax-background" id="header15-29">
<div class="wn-overlay" style="opacity: 0.5; background-color: rgb(7, 59, 76);"></div>
<div class="container align-right">
<div class="row">
<div class="wn-white col-lg-8 col-md-7 content-container">
<h1 class="wn-section-title wn-bold pb-3 wn-fonts-style display-1">HEADER STYLE 11</h1>
<p class="wn-text pb-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-lg-4 col-md-5">
<div class="form-container">
<div class="media-container-column" data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="eVwUMIkl0OJgHAiTH+NNfB1T7HvqbHv2tO4IXaO/oqLTRfwpTIZcAEufXrKMu8mBpjuIbmQnMOkJKyI6LPLu+QXMSct/vglw1uZjMI1Su13P39ApS7vT+/j2ZbrZaZkx">
<div class="row">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row">
<div class="col-md-12 form-group " data-for="name">
<input type="text" name="name" placeholder="Name" data-form-field="Name" required="required" class="form-control px-3 display-7" id="name-header15-29">
</div>
<div class="col-md-12 form-group " data-for="email">
<input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control px-3 display-7" id="email-header15-29">
</div>
<div data-for="phone" class="col-md-12 form-group ">
<input type="tel" name="phone" placeholder="Phone" data-form-field="Phone" class="form-control px-3 display-7" id="phone-header15-29">
</div>
<div data-for="message" class="col-md-12 form-group ">
<textarea name="message" placeholder="Message" data-form-field="Message" class="form-control px-3 display-7" id="message-header15-29"></textarea>
</div>
<div class="col-md-12 input-group-btn">
<button type="submit" class="btn btn-secondary btn-form display-4">SEND FORM</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-header15-29" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>Header Style 12
<section class="header3 cid-rkNM6EKYrP wn-parallax-background" id="header3-2a">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(35, 35, 35);">
</div>
<div class="container">
<div class="media-container-row">
<div class="wn-figure" style="width: 100%;">
<img src="assets/images/background2.jpg" alt="Web-Boots">
</div>
<div class="media-content">
<h1 class="wn-section-title wn-white pb-3 wn-fonts-style display-2">HEADER STYLE 12</h1>
<div class="wn-section-text wn-white pb-3 ">
<p class="wn-text wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="wn-section-btn"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
</div>
</section>Header Style 13
<section class="header7 cid-rkNM7lxIPG" id="header7-2b">
<div class="container">
<div class="media-container-row">
<div class="media-content align-right">
<h1 class="wn-section-title wn-white pb-3 wn-fonts-style display-2">HEADER STYLE 13</h1>
<div class="wn-section-text wn-white pb-3">
<p class="wn-text wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="wn-section-btn"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
<div class="wn-figure" style="width: 100%;"><iframe class="wn-embedded-video" src="https://www.youtube.com/embed/uNCr7NdOJgw?rel=0&amp;showinfo=0&autoplay=0&loop=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
</section>
Header Style 14
<section class="header14 cid-rkNM8io6uo wn-fullscreen wn-parallax-background" id="header14-2c">
<div class="wn-overlay" style="opacity: 0.8; background-color: rgb(35, 35, 35);">
</div>
<div class="container">
<div class="media-container-row">
<div class="wn-figure" style="width: 60%;">
<img src="assets/images/background2.jpg" alt="Web-Boots">
</div>
<div class="media-content">
<h1 class="wn-section-title pb-3 align-left wn-white wn-fonts-style display-1">HEADER STYLE 14</h1>
<div class="wn-section-text pb-3 ">
<p class="wn-text align-left wn-white wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="media-container-column" data-form-type="formoid">
<!---Formbuilder Form--->
<form action="#" method="POST" class="wn-form form-with-styler" data-form-title="Form"><input type="hidden" name="email" data-form-email="true" value="mgBnu/wZj+ZdepoxiWWw2ypXnM7gb+kMcTwiMFyUhV/S1oedUYTNr4y9BJWdi3KZ3jw7aaXfAkRWP7MnXh3ubXerkSAzn+SeHlVW6CVGFKebslHyXFwoBKIHWN9VMufz">
<div class="row form-inline">
<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Thanks for filling out the form!</div>
<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">
</div>
</div>
<div class="dragArea row form-inline">
<div class="col-auto form-group" data-for="email">
<input type="email" name="email" placeholder="Email" data-form-field="Email" required="required" class="form-control input-sm input-inverse display-7" id="email-header14-2c">
</div>
<div class="col-auto buttons-wrap">
<button type="submit" class="btn btn-primary display-4">SUBSCRIBE</button>
</div>
</div>
<span class="gdpr-block "><label><input type="checkbox" name="gdpr" id="gdpr-header14-2c" required="">By continiung you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label></span></form><!---Formbuilder Form--->
</div>
</div>
</div>
</div>
</section>Header Style 15
<section class="header5 cid-rkNM94rETO wn-fullscreen" id="header5-2d">
<div class="container">
<div class="row justify-content-center">
<div class="wn-white col-md-10">
<h1 class="wn-section-title align-center pb-3 wn-fonts-style display-1">HEADER STYLE 15</h1>
<p class="wn-text align-center display-5 pb-3 wn-fonts-style">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="wn-section-btn align-center"><a class="btn btn-md btn-secondary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>Header Style 16
<section class="header11 cid-rkNM9VQb4Q wn-fullscreen" id="header11-2e">
<div class="container align-left">
<div class="media-container-column wn-white col-md-12">
<h3 class="wn-section-subtitle py-3 wn-fonts-style display-5">HEADER STYLE 16</h3>
<h1 class="wn-section-title py-3 wn-fonts-style display-1">Lorem ipsum dolor sit amet. </h1>
<p class="wn-text py-3 wn-fonts-style display-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<div class="wn-section-btn py-4"><a class="btn btn-md btn-primary display-4" href="headers.html">LEARN MORE</a>
<a class="btn btn-md btn-white-outline display-4" href="headers.html">LIVE DEMO</a></div>
</div>
</div>
<div class="wn-arrow hidden-sm-down" aria-hidden="true">
<a href="#next">
<i class="wns-down wn-iconfont"></i>
</a>
</div>
</section>Ensure to replace the text, image and video content in the demo code with your own content.