diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 00000000..a0ccf77b
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Environment-dependent path to Maven home directory
+/mavenHomeManager.xml
diff --git a/.idea/ProjectHive.iml b/.idea/ProjectHive.iml
new file mode 100644
index 00000000..d6ebd480
--- /dev/null
+++ b/.idea/ProjectHive.iml
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 00000000..639900d1
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..1f980baf
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..35eb1ddf
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Domains/Frontend/MiniProjects/CSSCLOUDS/README.md b/Domains/Frontend/MiniProjects/CSSCLOUDS/README.md
new file mode 100644
index 00000000..63ff6343
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/CSSCLOUDS/README.md
@@ -0,0 +1,52 @@
+# ☁️ CSS 2D Cloud Animation — Frontend Mini Project 🌤️
+
+A soothing **pure CSS animation project** that brings a peaceful sky to life with drifting 2D clouds.
+Designed to showcase how simple shapes, gradients, and keyframes can create a realistic animation effect — all without JavaScript!
+
+---
+
+## ✨ Features (MVP)
+- 🌈 Gradient sky background with depth
+- ☁️ Smoothly floating layered clouds using CSS keyframes
+- 💨 Responsive layout (works on all screen sizes)
+- 💻 Lightweight and pure HTML + CSS project
+- 🧩 Perfect for creative front-end contributions
+
+---
+
+## 🧠 Tech Stack
+**Frontend:** HTML, CSS
+**Animation:** CSS `@keyframes`, `transform`, `animation-duration`
+
+---
+
+## ⚙️ Getting Started
+
+### 1️⃣ Clone the Repository
+```bash
+
+git clone https://github.com/shwetharbaliga/CSS-CLOUD-ANIMATION.git
+cd CSS-CLOUD-ANIMATION
+```
+
+### 2️⃣ Run the Project
+
+Just open index.html in your browser — no setup needed!
+Sit back and watch your clouds drift peacefully across the sky ☁️✨
+
+## 📂 Project Structure
+```
+CSS-CLOUD-ANIMATION/
+│
+├── index.html
+├── style.css
+└── README.md
+```
+
+🧡 Credits
+
+Built by Shweta Ravindra Baliga
+
+👩💻 Contributor
+
+Contributor: shwetharbaliga
diff --git a/Domains/Frontend/MiniProjects/CSSCLOUDS/src/index.html b/Domains/Frontend/MiniProjects/CSSCLOUDS/src/index.html
new file mode 100644
index 00000000..e6a3e5f7
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/CSSCLOUDS/src/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ CSS 2D Cloud Animation
+
+
+
+
+
+
diff --git a/Domains/Frontend/MiniProjects/CSSCLOUDS/src/style.css b/Domains/Frontend/MiniProjects/CSSCLOUDS/src/style.css
new file mode 100644
index 00000000..f607d42f
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/CSSCLOUDS/src/style.css
@@ -0,0 +1,220 @@
+body {
+ margin: 0;
+ padding: 0;
+ background-color:#A8F1FF;
+}
+.cloud{
+ transform: translateX(-250px);
+ top:60px;
+ width:140px;
+ height:40px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud::before{
+ content:'';
+ position:absolute;
+ width:40px;
+ height:35px;
+ background:#fff;
+ border-radius:50%;
+ top:-16px;
+ left:15px;
+}
+.cloud::after{
+ content:'';
+ position:absolute;
+ width:80px;
+ height:80px;
+ background:#fff;
+ border-radius:50%;
+ top:-40px;
+ right:15px;
+}
+.cloud-one{
+ transform: translateX(-250px);
+ top:120px;
+ width:140px;
+ height:40px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud-one::before{
+ content:'';
+ position:absolute;
+ width:40px;
+ height:35px;
+ background:#fff;
+ border-radius:50%;
+ top:-16px;
+ left:15px;
+}
+.cloud-one::after{
+ content:'';
+ position:absolute;
+ width:80px;
+ height:80px;
+ background:#fff;
+ border-radius:50%;
+ top:-40px;
+ right:15px;
+}
+.cloud-two{
+ transform: translateX(-250px);
+ top:20px;
+ width:140px;
+ height:40px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud-two::before{
+ content:'';
+ position:absolute;
+ width:40px;
+ height:35px;
+ background:#fff;
+ border-radius:50%;
+ top:-16px;
+ left:15px;
+}
+.cloud-two::after{
+ content:'';
+ position:absolute;
+ width:80px;
+ height:80px;
+ background:#fff;
+ border-radius:50%;
+ top:-40px;
+ right:15px;
+}
+.cloud-lg{
+ transform: translateX(-250px);
+ top:10px;
+ width:170px;
+ height:50px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud-lg::before{
+ content:'';
+ position:absolute;
+ width:60px;
+ height:55px;
+ background:#fff;
+ border-radius:50%;
+ top:-35px;
+ left:15px;
+}
+.cloud-lg::after{
+ content:'';
+ position:absolute;
+ width:110px;
+ height:110px;
+ background:#fff;
+ border-radius:50%;
+ top:-60px;
+ right:15px;
+}
+.cloud-sm{
+ transform: translateX(-250px);
+ top:60px;
+ width:80px;
+ height:20px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud-sm::before{
+ content:'';
+ position:absolute;
+ width:20px;
+ height:20px;
+ background:#fff;
+ border-radius:50%;
+ top:-13px;
+ left:10px;
+}
+.cloud-sm::after{
+ content:'';
+ position:absolute;
+ width:50px;
+ height:45px;
+ background:#fff;
+ border-radius:50%;
+ top:-27px;
+ right:5px;
+}
+.cloud-sm1{
+ transform: translateX(-250px);
+ top:-120px;
+ width:80px;
+ height:20px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud-sm1::before{
+ content:'';
+ position:absolute;
+ width:20px;
+ height:20px;
+ background:#fff;
+ border-radius:50%;
+ top:-13px;
+ left:10px;
+}
+.cloud-sm1::after{
+ content:'';
+ position:absolute;
+ width:50px;
+ height:45px;
+ background:#fff;
+ border-radius:50%;
+ top:-27px;
+ right:5px;
+}
+.cloud-sm2{
+ transform: translateX(-250px);
+ top:30px;
+ width:80px;
+ height:20px;
+ background:#fff;
+ border-radius:50px;
+ position:relative;
+}
+.cloud-sm2::before{
+ content:'';
+ position:absolute;
+ width:20px;
+ height:20px;
+ background:#fff;
+ border-radius:50%;
+ top:-13px;
+ left:10px;
+}
+.cloud-sm2::after{
+ content:'';
+ position:absolute;
+ width:50px;
+ height:45px;
+ background:#fff;
+ border-radius:50%;
+ top:-27px;
+ right:5px;
+}
+@keyframes float {
+ 0% { transform: translateX(-250px); }
+ 90% { transform: translateX(100vw); }
+ 100% { transform: translateX(100vw); }
+}
+.cloud { animation: float 60s linear infinite; animation-delay: 0s; }
+.cloud-one { animation: float 60s linear infinite; animation-delay: 10s; }
+.cloud-two { animation: float 60s linear infinite; animation-delay: 20s; }
+.cloud-lg { animation: float 70s linear infinite; animation-delay: 30s; }
+.cloud-sm { animation: float 50s linear infinite; animation-delay: 5s; }
+.cloud-sm1 { animation: float 55s linear infinite; animation-delay: 45s; }
+.cloud-sm2 { animation: float 65s linear infinite; animation-delay: 25s; }