<!-- CODE = #A003 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>NETBYZZ A003</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9DHYoUAJWbuMhteUDEwZLy0CwMoc5GGYkE5GcdUw9HfIZMFn-roZboroOT9cquCP0LT69wlZswyRdaoZDSb91V-9LNhOjEZpgRH9YdfjCMz0g3q8oDSUG9G_3JDMH3xFx5ezKF0BwTlfpQzB7gE2ZYps3JQTVfcP_FtLvmd8Z-2RyVvYu2P8xtsC25W8/s600/Netbyzz.png" alt="Netbyzz Logo" class="Netbyzz">
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
.Netbyzz {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 4%;
/* Adjust the size of the logo */
}
.container {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
height: 96px;
width: 96px;
animation: rotate_3922 1.2s linear infinite;
background-color: #9b59b6;
background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}
.container span {
position: absolute;
border-radius: 50%;
height: 100%;
width: 100%;
background-color: #9b59b6;
background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}
.container span:nth-of-type(1) {
filter: blur(5px);
}
.container span:nth-of-type(2) {
filter: blur(10px);
}
.container span:nth-of-type(3) {
filter: blur(25px);
}
.container span:nth-of-type(4) {
filter: blur(50px);
}
.container::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: #fff;
border: solid 5px #ffffff;
border-radius: 50%;
}
@keyframes rotate_3922 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}