+
\ No newline at end of file
diff --git a/src/css/components/clouds.css b/src/css/components/clouds.css
new file mode 100644
index 0000000..12e5fcc
--- /dev/null
+++ b/src/css/components/clouds.css
@@ -0,0 +1,60 @@
+.clouds-zone {
+ top: 70px;
+ inset-inline: 0;
+ position: absolute;
+ z-index: -1;
+}
+
+@keyframes animateCloud {
+ 0% { margin-left: -1000px; }
+ 100% { margin-left: 100%; }
+}
+
+.cloud--item {
+ animation: animateCloud var(--delay, 35s) linear infinite;
+ transform: scale(var(--scale, .5));
+}
+
+.cloud {
+ position: relative;
+
+ background: var(--cloud-color-primary, var(--color-neutral-50));
+
+ border-radius: 100px;
+
+ box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
+
+ height: 120px;
+ width: 350px;
+}
+
+.cloud:after, .cloud:before {
+ background: var(--cloud-color-primary, var(--color-neutral-50));
+ content: '';
+ position: absolute;
+ z-indeX: -1;
+}
+
+.cloud:after {
+ border-radius: 100px;
+
+ height: 100px;
+ left: 50px;
+ top: -50px;
+ width: 100px;
+}
+
+.cloud:before {
+ border-radius: 200px;
+
+ height: 180px;
+ right: 50px;
+ top: -90px;
+ width: 180px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .clouds-zone {
+ display: none;
+ }
+}
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+