diff --git a/color-pop/index.html b/color-pop/index.html
new file mode 100644
index 00000000..59b8ec41
--- /dev/null
+++ b/color-pop/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ color Pop
+
+
+
+
+
+
+
+
diff --git a/color-pop/scripts.js b/color-pop/scripts.js
new file mode 100644
index 00000000..0551df47
--- /dev/null
+++ b/color-pop/scripts.js
@@ -0,0 +1,50 @@
+const red = document.querySelector(".red");
+const cyan = document.querySelector(".cyan");
+const violet= document.querySelector(".violet");
+const orange = document.querySelector(".orange");
+const pink= document.querySelector(".pink");
+
+const center = document.querySelector(".center");
+
+
+
+// console.log(window.getComputedStyle(red).background);
+
+const getBGColor=(selectedElements) => {
+ return window.getComputedStyle(selectedElements).backgroundColor;
+
+}
+
+ var color =getBGColor(orange);
+
+
+ orange.addEventListener("click" ,() => {
+ center.style.background = organeELementColor;
+ });
+
+ const colorPoper = (element, color) =>{
+ element.addEventListener("mouseenter" ,() => {
+ center.style.background = color;
+ });
+ }
+
+
+ colorPoper(red, getBGColor(red));
+ colorPoper(cyan, getBGColor(cyan));
+ colorPoper(violet, getBGColor(violet));
+ colorPoper(orange, getBGColor(orange));
+ colorPoper(pink, getBGColor(pink));
+ colorPoper(red, getBGColor(red));
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/color-pop/style.css b/color-pop/style.css
new file mode 100644
index 00000000..0c8124fe
--- /dev/null
+++ b/color-pop/style.css
@@ -0,0 +1,62 @@
+body {
+ background: rgb(66, 66, 66);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+.red {
+ background: #e44236;
+ margin-right: 5px;
+}
+.cyan {
+ background: #25ccf7;
+ margin-right: 5px;
+}
+.violet {
+ background: #8b78e6;
+ margin-right: 5px;
+}
+.orange {
+ background: #ea7773;
+ margin-right: 5px;
+}
+.pink {
+ background: #bb2cd9;
+}
+
+.center {
+ min-width: 400px;
+ height: 400px;
+ background: rgb(66, 66, 66);
+ border-radius: 100%;
+ transition: 0.5s ease-in-out;
+}
+.color-hover {
+ position: absolute;
+ top: 10%;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+}
+.text {
+ padding: 10px;
+ color: #ffffff;
+}
+.color {
+ width: 120px;
+ height: 30px;
+ border-radius: 5%;
+ margin-bottom: 30px;
+}
+.color:hover {
+ cursor: pointer;
+}
+.color:last-child {
+ margin-bottom: 0;
+}