diff --git a/Calculators/General-Root-Calculator/README.md b/Calculators/General-Root-Calculator/README.md index e9784eb67..e62476f93 100644 --- a/Calculators/General-Root-Calculator/README.md +++ b/Calculators/General-Root-Calculator/README.md @@ -12,4 +12,4 @@ Welcome to the Root Calculator, a simple tool that calculates the nth root of a ## Screenshots :- -![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/2b7303a3-11ec-4c9e-a9fb-316d43809ec6) +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/5a292fea-96d2-485c-a23d-e5b66a235195) diff --git a/Calculators/General-Root-Calculator/style.css b/Calculators/General-Root-Calculator/style.css index 8517273b4..a52c0e2f5 100644 --- a/Calculators/General-Root-Calculator/style.css +++ b/Calculators/General-Root-Calculator/style.css @@ -1,42 +1,47 @@ -html { - background-color: rgb(62, 62, 62); -} - body { font-family: Arial, sans-serif; - text-align: center; - margin-top: 50px; - background-color: transparent; + background-color: #45d4ea; + margin: 0; + padding: 0; +} + +.container { + width: 90%; + max-width: 600px; + margin: 50px auto 20px auto; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background-color: #fff; + display: flex; /* Use flexbox for centering */ + flex-direction: column; /* Stack child elements vertically */ + align-items: center; /* Center children horizontally */ } h1 { color: #333; + margin-bottom: 20px; } -.container { - width: 50%; - margin: 0 auto; - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +input[type="number"], button { + padding: 12px 20px; + margin: 10px 0; + width: calc(100% - 40px); /* Adjust for padding */ + font-size: 16px; + border: none; + border-radius: 6px; + box-sizing: border-box; } input[type="number"] { - padding: 8px; - margin: 10px; - width: 200px; - font-size: 16px; + background-color: #eee; } button { - padding: 10px 20px; - font-size: 16px; - cursor: pointer; background-color: #4CAF50; color: white; - border: none; - border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; } button:hover { @@ -47,4 +52,13 @@ button:hover { margin-top: 20px; font-size: 18px; color: #333; -} \ No newline at end of file + font-weight: bold; + text-align: center; +} + +/* Responsive layout */ +@media screen and (max-width: 600px) { + .container { + width: 90%; + } +}