How to make Hero wave or head wrapper

How to create a style like this is very easy, here's how to make a Hero wave or head wrapper

Login to blogger > Click Themes > Edit Html

Place the css code below right above the ]]> </ b:skin> code or </style>  code


/* Intro Wave */
#head-wrapper{position:relative;text-align:center;padding:0 20px;float:left;background-size:cover;background:#6ed25c;background-image:linear-gradient(to right,#0002a0 0,#0076f4 100%);background-position:50%;background-repeat:no-repeat;overflow:hidden;width:100%;height:280px;margin:54px auto 0px auto}.course-head{position:relative;display:table;width:100%;height:100%;z-index:5}.course-sub-head{padding:0 10px;max-width:970px;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;margin:0}.post-header{position:relative}.head-text{float:left;width:100%;text-align:center;margin:0 0 50px}.head-text h3{display:block;font-size:1.8rem;color:#fff;text-align:center;font-weight:500;margin:0 0 20px}.head-text p{line-height:normal;margin:0}.head-text.onex{margin:auto;color:#fff}.head-text.onex h3{color:#fff}svg{vertical-align:middle}#head-wrapper svg.wave{position:absolute;bottom:-1px;left:0;overflow:hidden;vertical-align:middle}.avv{fill:none}.bvv{clip-path:url(#a)}.cvv,.dvv{fill:#fff}.cvve,.dvve{fill:#fff}.dvv,.dvve{opacity:0.5;isolation:isolate}#head-wrapper svg.wavee{position:absolute;top:-1px;left:0;overflow:hidden;vertical-align:middle;transform:rotate(180deg)}.button-home a span.but{background:transparent;color:#fff;font-size:14px;font-weight:500;border-radius:99em;padding:10px 22px;display:inline-block;text-align:center;position:relative;margin:25px auto 0 auto;overflow:hidden;border:2px solid;outline:none;transition:all .1s}.button-home a span.but:hover{background:#fff;color:#222;border-color:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,0.15)}.Night .button-home a span.but{border:2px solid rgba(255,255,255,.15)}.Night .button-home a span.but:hover{background:#007bff;color:#fff;border-color:#007bff}.Night #head-wrapper{background:#263545}.Night .cvv,.Night .dvv,.Night .cvve,.Night .dvve{fill:#1c2733}.containerghost{position:absolute;right:5%;top:40%;margin-top:-85.5px;opacity:.7;animation:bounceInRight 3.5s}.ghost{animation:float 3s ease-out infinite}.shadowFrame{width:130px;margin-top:15px}.shadow{animation:shrink 3s ease-out infinite;transform-origin:center center}.shadow ellipse{transform-origin:center center}


Then place the following html code below the </header> code or above the id = 'wrapper'> code


<div class='clear'/>
<div id='head-wrapper'>
<div class='course-head'>
<div class='course-sub-head row'>
<div class='head-text onex section'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h3 class='title'>
            <data:blog.title/>
         </h3>
<p>The place to share tips about bloggers and other information</p>
<div class='button-home'>
<a href='https://www.ali-va.us/' rel='nofollow noopener' target='_blank' title='Browse Our Blogger Themes'><span class='but'>Browse Themes</span></a></div>
</b:if></b:if>
<b:if cond='data:view.isSingleItem'> 
<h3 class='title'><data:blog.pageName/></h3>
<br/>
</b:if>
</div>
  <div class='clear'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'><defs><clipPath id='a'><rect class='avv' height='75' width='1920'/></clipPath></defs><g class='bvv'><path class='cvv' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/></g><g class='b'><path class='dvv' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/></g><g class='bvv'><path class='dvv' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/></g><g class='bvv'><path class='dvv' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/></g></svg>
</div>

which I marked please change according to your wishes

Save template. done 

Background with animated waves


How to create a style like this is very easy, here's how to make a Hero wave or head wrapper

Login to blogger > Click Themes > Edit Html

Place the css code below right above the ]]> </ b:skin> code or </style>  code


:root{--body-font:Roboto,Arial,sans-serif;--body-bg:#f0f2f5;--title-color:#1f2b38;--link-color:#2980b9;--text-color:#67676a;--subtitle-color:#47474a;--header-bg:#1f2b38;--header-color:#95a5a6;--header-hover-color:#fff;--navbar-bg:#243342;--navbar-color:#95a5a6;--navbar-hover-color:#fff;--hero-bg-1:#2c7ee8;--hero-bg-2:#27ae60;--hero-color:#fff;--hero-text-color:#cfeddc;--green-color:#27ae60;--green-hover-color:#239c56;--blue-color:#2980b9;--blue-hover-color:#2573a6;--red-color:#e74c3c;--bsellers-bg:#fff;--bsellers-title-color:#1f2b38;--bsellers-link-color:#2980b9;--footer-bg:#1f2b38;--footer-color:#95a5a6;--footer-title-color:#fff;--footer-hover-color:#fff;--footerbar-bg:#161e27;--footerbar-color:#e8e9eb;--footerbar-hover-color:#fff;--copyright-color:#95a5a6;--border-color:#e1e8ed;--box-shadow:0 1px 2px rgba(0,0,0,0.1);--top-box-shadow:0 -1px 2px rgba(0,0,0,0.1)}
/* Next */
#vagina-ngiler a{padding-top:60px}
#vagina-ngiler a span{position:absolute;top:0;left:0;right:0;height:40px;transition:all .3s}
#vagina-ngiler a:hover span{opacity:.8}
#vagina-ngiler a span::before{position:absolute;content:'';top:-22px;left:-22px;width:44px;height:44px;box-shadow:0 0 0 0 rgba(255,255,255,0.1);border-radius:100%;opacity:0;-webkit-animation:sdb 3s infinite;animation:sdb 3s infinite}
#vagina-ngiler a span::after{position:absolute;content:'';width:12px;height:12px;margin:-8px 0 0 -6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.insightly{position:absolute;bottom:35%;left:50%;z-index:2;display:inline-block;transform:translate(0,-50%);color:#fff}
#hero-vvv svg.wave {position: absolute;bottom: -1px;left: 0;overflow: hidden;vertical-align: middle;}
.a{fill:none}.b{clip-path:url(#a)}.c,.d{fill:#efefef;transition: all .5s ease;}.d{opacity:0.5;isolation:isolate}
/*Netralid*/
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0,0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-fw{width:1.28571429em;text-align:center}.fa-check:before{content:"\f00c"}.fa-chevron-up:before{content:"\f077"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-facebook:before{content:"\f09a"}.fa-twitter:before{content:"\f099"}.fa-instagram:before{content:"\f16d"}.fa-play:before{content:"\f04b"}.fa-desktop:before{content:"\f108"}.fa-file-text-o:before{content:"\f0f6"}.fa-whatsapp:before{content:"\f232"}.fa-envelope-o:before{content:"\f003"}.fa-external-link:before{content:"\f08e"}
.fa-navicon:before{margin-top:10px}
.fa-navicon{margin-top:10px}
.hero-footer{width:100%;background-size:cover}
.hero-footer{position:absolute;z-index:1;bottom:-10px;left:0;height:auto}
.hero-footer img{width:100%;height:100%}
/* Wave Effect */
#fancy-shape{clear:both;max-width:100%;display:block;position:relative;margin:0 auto 5% auto;padding:30px 0 0 0;justify-content:center;z-index:1;max-height:100px}
.footer-fancy-shape{clear:both;overflow:hidden;position:absolute;left:0;bottom:100%;width:100%;margin-bottom:-2px;direction:ltr}
.footer-fancy-shape svg{z-index:-1;display:block;position:relative;left:50%;transform:translateX(-50%)}
svg:not(:root){overflow:hidden}
.footer-fancy-shape .footer-fancy-shape-fill{fill:#fff;width:calc(100% + 2.5px);transform-origin:center;transform:rotateY(0deg)}
.footer-fancy-shape-bottom svg{width:calc(130% + 2.5px);height:125px}
.waving{overflow:hidden;position:relative;width:100%;color:#fff;font-size:0;margin:0 auto}
.waving svg{fill:#fff;width:102%;margin-left:-1%;height:auto}
.flex{display:flex;justify-content:center;align-items:center;text-align:center}
.waves{position:relative;width:100%;height:15vh;margin-bottom:-7px;min-height:100px;max-height:150px}
.waves1{position:relative;width:100%;height:15vh;min-height:80px;max-height:100px}
.content{position:relative;height:20vh;text-align:center;background-color:white}
.parallax &gt; use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}
.parallax &gt; use:nth-child(1){animation-delay:-2s;animation-duration:7s}
.parallax &gt; use:nth-child(2){animation-delay:-3s;animation-duration:10s}
.parallax &gt; use:nth-child(3){animation-delay:-4s;animation-duration:13s}
.parallax &gt; use:nth-child(4){animation-delay:-5s;animation-duration:20s}
@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}
@media (max-width:768px){.waves{height:40px;min-height:40px}}
#hero-wrapper{position:relative;float:left;width:100%;background-color:var(--hero-bg);background:url(https://2.bp.blogspot.com/-Cunhwsdp0mY/XkwPhif1ZJI/AAAAAAAABbQ/QcKYgn8WpuggeTcr90fNXlmGQE0Mpy0JwCK4BGAYYCw/s480/hero-wrapper.png), linear-gradient(135deg, var(--hero-bg-1) 40%, var(--hero-bg-2));background-blend-mode:overlay;padding:45px 0 135px;margin:0;box-shadow:var(--box-shadow)}
.hero-content{float:left;width:100%;color:var(--hero-color);text-align:center;margin:0 0 5px}
.hero-content h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px;color:#fff}
.hero-content p{display:block;font-size:16px;color:var(--hero-text-color);margin:0}
.hero-tags{float:left;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px}
.hero-tags span,.hero-tags a{display:inline-block}
.hero-tags a{color:var(--hero-text-color);margin:0 0 0 10px}
.hero-tags a:hover{color:var(--hero-color)}
.bt-wrapper{position:relative;float:left;width:100%;margin:0}
.bt-items{float:left;width:100%;margin:35px 0 45px}
.bt-item{float:left;width:100%;margin:30px 0}
.index-card{position:relative;float:left;width:calc(100% / 3);margin:35px 0 0;padding:0 15px}
.bt-items .index-card:nth-child(1),.bt-items .index-card:nth-child(2),.bt-items .index-card:nth-child(3){margin:0}
@media screen and (max-width: 640px) {
#hero-wrapper{padding:35px 0 40px}
.hero-content h1{display:initial;font-size:27px}
.hero-tags{margin:0}
.bt-items{margin:35px 0}
.index-card{width:100%}
.bt-items .index-card:nth-child(2){margin:35px 0 0}
.aff_header h2,.fc_header h3,.master-p h3{line-height:1.6em}}


Then place the following html code below the </header> code or above the id = 'wrapper'> code


  <div class='clr'/>
<div id='hero-wrapper'>
<div class='row'>
<b:if cond='data:view.isHomepage'>
<div class='container'>
<div class='hero-content'>
<h1 class='hero-title'>Happily used by 1000+ Customers.</h1>
<p class='hero-text'>Get ready for the surprise! Our Responsive Blogger Theme.</p>
</div>
<div class='hero-tags'>
<span class='tags-label'>Popular Searches:</span><a class='popular-tag' href='/search/label/Free?&amp;max-results=18'>Free Area</a>,<a class='popular-tag' href='/search/label/Members?&amp;max-results=18'>Members Area</a>
</div>
</div>
</b:if>
<b:if cond='data:view.isSearch'>
<div class='container'>
<div class='hero-content'>
<h1 class='hero-title'><data:blog.title/></h1>
<p>Get the best theme according to your needs</p>
</div>
</div>
</b:if>
<b:if cond='data:view.isSingleItem'>
<div class='container'>
<div class='hero-content'>
<h1 class='hero-title'><data:blog.pageName/></h1>
</div>
</div>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='insightly' id='vagina-ngiler'>
<a href='#main'><span/></a>
</div>
</b:if>
</div>
<div class='hero-footer'>
<svg class='waves' preserveAspectRatio='none' shape-rendering='auto' viewBox='0 24 150 28' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'/>
</defs>
<g class='parallax'>
<use fill='#efefef4d' x='48' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(242, 242, 242, 0.12)' x='48' xlink:href='#gentle-wave' y='3'/>
<use fill='rgba(255,255,255,0.3)' x='48' xlink:href='#gentle-wave' y='5'/>
<use fill='#efefef' x='48' xlink:href='#gentle-wave' y='7'/>
</g>
</svg>
</div>
</div>
  <div class='clr'/>


Save template. done