Creating an Eye-catching Hero Section with SVG Wave Animation and Video Background using HTML CSS

0









Hello developers, Are you looking to create an eye-catching and dynamic hero section for your website? Look no further than the combination of SVG wave animation and video background. SVG wave animation can add a wave-like motion to your hero section, giving it a unique and lively feel. Meanwhile, a video background can add depth and movement to your page, making it stand out from the rest. To make the most of these effects, consider using a bold h2 header text and a brief description of your website or business. This will draw visitors in and encourage them to explore further. To make it easy for visitors to engage with your site, include two buttons at the bottom of your hero section. One button can be labeled "Contact Us" to encourage visitors to reach out to you directly, while the other can be labeled "Explore Packages" to encourage visitors to learn more about your offerings. By using SVG wave animation and video background, along with strong headers and buttons, you can create a hero section that is both engaging and effective. So why wait? Start experimenting with these effects and see how they can help you take your website to the next level.

Creating an Eye-catching Hero Section with SVG Wave Animation and Video Background using HTML CSS[Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Animate Video Background Hero Section</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="newHero"> <h2>Using Sail Training to Inspire & Change Lives</h2> <p>Morvargh Sailing Project is a youth development organisation that helps young people become more confident, more resilient, more motivated and better able to communicate though volunteer led, life-changing sail training voyages.</p> <div class="buttons"> <button class="contactus">Contact us</button> <button class="Explore">Explore Package</button> </div> <video class="video-bg" autoplay muted loop> <source src="https://player.vimeo.com/external/413229662.hd.mp4?s=26815ea7e1ba43aa54042b394780fbde2ad33d02&profile_id=174" type="video/mp4" > </video> </div> <div class="waves"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none"> <defs> <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"> </defs> <g class="wave1"> <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)"> </g> <g class="wave2"> <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)"> </g> <g class="wave3"> <use xlink:href="#wave-path" x="50" y="9" fill="#0F2027"> </g> </svg> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body{
  background: #0F2027;
  font-family: Arial, sans-serif;
}

html, body {
  height: 100%;
}
.newHero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(160deg, rgba(46, 59, 78,1), rgba(16, 238, 79, 0.3));
  /*background: rgba(46, 59, 78, 0.85);*/
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 85vh;
}
.newHero h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
  max-width: 550px;
  font-family: 'Caveat', cursive;
}
.newHero p {
  max-width: 550px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.newHero a {
  font-size: 20px;
  transition: 0.5s;
  margin-left: 25px;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.newHero a:hover i {
  color: #fff;
}   

.newHero i {
  color: rgba(255, 255, 255, 0.5);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 12px;
}
.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contactus,
.Explore {
  padding: 20px 30px;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
}

.contactus {
  background-color: #0F2027;
}

.Explore {
  background-color: #CAC531;
  color:#0F2027;
}
.video-bg {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.waves {
  height: 60px;
  width: 100%;
  margin-top: -30px;
  z-index: 10;
  position: relative;
}

.wave1 use {
  -webkit-animation: move-forever1 10s linear infinite;
  animation: move-forever1 10s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave2 use {
  -webkit-animation: move-forever2 8s linear infinite;
  animation: move-forever2 8s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave3 use {
  -webkit-animation: move-forever3 6s linear infinite;
  animation: move-forever3 6s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@-webkit-keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@-webkit-keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}
.credit a {
  text-decoration: none;
  color: #CAC531;
  font-weight: 800;
}

.credit {
    color: #fff;
  text-align: center;
  margin-top: 10px;
  font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Eye-catching Hero Section with SVG Wave Animation and Video Background using HTML CSS.

Thank you for reading our blog. If you face any problem in creating Eye-catching Hero Section with SVG Wave Animation and Video Background using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome