Subscribe our YouTube Channel To Get Latest Video Notification!

Create a Stylish Hero Header using CSS & HTML

Related Posts


Hii guys ,

So today I will tell you that how can you create a awesome and stylish Hero Header just by using some pieces of code.

What is Hero Header and how it works ?

Its a Header with text , image and some cool effects. Its totally depends upon you whether you want to use Hero Header or not but I will 100% recommend you to use Hero Header as it makes your Blog look awesome.

How to create Hero Header ?

So now I will tell you that how can you create a Hero Header for your Blog.

You just need to follow some really very simple and easy steps.

1. Go to Blogger Dashboard > Themes > Edit HTML.

2. After that search </head> tag , copy the below code and paste that small piece of codes just above it.

  <!-- AT_HERO_SECTION -->
@media only screen and (max-width: 1080px){ #LAYER1 {width: 90%!important;margin: auto 30px!important;} #LAYER2 #Image2_img{display: none;}#AT_HERO_HEADER{padding: 45px 0 60px!important; }#LAYER1 h2.title:before{left: 8px!important;content: &#39;&#39;;}} .bubble li { background: #00e6e6; opacity: .1; width: 16px; height: 16px; border-radius: 50%; position: absolute; list-style: none } .bubble li:nth-child(1) { left: 220px; top: 250px; -webkit-animation: spin3 2s infinite alternate; animation: spin3 2s infinite alternate } .bubble li:nth-child(2) { left: 35%; top: 100px; -webkit-animation: spin 2s infinite alternate; animation: spin 2s infinite alternate } .bubble li:nth-child(3) { left: 7%; width: 71px; height: 71px; top: 95px; -webkit-animation: spin1 3s infinite alternate; animation: spin1 3s infinite alternate } .bubble li:nth-child(4) { left: 42%; top: 280px; width: 20px; height: 20px } .bubble li:nth-child(5) { left: 76%; width: 51px; height: 51px; top: 160px; -webkit-animation: spin1 3s infinite alternate; animation: spin1 3s infinite alternate } .bubble li:nth-child(6) { left: 75%; width: 30px; height: 30px; top: 186px } .bubble li:nth-child(7), .bubble li:nth-child(8) { left: 62%; top: 100px; width: 20px; height: 20px; -webkit-animation: spin2 2s infinite alternate; animation: spin2 2s infinite alternate } .bubble li:nth-child(8) { left: 90%; top: 250px } .HERO-LAYER-left-top { text-align: left; max-width: 200px; margin-bottom: 30px; } .title-main-content { font-size: 20px; color: #000; margin-bottom: 12px; font-weight: 400; letter-spacing: normal; text-transform: capitalize; } .time-content { font-size: 15px; line-height: 22px; margin-top: 0; margin-bottom: 15px; color: #212121; font-weight: 700; } .bottom-bg{ display: initial; background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(transparent),color-stop(#faf076),to(#faf076)); background-image: linear-gradient(transparent 0,transparent calc(50% - 25%),#faf076 calc(50% - 25%),#faf076 100%); background-size: 100% 200%; background-position: 0 0; word-break: break-word; width: auto; } #AT_HERO_HEADER { z-index: 99;position: relative; float: left; width: 100%; background: #f8f8f8; background-position: bottom 10% right,top 25% left; padding: 45px 0 135px; margin: 0; } .AT_HERO_CONTAINER { position: relative; max-width: 1100px; margin: 55px auto 40px; } .HERO_LAYER { overflow: hidden; padding: 0; width: auto; max-width: 100%; margin: auto 10px; } #LAYER2 { width: 48%; float: right; } #LAYER2 #Image2 { overflow: hidden; text-align: right; } #LAYER2 #Image2_img { width: auto; height: 240px; object-fit: cover; margin-left: 150px; } #LAYER1 { width: 52%; float: left; } #LAYER1 h2.title { font-weight: 600; line-height: 1.2; color: #00b300; text-align: left; padding: 0; } #LAYER1 h2.title:before{position: absolute; top: 35%; bottom: 0; right: auto; left: -20px; display: block; width: 15px; height: 40%; background-color: transparent; background-image: radial-gradient(currentColor 1px,transparent 1px); background-position: 1px 1px; background-size: 5px 5px; content: &#39;&#39;; color: #000;} #LAYER1 p { font-size: 15px; font-weight: 300; margin: 20px 0; font-family: &#39;Roboto&#39;, sans-serif; color: #222; } .at-btn a span:before{content:&quot;&quot;;background: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;;%3E%3Cpath d=&#39;M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z&#39; fill=&#39;%23FFFFFF&#39;/%3E%3C/svg%3E&quot;) center / 17px no-repeat;width: 18px;position: absolute; height: 9px;left: -23px; padding-top: 4px;} .at-btn2 a span:before{content:&quot;&quot;;background: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;;%3E%3Cpath d=&#39;M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z&#39; fill=&#39;%23FFFFFF&#39;/%3E%3C/svg%3E&quot;) center / 17px no-repeat;width: 18px;position: absolute; height: 9px;left: -25px; padding-top: 4px;} .at-btn a ,.at-btn2 a { display: block; color: inherit; color: #fff; } .AT-Button-list{display: flex; justify-content: space-between;} .at-btn2{background-color: #31a8e0!important;} .at-btn a span,.at-btn2 a span{position: relative} .at-btn,.at-btn2 { font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: space-around; width: 75px; height: 34px; padding-left: 22px; background-color: #e4393c; border-radius: 5px; color: #fff; margin-top: 12px; bottom: 0; right: 0;margin-right: 50px;box-shadow: 0 6px 18px 0 rgba(9,32,76,.035); } svg#footer-svg{ fill: #fefefe; position: absolute; bottom: -10px; left: 0; right: 0; } .hero-svg-container { position: absolute; z-index: 1; bottom: -10px; left: 0; height: auto; } .hero-svg-container{ width: 100%; background-size: cover; }

3 Now search for </header> and paste the below  given code below it . You can also place this code anywhere else where you want to show it but I will recommend you guys to place it below </header>.

<b:if cond='data:view.isHomepage'>
<div id='AT_HERO_HEADER'>
<ul class='bubble'>
<li/> <li/> <li/> <li/> <li/> <li/> <li/> <li/>
<div class='row'>
<div class='AT_HERO_CONTAINER'>
<div class='HERO_LAYER'>
<div class='LAYER2' id='LAYER2'>
<img alt='Blogger-hero header' height='440' id='Image2_img' src='' width='768'/></div>
<div class='LAYER1' id='LAYER1'>
  <div class='HERO-LAYER-left-top'>
          <h2 class='title-main-content' id='getElementById(anutrickz)'><script>//<![CDATA[
   eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 7=13 9();2 0=7.10();2 1;4(0<12)1=\'3 11\';6 4(0>=12&&0<=17)1=\'3 14\';6 4(0>=17&&0<=15)1=\'3 16\';18.8(\'8(19)\').20=\'<5>\'+1+\'</5>\';',10,21,'hrs|greet|var|Good|if|b|else|myDate|getElementById|Date|getHours|Morning||new|Afternoon|24|Evening||document|anutrickz|innerHTML'.split('|'),0,{}))

                <h4 class='time-content bottom-bg' id='getElementById(antrickz-time)'><script>//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('21.11("11(16-15)").14=8();20 8(){17 2=18 19(),6=2.4().7().5==1?\'0\'+2.4():2.4(),13=2.3().7().5==1?\'0\'+2.3():2.3(),9=2.3()>=12?\'22\':\'23\',10=[\'24\',\'25\',\'26\',\'27\',\'28\',\'29\',\'30\'];31 10[2.32()]+\' \'+13+\':\'+6+9}',10,33,'||d|getHours|getMinutes|length|minutes|toString|formatAMPM|ampm|days|getElementById||hours|innerHTML|time|antrickz|var|new|Date|function|document|PM|AM|Sun|Mon|Tue|Wed|Thu|Fri|Sat|return|getDay'.split('|'),0,{}))

<h2 class='title'>Welcome to TheBloggersPoint</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s</p>
  <div class='AT-Button-list'>
  <div class='at-btn'>
<a href='' target='_blank'>
<span class='bt-text'>Subscribe</span></a>
</div><div class='at-btn2'>
<a href='#' target='_blank'>
<span class='bt-text'>Join Now</span></a>
<div class='hero-svg-container'>
<svg id='footer-svg' version='1.1' viewBox='0 0 1440 126' x='0px' xml:space='preserve' xmlns='' xmlns:xlink='' y='0px'><path class='st0' d='M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z'/></svg>

4. Now you are all done placing codes. Now you just need to change the texts , fonts and color codes



Script Credit :- AnuTrickz

If you liked this article then share this with your friends and families , follow this Blog and dont forget to subscribe our YTUBE Channel

You may like these posts


  1. Rutvik soni
    This is really a helpful website
    • Aaryan Shlok
      Thanks for participating in our contest and for your review
  2. Bloggingium
    Helpful post
    • Aaryan Shlok
      Keep supporting
  3. Ahmad Mo Bartan Store
    Good project bro
    • Aaryan Shlok
      Keep Supporting
  4. Ayush Jaiswal
    • Aaryan Shlok
      Keep supporting