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);
	}
}

                                    
Table responsive avec css native

Table responsive avec css native

Page 404 exemple 01

Page 404 exemple 01

Nav Menu style02

Nav Menu style02

Menu aside style01 slide out

Menu aside style01 slide out

Manual Slideshow

Manual Slideshow

Input range slider HTML style05

Input range slider HTML style05

Image hover style border top

Image hover style border top

Image hover effects style

Image hover effects style

Drag and drop or upload input file

Drag and drop or upload input file

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Card Profile Style01

Card Profile Style01

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS