OUTPUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navratri Colors(by rsportfolio)</title>
<!---Bootsrap CDN-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
body {
background-color: #fff3e0;
padding: 20px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.main-container {
border: 3px solid #ff9800;
border-radius: 15px;
padding: 20px;
max-width: 500px;
margin: 0 auto;
background: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
h2 {
color: #d32f2f;
font-weight: bold;
text-shadow: 2px 2px 5px #ffb74d;
margin-bottom: 20px;
text-align: center;
}
.devi-container {
position: relative;
display: block;
width: 100%;
margin-bottom: 20px;
}
.devi-base {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
.saree-color {
position: absolute;
top: 30%;
left: -1%;
height: 51%;
width: 100%;
mix-blend-mode: multiply;
transition: background-color 0.5s ease;
-webkit-mask: url("saree.png") no-repeat center/contain;
mask: url("saree.png") no-repeat center/contain;
background: red;
}
select {
width: 100%;
padding: 12px;
font-size: 1.1rem;
border-radius: 8px;
border: 2px solid #ff9800;
background-color: #fff8e1;
color: #d32f2f;
font-weight: bold;
transition: all 0.3s ease;
}
select:hover {
background-color: #fff3e0;
border-color: #f57c00;
}
select:focus {
outline: none;
border-color: #d32f2f;
box-shadow: 0 0 8px rgba(211, 47, 47, 0.5);
}
</style>
</head>
<body>
<div class="main-container text-center">
<h2>✨Nine Colors of Navratri✨</h2>
<div class="devi-container">
<img
src="devi_mata.png"
alt="Devi mata"
class="devi-base"
style="z-index: 999 !important; position: relative"
/>
<div class="saree-color" id="sareecolor"></div>
</div>
<select id="navratriDay">
<option value="white">Day 1 - White (Maa Shailputri)</option>
<option value="red">Day 2 - Red (Maa Brahmacharini)</option>
<option value="blue">Day 3 - Blue (Maa Chandraghanta)</option>
<option value="yellow">Day 4 - Yellow (Maa Kushmanda)</option>
<option value="green">Day 5 - Green (Maa Skandamata)</option>
<option value="grey">Day 6 - Grey (Maa Katyayani)</option>
<option value="orange">Day 7 - Orange (Maa Katyayani)</option>
<option value="teal">Day 8 - Peacock Green (Maa Kalaratri)</option>
<option value="pink">Day 9 - Pink (Maa Mahagauri)</option>
<!-- <option value="redorange">Day 10 - Red/Orange (Maa Siddhidatri)</option> -->
</select>
</div>
<script>
const saree = document.getElementById("sareecolor");
console.log(saree);
const select = document.getElementById("navratriDay");
console.log(select);
function changeSareeColor(color) {
if (color === "pink") {
saree.style.background = "pink";
} else {
saree.style.background = color;
}
}
select.addEventListener("change", () => {
changeSareeColor(select.value);
console.log(select.value);
});
//set default color
changeSareeColor(select.value);
</script>
</body>
</html>