Planète animée style01

<!DOCTYPE html>
<html>
<head>
    <title>PLANET ANIMÉE STYLE01 | par MEZGANI SAID</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="PLANET ANIMÉE STYLE01">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="style.css" type="text/css">   
</head>
<body>
<div class="planet-holder">
  <div class="planet">
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
    <div class="cloud"></div>
  </div>
  <div class="outer">
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
    <div class="outerClouds"></div>
  </div>
  <div class="text">NGLESSON.COM</div>
</div>
</body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Exo&display=swap");
* {
	 margin: 0;
	 padding: 0;
}
 body {
	 background: black;
	 height: 100vh;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 font-family: "Exo", sans-serif;
}
 .planet-holder {
	 position: relative;
	 padding: 113px;
	 border-radius: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 overflow: hidden;
	 transform: scale(0);
	 animation: planetScale 0.5s cubic-bezier(0.64, 0.57, 0.67, 1.53) forwards;
}
 @keyframes planetScale {
	 to {
		 transform: scale(1);
	}
}
 .planet-holder .outer {
	 position: absolute;
	 height: 100%;
	 width: 100%;
}
 .planet-holder .outer .outerClouds:nth-child(1) {
	 position: absolute;
	 width: 134px;
	 height: 31px;
	 background: #b50086;
	 border-radius: 16px;
	 left: 8%;
	 top: 52%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 5s linear infinite 0.5s;
}
 .planet-holder .outer .outerClouds:nth-child(2) {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 background: #b50086;
	 border-radius: 100px;
	 left: 23%;
	 top: 72%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds2 10s linear infinite 0.5s;
}
 .planet-holder .outer .outerClouds:nth-child(3) {
	 position: absolute;
	 width: 178px;
	 height: 27px;
	 background: #efe933;
	 border-radius: 16px;
	 left: 24%;
	 top: 2%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 6s linear infinite 1.2s;
}
 .planet-holder .outer .outerClouds:nth-child(4) {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 background: #efe933;
	 border-radius: 100px;
	 left: 81%;
	 top: 55%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds2 9s linear infinite 0.8s;
}
 .planet-holder .outer .outerClouds:nth-child(5) {
	 position: absolute;
	 width: 135px;
	 height: 45px;
	 background: #9a5edc;
	 border-radius: 100px;
	 left: 42%;
	 top: 84%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 4s linear infinite 0.6s;
}
 .planet-holder .outer .outerClouds:nth-child(6) {
	 position: absolute;
	 width: 135px;
	 height: 45px;
	 background: #3fe279;
	 border-radius: 100px;
	 left: 12%;
	 top: 29%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds 7s linear infinite 1.2s;
}
 .planet-holder .outer .outerClouds:nth-child(7) {
	 position: absolute;
	 width: 25px;
	 height: 25px;
	 background: #efe933;
	 border-radius: 100px;
	 left: 49%;
	 top: 10%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: outerClouds2 7s linear infinite 1.1s;
}
 @keyframes outerClouds {
	 from {
		 transform: rotate(-20deg) translate(-150%);
	}
	 to {
		 transform: rotate(-20deg) translate(400px);
	}
}
 @keyframes outerClouds2 {
	 0% {
		 transform: rotate(-20deg) translate(-150%);
	}
	 50% {
		 transform: rotate(-20deg) translate(110%);
	}
	 100% {
		 transform: rotate(-20deg) translate(-150%);
	}
}
 .planet-holder .planet {
	 position: relative;
	 width: 200px;
	 height: 200px;
	 background: #dd008d;
	 background: linear-gradient(345deg, rgba(221, 0, 141, 1) 0%, rgba(87, 87, 221, 1) 87%);
	 border-radius: 100%;
	 overflow: hidden;
}
 .planet-holder .planet .cloud:nth-child(1) {
	 position: absolute;
	 width: 120px;
	 height: 39px;
	 background: #56bbbb;
	 border-radius: 21px;
	 top: 46%;
	 left: 41%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 7s linear infinite;
}
 .planet-holder .planet .cloud:nth-child(2) {
	 position: absolute;
	 width: 28px;
	 height: 28px;
	 background: #ff64e5;
	 border-radius: 16px;
	 top: 3%;
	 left: 31%;
	 transform: rotate(-20deg) translate(-180%);
	 animation: innerClouds2 5s linear infinite;
}
 .planet-holder .planet .cloud:nth-child(3) {
	 position: absolute;
	 width: 148px;
	 height: 17px;
	 background: #ff64e5;
	 border-radius: 16px;
	 top: 80%;
	 left: 27%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 8s linear infinite 2s;
}
 .planet-holder .planet .cloud:nth-child(4) {
	 position: absolute;
	 width: 148px;
	 height: 17px;
	 background: #56bbbb;
	 border-radius: 16px;
	 left: 8%;
	 top: 16%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 8s linear infinite 1s;
}
 .planet-holder .planet .cloud:nth-child(5) {
	 position: absolute;
	 width: 35px;
	 height: 35px;
	 background: #18e08d;
	 border-radius: 100%;
	 top: 53%;
	 left: 60%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds2 8s linear infinite;
}
 .planet-holder .planet .cloud:nth-child(6) {
	 left: 22%;
	 position: absolute;
	 width: 148px;
	 height: 25px;
	 background: #18e08d;
	 border-radius: 16px;
	 top: 31%;
	 transform: rotate(-20deg) translate(-150%);
	 animation: innerClouds 7s linear infinite 4s;
}
 @keyframes innerClouds {
	 from {
		 transform: rotate(-20deg) translate(-150%);
	}
	 to {
		 transform: rotate(-20deg) translate(110%);
	}
}
 @keyframes innerClouds2 {
	 0% {
		 transform: rotate(-20deg) translate(-150%);
	}
	 50% {
		 transform: rotate(-20deg) translate(110%);
	}
	 100% {
		 transform: rotate(-20deg) translate(-150%);
	}
}
 .planet-holder .text {
	 color: #fff;
	 border-top: 4px solid #fff;
	 border-bottom: 4px solid #fff;
	 text-align: center;
	 padding: 15px 0;
	 padding-top: 15px;
	 padding-right: 0px;
	 padding-bottom: 15px;
	 padding-left: 0px;
	 font-size: 25px;
	 width: 290px;
	 position: absolute;
	 transform: rotate(25deg) scale(0);
	 animation: titleAnim 0.5s cubic-bezier(0.24, 0.97, 0.37, 1.53) forwards 0.5s;
}
 @keyframes titleAnim {
	 0% {
		 transform: rotate(25deg) scale(0);
	}
	 45% {
		 transform: rotate(-5deg) scale(1);
	}
	 85% {
		 transform: rotate(5deg) scale(1);
	}
	 100% {
		 transform: rotate(0deg) scale(1);
	}
}

                                    
Nav Menu style01

Nav Menu style01

Input file style01

Input file style01

Image hover Inspiration styles

Image hover Inspiration styles

Image hover 06

Image hover 06

Image hover 04

Image hover 04

Google Style Login

Google Style Login

Form login with background image changed style01

Form login with background image changed style01

Form Création de compte style animée

Form Création de compte style animée

Css Page grid layout

Css Page grid layout

Create icon animate with svg

Create icon animate with svg

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery