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.
@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;
}
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
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.
In Our older post it doesnot work we working on that.
إرسال تعليق
Thank you
Learning robo team