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 ]]> code or   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 code or above the id = 'wrapper'> code

 
 
 
 
 
   
                       
 
The place to share tips about bloggers and other information
 
 Browse Themes
    
 
  
   
 
 
  
 

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 ]]> code or   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 > use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite} .parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s} .parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s} .parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s} .parallax > 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgct6NjUNAlOWhyphenhyphen09mrDa9T9VfNfn9HawkMr8GsY5_27v-UsT3FGjdWXpj7vQi-LXc3OUNs1hI8miXck9IAx2dqcR2U67eR1uCK9l2lWJLfz1tw-yPmh09wt53jvoXFJx3mSh9V6T7cqquI/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 code or above the id = 'wrapper'> code

   
 
 
  
 
 
Happily used by 1000+ Customers.
 
Get ready for the surprise! Our Responsive Blogger Theme.
 
 
 Popular Searches:Free Area,Members Area 
 
   
 
 
 
Get the best theme according to your needs
 
 
   
 
 
 
 
   
  
  
 
  
 
   
 

Save template. done