Lottie Animation
Get Waves
Haikei
UI Gradients
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- <div class="rec" id="bg1"></div>
<div class="rec" id="bg2"></div>
<div class="rec" id="bg3"></div>
<div class="rec" id="bg4"></div> -->
<!--
<div class="gradiant"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#e7008a" fill-opacity="1"
d="M0,256L20,218.7C40,181,80,107,120,85.3C160,64,200,96,240,133.3C280,171,320,213,360,234.7C400,256,440,256,480,218.7C520,181,560,107,600,90.7C640,75,680,117,720,144C760,171,800,181,840,181.3C880,181,920,171,960,170.7C1000,171,1040,181,1080,170.7C1120,160,1160,128,1200,133.3C1240,139,1280,181,1320,202.7C1360,224,1400,224,1420,224L1440,224L1440,320L1420,320C1400,320,1360,320,1320,320C1280,320,1240,320,1200,320C1160,320,1120,320,1080,320C1040,320,1000,320,960,320C920,320,880,320,840,320C800,320,760,320,720,320C680,320,640,320,600,320C560,320,520,320,480,320C440,320,400,320,360,320C320,320,280,320,240,320C200,320,160,320,120,320C80,320,40,320,20,320L0,320Z">
</path>
</svg> -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_7ff3zmhs.json" background="transparent" speed="1"
style="width: 500px; height: 500px; margin: auto;" loop autoplay></lottie-player>
</body>
</html>
Style.css
/* .rec {
height: 1000px;
width: 100%;
margin: auto;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
body {
padding: 0px;
margin: 0px;
}
#bg1 {
background-color: black;
background-image: url("../images/1.jpg");
}
#bg2 {
background-color: blue;
background-image: url("../images/2.jpg");
}
#bg3 {
background-color: aqua;
background-image: url("../images/3.jpg");
}
#bg4 {
background-color: red;
background-image: url("../images/4.jpg");
} */
.gradiant {
height: 500px;
width: 100%;
margin: auto;
/* background-color: black; */
/* background: linear-gradient(to right, #6a9113, #141517); */
/* background: radial-gradient(
closest-side at 60% 55%,
#6a9113,
#141517,
red 60%
); */
background: conic-gradient(red, blue);
}
Comments
Post a Comment