Landing page Frontend
<title>Cars</title> <style> *{ margin: 0; padding: 0; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } header{ background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(wal.jpg); height: 100vh; background-size: cover; background-position: center;} ul{ float:right; }
ul li{ list-style: none; display: inline-block; margin-top: 30px; }
ul li a{ text-decoration: none; color: white; padding: 5px 20px; border-radius: 100px; transition: 0.6s ease; /* background: linear-gradient(90deg,#03a9f4, #f441a5,#ffeb3b,#03a9f4); background-size: 400%; */
}
ul li a:hover{
animation: animate 8s linear infinite;
color: black;
background: linear-gradient(90deg,#03a9f4, #f441a5,#ffeb3b,#03a9f4);
background-size: 400%;
z-index: 1;
} .main .logo{ animation: animate 8s linear infinite; color: black; background: linear-gradient(90deg,#03a9f4, #f441a5,#ffeb3b,#03a9f4); background-size: 400%; z-index: 1; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } a:before{ content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; z-index: -1; background: linear-gradient(90deg,#03a9f4, #f441a5,#ffeb3b,#03a9f4); background-size: 400%; filter: blur(20px); opacity: 0; transition: 0.5s; } a:hover:before{ filter: blur(20px); opacity: 1; animation: animate 8s linear infinite;
} .logo img{ float: left; width: 150px; margin-top: 15px;
} .main{ max-width: 1200px; margin: auto; } .title{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .title h1{ font-size: 200px; color:white; } .button{ position: absolute; top: 70%; left: 50%; transform: translate(-50%,-50%);
} .btn{ border: 1px solid white; padding: 10px 30px; color: white; text-decoration: none; transition: 0.6s ease; } .btn:hover{ color: yellowgreen; background-color: rgb(22, 1, 1);
} .aud { position: absolute; top: 88%; left: 50%; transform: translate(-50%,-50%);
}
#bar1{ transform: translateY(-4px); } #bar3{ transform: translateY(4px); } .change .bar{ background-color: white; } .change #bar1{ transform: translateY(4px) rotateZ(-45deg); } .change #bar3{ transform: translateY(-6px) rotate(45deg); } .change #bar2{ opacity: 0; } </style>
</div>
<div class="title"><h1>Cars</h1>
</div>
<div class="button">