From d9c81caa8286a3ec73252df83904ff1a95153eea Mon Sep 17 00:00:00 2001 From: Agastya Kumar Yadav <124435030+agastya3636@users.noreply.github.com> Date: Sat, 1 Jun 2024 13:21:31 +0530 Subject: [PATCH 1/7] made the weather calculator responsive --- Calculators/Weather-Calculator/style.css | 97 +++++++++++++++++++++--- 1 file changed, 86 insertions(+), 11 deletions(-) diff --git a/Calculators/Weather-Calculator/style.css b/Calculators/Weather-Calculator/style.css index 26b4b65b6..f62167aec 100644 --- a/Calculators/Weather-Calculator/style.css +++ b/Calculators/Weather-Calculator/style.css @@ -5,37 +5,46 @@ body { align-items: center; height: 100vh; margin: 0; - background: radial-gradient(#a07eff,#ffffff) ; + background: radial-gradient(#a07eff, #ffffff); } .container { text-align: center; width: 30%; + max-width: 100%; background: #fff; padding: 20px; border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } -.container h1{ - font-family:'Lucida Sans', Arial, sans-serif; - color:#4f1591; +.container h1 { + font-family: 'Lucida Sans', Arial, sans-serif; + color: #4f1591; font-size: 30px; + margin-bottom: 20px; } -.container h2, h3, h4{ +.container h2, +h3, +h4 { font-size: 15px; text-align: left; margin-left: 10px; + margin-bottom: 10px; } input[type="number"] { display: block; - width: 90%; + width: 100%; + max-width: calc(100% - 10px); text-align: center; padding: 10px; - margin: 10px 5px; + margin: 10px 0; border: 1px solid #ccc; border-radius: 50px; + font-size: 16px; + box-sizing: border-box; } input[type="number"]:hover { @@ -60,8 +69,10 @@ button:hover { .resultsContainer { background-color: rgb(255, 230, 221); border-radius: 8px; - border-right:3px solid #484848; - border-bottom:3px solid #484848; + border-right: 3px solid #484848; + border-bottom: 3px solid #484848; + padding: 20px; + margin-top: 20px; } .results { @@ -72,9 +83,73 @@ button:hover { .results p { display: block; - width: 90%; + width: 100%; + max-width: calc(100% - 8px); text-align: left; padding: 8px; - margin: 10px 10px; + margin: 10px 0; border-radius: 50px; + background-color: #fff; + border: 1px solid #ccc; + box-sizing: border-box; +} + +/* Media queries for responsiveness */ + +/* For screens smaller than 1024px (larger tablets and small desktops) */ +@media only screen and (max-width: 1024px) { + .container { + width: 50%; + } +} + +/* For screens smaller than 768px (tablets and mobiles) */ +@media only screen and (max-width: 768px) { + .container { + width: 80%; + } + + input[type="number"] { + width: calc(100% - 10px); + } + + button { + width: calc(100% - 10px); + } + + .resultsContainer { + width: calc(100% - 10px); + } + + .results p { + width: calc(100% - 10px); + } } + +/* For screens smaller than 480px (mobiles) */ +@media only screen and (max-width: 480px) { + .container { + width: 90%; + padding: 15px; + } + + input[type="number"] { + font-size: 14px; + padding: 8px; + } + + button { + font-size: 14px; + padding: 8px; + } + + .resultsContainer { + padding: 8px; + width:auto; + } + + .results p { + font-size: 12px; + padding: 6px; + } +} \ No newline at end of file From 2b494af7804c1cbb152d1abb977100a56c089d68 Mon Sep 17 00:00:00 2001 From: Agastya Kumar Yadav <124435030+agastya3636@users.noreply.github.com> Date: Sat, 1 Jun 2024 21:06:41 +0530 Subject: [PATCH 2/7] fixed --- Calculators/Weather-Calculator/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Calculators/Weather-Calculator/style.css b/Calculators/Weather-Calculator/style.css index f62167aec..7217a82a8 100644 --- a/Calculators/Weather-Calculator/style.css +++ b/Calculators/Weather-Calculator/style.css @@ -118,7 +118,7 @@ button:hover { } .resultsContainer { - width: calc(100% - 10px); + width: auto; } .results p { From fa21b5acd4d6fdf3a6c974346bc0c7eabf811f53 Mon Sep 17 00:00:00 2001 From: Agastya Kumar Yadav <124435030+agastya3636@users.noreply.github.com> Date: Sun, 2 Jun 2024 12:54:34 +0530 Subject: [PATCH 3/7] Made website bandwidth calculator responsive --- .../Website-Bandwidth-Calculator/style.css | 63 +++++++++++++++++-- 1 file changed, 57 insertions(+), 6 deletions(-) diff --git a/Calculators/Website-Bandwidth-Calculator/style.css b/Calculators/Website-Bandwidth-Calculator/style.css index 6ffbfd012..e31ef6b22 100644 --- a/Calculators/Website-Bandwidth-Calculator/style.css +++ b/Calculators/Website-Bandwidth-Calculator/style.css @@ -1,32 +1,37 @@ * { margin: 0; padding: 0; + /* box-sizing: border-box; */ } body { font-family: Arial, sans-serif; background: linear-gradient(to right, #265073, #59D5E0); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + overflow: hidden; } .container { + width: 100%; max-width: 600px; - padding: 30px; + padding: 15px; border: 1px solid black; - /* Add 3d box shadow */ box-shadow: 0 0 10px 5px #333A73, 0 0 20px 10px #333A73; - border-radius: 20px; - margin-top: calc(50vh - 280px); - margin-left: calc(50vw - 300px); background: #9AD0C2; } input[type="number"] { - width: 100%; + /* width: calc(100%-35px); */ height: 35px; font-size: 15px; border-radius: 10px; + padding: 5px; + width: calc(100% - 15px) } h1 { @@ -56,4 +61,50 @@ button:hover { margin-top: 20px; text-align: center; font-size: 20px; +} + +/* Responsive Design */ + +@media (max-width: 768px) { + .container { + padding: 15px; + + } + + h1 { + margin-top: 15px; + margin-bottom: 20px; + } + + input[type="number"] { + height: 30px; + font-size: 13px; + } + + button { + height: 35px; + font-size: medium; + } +} + +@media (max-width: 480px) { + .container { + padding: 10px; + width: auto; + } + + h1 { + margin-top: 10px; + margin-bottom: 15px; + } + + input[type="number"] { + height: 25px; + font-size: 11px; + } + + button { + height: 30px; + font-size: small; + } } \ No newline at end of file From db7994b9d2b35165cb0795f6b8b0315dfdff5188 Mon Sep 17 00:00:00 2001 From: Agastya Kumar Yadav <124435030+agastya3636@users.noreply.github.com> Date: Wed, 5 Jun 2024 08:58:32 +0530 Subject: [PATCH 4/7] made responsive --- .../CGPA-Percentage-Calculator/index.html | 21 ++++++++----------- .../CGPA-Percentage-Calculator/style.css | 4 ++++ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/Calculators/CGPA-Percentage-Calculator/index.html b/Calculators/CGPA-Percentage-Calculator/index.html index 3786d6c7e..4eacc71ff 100644 --- a/Calculators/CGPA-Percentage-Calculator/index.html +++ b/Calculators/CGPA-Percentage-Calculator/index.html @@ -9,28 +9,26 @@ -
+
-

- CGPA ⟷ Percentage -

-

- Start Typing In Any Field -

+

CGPA ⟷ Percentage

+

Start Typing In Any Field

CGPA +
Percentage +
@@ -38,7 +36,6 @@

- \ No newline at end of file diff --git a/Calculators/CGPA-Percentage-Calculator/style.css b/Calculators/CGPA-Percentage-Calculator/style.css index 2f9f0e23c..a2039aaa6 100644 --- a/Calculators/CGPA-Percentage-Calculator/style.css +++ b/Calculators/CGPA-Percentage-Calculator/style.css @@ -2,4 +2,8 @@ input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; +} + +input[type='number'] { + -moz-appearance: textfield; } \ No newline at end of file From ef7189b8fbb3945089c77f32b0aaa6c40cbc1692 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 10 Jun 2024 22:52:32 +0530 Subject: [PATCH 5/7] Update and rename Readme.md to README.md --- Calculators/Anagram-Calculator/{Readme.md => README.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Calculators/Anagram-Calculator/{Readme.md => README.md} (100%) diff --git a/Calculators/Anagram-Calculator/Readme.md b/Calculators/Anagram-Calculator/README.md similarity index 100% rename from Calculators/Anagram-Calculator/Readme.md rename to Calculators/Anagram-Calculator/README.md From cc551bf7b62e85074d219829d910d6efb3ed8993 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 10 Jun 2024 22:53:14 +0530 Subject: [PATCH 6/7] Update index.html --- .../CGPA-Percentage-Calculator/index.html | 63 +++++++++---------- 1 file changed, 30 insertions(+), 33 deletions(-) diff --git a/Calculators/CGPA-Percentage-Calculator/index.html b/Calculators/CGPA-Percentage-Calculator/index.html index 4eacc71ff..1d8c1e153 100644 --- a/Calculators/CGPA-Percentage-Calculator/index.html +++ b/Calculators/CGPA-Percentage-Calculator/index.html @@ -2,40 +2,37 @@ - - - - CGPA Percentage Calculator + + + CGPA Percentage Calculator -
- -
-

CGPA ⟷ Percentage

-

Start Typing In Any Field

-
-
- - -
-
- - -
-
- -
- - +
+
+
+

CGPA ⟷ Percentage

+

Start Typing In Any Field

+
+
+ + +
+
+ + +
+
+
+
+ - - \ No newline at end of file + From 32ca14c44ebb2714c374c639e49d7a4dd5d53081 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Mon, 10 Jun 2024 22:53:38 +0530 Subject: [PATCH 7/7] Update style.css --- Calculators/CGPA-Percentage-Calculator/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Calculators/CGPA-Percentage-Calculator/style.css b/Calculators/CGPA-Percentage-Calculator/style.css index a2039aaa6..fc4d4d09d 100644 --- a/Calculators/CGPA-Percentage-Calculator/style.css +++ b/Calculators/CGPA-Percentage-Calculator/style.css @@ -1,9 +1,9 @@ input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; + -webkit-appearance: none; + margin: 0; } input[type='number'] { - -moz-appearance: textfield; -} \ No newline at end of file + -moz-appearance: textfield; +}