From a6d211b7dedaf0761038591db3c24b8a86b46419 Mon Sep 17 00:00:00 2001
From: S7viks <130924126+S7viks@users.noreply.github.com>
Date: Sun, 13 Oct 2024 12:33:58 +0530
Subject: [PATCH] Your commit message

---
 index.html | 112 +++++++++++++-------------
 style.css  | 231 +++++++++++++++++++----------------------------------
 2 files changed, 139 insertions(+), 204 deletions(-)

diff --git a/index.html b/index.html
index db9f616..4d1603f 100644
--- a/index.html
+++ b/index.html
@@ -435,67 +435,67 @@ <h4>A Beginner's Guide to Starting Your Running Journey</h4>
     </div>
   </section>
 
-  <section class="section__container bmi__container">
-
-    <div class="wrapper">
-      <h2 class="bmi__header">BMI CALCULATOR</h2>
-      <p>Height in CM:
-        <input type="text" id="height"><br><span id="height_error"></span>
-      </p>
-
-      <p>Weight in KG:
-        <input type="text" id="weight"><br><span id="weight_error"></span>
-      </p>
-
-      <button class="btn" id="btn">Calculate</button>
-      <p id="output"></p>
+  <section class="calculators__container">
+    <!-- BMI Calculator -->
+    <div class="bmi__container">
+        <div class="wrapper">
+            <h2 class="bmi__header">BMI CALCULATOR</h2>
+            <label for="height">Height in CM:</label>
+            <input type="text" id="height" placeholder="Your height in kg"><br><span id="height_error"></span>
+            
+            <label for="weight">Weight in KG:</label>
+            <input type="text" id="weight" placeholder="Your weight in kg"><br><span id="weight_error"></span>
+                <button class="btn" id="btn">Calculate</button>
+            <p id="output"></p>
+        </div>
     </div>
-  </section>
 
-  <!-- Protein Intake Calculator -->
-  <section class="section__container protein__container">
-    <div class="wrapper">
-      <h2 class="protein__header">Protein Intake Calculator</h2>
-      <p>Enter your details to estimate your daily protein needs:</p>
-      
-      <label for="protein-weight">Weight (kg):</label>
-      <input type="number" id="protein-weight" placeholder="Your weight in kg">
-      
-      <label for="protein-goal">Fitness Goal:</label>
-      <select id="protein-goal">
-        <option value="maintenance">Maintenance</option>
-        <option value="muscle-gain">Muscle Gain</option>
-        <option value="fat-loss">Fat Loss</option>
-      </select>
-      
-      <button class="btn" id="protein-btn">Calculate Protein Intake</button>
-      <p id="protein-output"></p>
+    <!-- Protein Intake Calculator -->
+    <div class="protein__container">
+        <div class="wrapper">
+            <h2 class="protein__header">Protein Intake Calculator</h2>
+            <label for="protein-weight">Weight (kg):</label>
+            <input type="number" id="protein-weight" placeholder="Your weight in kg">
+            
+            <label for="protein-goal">Fitness Goal:</label>
+            <select id="protein-goal">
+                <option value="maintenance">Maintenance</option>
+                <option value="muscle-gain">Muscle Gain</option>
+                <option value="fat-loss">Fat Loss</option>
+            </select>
+            
+            <div class="button-container">
+                <button class="btn" id="protein-btn">Calculate Protein Intake</button>
+            </div>
+            <p id="protein-output"></p>
+        </div>
     </div>
-  </section>
-
-  <!-- Macronutrient Calculator -->
-  <section class="section__container macro__container">
-    <div class="wrapper">
-      <h2 class="macro__header">Macronutrient Calculator</h2>
-      <p>Enter your details to calculate your daily macronutrient needs:</p>
-      
-      <label for="macro-weight">Weight (kg):</label>
-      <input type="number" id="macro-weight" placeholder="Your weight in kg">
-
-      <label for="macro-goal">Fitness Goal:</label>
-      <select id="macro-goal">
-        <option value="maintenance">Maintenance</option>
-        <option value="bulking">Bulking</option>
-        <option value="cutting">Cutting</option>
-      </select>
-
-      <label for="macro-calories">Daily Calories:</label>
-      <input type="number" id="macro-calories" placeholder="Your daily calorie intake">
 
-      <button class="btn" id="macro-btn">Calculate Macros</button>
-      <p id="macro-output"></p>
+    <!-- Macronutrient Calculator -->
+    <div class="macro__container">
+        <div class="wrapper">
+            <h2 class="macro__header">Macronutrient Calculator</h2>            
+            <label for="macro-weight">Weight (kg):</label>
+            <input type="number" id="macro-weight" placeholder="Your weight in kg">
+            
+            <label for="macro-goal">Fitness Goal:</label>
+            <select id="macro-goal">
+                <option value="maintenance">Maintenance</option>
+                <option value="bulking">Bulking</option>
+                <option value="cutting">Cutting</option>
+            </select>
+            
+            <label for="macro-calories">Daily Calories:</label>
+            <input type="number" id="macro-calories" placeholder="Your daily calorie intake">
+            
+            <div class="button-container">
+                <button class="btn" id="macro-btn">Calculate Macros</button>
+            </div>
+            <p id="macro-output"></p>
+        </div>
     </div>
-  </section>
+</section>
+
 
 
   <footer class="footer" id="contact">
diff --git a/style.css b/style.css
index 57b0a13..68b86ad 100644
--- a/style.css
+++ b/style.css
@@ -518,194 +518,129 @@ nav {
   margin-inline: auto;
 }
 
-.bmi__header{
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: var(--text-dark);
+/* Calculators */
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 20px;
 }
 
-.bmi__container span{
-  color: red;
+.wrapper label {
+  margin-bottom: 10px;
 }
-.bmi__container{
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+
+.wrapper input,
+.wrapper select {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
   width: 100%;
-  height:400px;
-  background: white;
-  
-  
- 
 }
 
-.bmi__container .wrapper{
+.bmi__header,
+.protein__header,
+.macro__header {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.calculators__container {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 1.5rem;
+  justify-content: space-between;
+  align-items: flex-start;
   width: 100%;
-  
-  background: white;
-  border-radius: 5px;
-  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
-  background-image: linear-gradient(
-    to right,
-    rgba(187, 180, 180, 0.8),
-    rgba(187, 180, 180, 0.8)
-  ),
-url("assets/banner-2.png");
-}
-.bmi__container input{
-  outline: none;
-}
-.bmi__container .btn{
-  color:#5b5757
+  background-color: black;
+  padding: 20px;
+  gap: 20px;
 }
 
- form {
+.bmi__container,
+.protein__container,
+.macro__container {
   display: flex;
-}
-#form-bg{
-  background-color: transparent;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 30%;
+  height: 500px;
+  background-color: #1a1a1a;
+  border-radius: 5px;
+  box-shadow: 0px 20px 30px -10px rgb(38, 57, 77);
+  padding: 20px;
 }
 
-
-input[type="text"] {
+.bmi__container input,
+.protein__container input,
+.macro__container input,
+.protein__container select,
+.macro__container select {
+  outline: none;
   margin: 10px 0;
   padding: 10px;
   border: 2px solid #ddd;
   border-radius: 5px;
   font-size: 16px;
-  font-family: Arial, sans-serif;
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  font-family: Arial, sans-serif;
+  width: 80%;
 }
 
-
-input[type="text"]:hover, input[type="text"]:focus {
+input:hover,
+input:focus,
+select:hover,
+select:focus {
   border-color: #007bff;
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-  outline: none;
 }
 
-
-.btn__primary {
-  padding: 20px;
-  background-color: #d44f3b;
+label {
+  display: block;
+  margin-top: 10px;
   color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.2s ease;
-}
-
-
-
-.btn__primary:active {
-  background-color: #004494;
-  transform: scale(1);
-}
-
-
-.protein__header{
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: var(--text-dark);
+  text-align: center;
 }
 
-.protein__container span{
-  color: red;
-}
-.protein__container{
+.button-container {
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  width: 100%;
-  height:400px;
-  background: white;
-  
-  
- 
+  margin-top: auto;
+  margin-bottom: 10px;
 }
 
-.protein__container .wrapper{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 1.5rem;
-  width: 100%;
-  
-  background: white;
+.btn {
+  margin-top: auto;
+  padding: 10px;
+  background-color: red;
+  color: white;
+  border: none;
   border-radius: 5px;
-  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
-  background-image: linear-gradient(
-    to right,
-    rgba(187, 180, 180, 0.8),
-    rgba(187, 180, 180, 0.8)
-  ),
-url("assets/banner-2.png");
-}
-.protein__container input{
-  outline: none;
-}
-.protein__container .btn{
-  color:#5b5757
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  width: 100%;
 }
 
-
-.macro__header{
-  font-size: 1.2rem;
-  font-weight: 600;
-  color: var(--text-dark);
+.btn:hover {
+  background-color: darkred;
+  transform: scale(1.05);
 }
 
-.macro__container span{
+#error_message,
+#weight_error,
+#protein-output,
+#macro-output {
   color: red;
+  text-align: center;
+  margin-top: 10px;
 }
-.macro__container{
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height:400px;
-  background: white;
-  
-  
- 
-}
-
-.macro__container .wrapper{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 1.5rem;
-  width: 100%;
-  
-  background: white;
-  border-radius: 5px;
-  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
-  background-image: linear-gradient(
-    to right,
-    rgba(187, 180, 180, 0.8),
-    rgba(187, 180, 180, 0.8)
-  ),
-url("assets/banner-2.png");
-}
-.macro__container input{
-  outline: none;
-}
-.macro__container .btn{
-  color:#5b5757
-}
-
 
+/* end */
 .footer {
   background-color: var(--text-dark);
 }