diff --git a/Calculator/cal.css b/Calculator/cal.css index 25bad49..06383d8 100644 --- a/Calculator/cal.css +++ b/Calculator/cal.css @@ -1,64 +1,90 @@ -body{ - background-image: url(c10.jpg); - background-repeat: no-repeat; - height: 100%; - width: 100%; - overflow: hidden; - background-position: center; - background-size: cover; +/* Body Dark Gradient Background */ +body { + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #1e1e2f, #2c2c3e, #1a1a2b); + background-size: 400% 400%; + animation: gradientShift 20s ease infinite; + color: #ffffff; } -button{ - width: 200px; - height: 50px; - margin: 2px 2px; - background-color: blue; - color: #fff4a7; - border-radius: 20px; - font-weight: bolder; - font-style: italic; - font-size: larger; + +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } -#outside{ - color: white; - border-radius: 5px; - margin: auto; - margin-top: 100px; - width: 1000px; - height: 600px; - padding: 5px; + +/* Calculator Container (Dark Glass Card) */ +#outside { + background: rgba(30, 30, 40, 0.85); + backdrop-filter: blur(15px); + border-radius: 25px; + padding: 30px; + width: 400px; + text-align: center; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); } -#heading{ - margin: auto; - width: 412px; - font-size: xxx-large; + +/* Heading */ +#heading { + font-family: 'Poppins', sans-serif; + font-size: 2.5rem; + font-weight: 800; + color: #FFD580; /* warm gold accent */ + text-shadow: 2px 2px 10px rgba(0,0,0,0.5); + letter-spacing: 1px; + margin-bottom: 25px; } -#btn{ - margin: auto; - margin-top: 20px; - width: 815px; + +/* Value and Result Display */ +#val, #res { + width: 90%; + margin: 10px auto; + padding: 12px 15px; + text-align: right; + font-weight: bold; + font-size: 1.3rem; + border-radius: 15px; + background: rgba(50, 50, 60, 0.9); + color: #FFD580; /* accent color for numbers */ + box-shadow: inset 0 4px 8px rgba(0,0,0,0.5); } -.btn-inside{ - width: 900px; + +/* Button Rows */ +.btn-inside { + display: flex; + justify-content: center; + margin-bottom: 10px; } -#val{ - /* border: 2px solid red; */ + +/* Buttons Dark Theme */ +button { + width: 70px; height: 55px; - width: 783px; - margin-left: 100px; - color: white; - padding-left: 37px; - padding-top: 20px; - font-weight: bolder; + margin: 5px; + background: linear-gradient(135deg, #3a3a4f, #50506a); + color: #FFD580; /* gold accent text */ + border: none; + border-radius: 15px; + font-size: 1.2rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 8px rgba(0,0,0,0.6); } -#res{ - /* border: 2px solid red; */ - height: 50px; - width: 783px; - margin-left: 100px; - color: white; - padding-left: 37px; - padding-top: 25px; - font-weight: bolder; - font-size: x-large; + +button:hover { + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(0,0,0,0.7); + background: linear-gradient(135deg, #50506a, #3a3a4f); } +/* Single dot button */ +#btn > button { + width: 70px; +} diff --git a/Calculator/cal.html b/Calculator/cal.html index 84a65f1..a682384 100644 --- a/Calculator/cal.html +++ b/Calculator/cal.html @@ -11,7 +11,7 @@
-

🖩CALCULATOR🖩

+

🖩 CALCULATOR 🖩