Skip to content

Fixed The UI of BMI Calculator #283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YuktaBhatia25 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed The UI of BMI Calculator #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 9 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,22 +444,18 @@ <h4>A Beginner's Guide to Starting Your Running Journey</h4>
</div>
</section>

<section class="section__container bmi__container">

<div class="bmi-calculator">
<h2>BMI Calculator</h2>
<label for="height">Height (cm):</label>
<input type="number" id="height" placeholder="Enter your height">

<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>
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" placeholder="Enter your weight">

<p>Weight in KG:
<input type="text" id="weight"><br><span id="weight_error"></span>
</p>
<button id="calculate">Calculate</button>
</div>

<button class="btn" id="btn">Calculate</button>
<p id="output"></p>
</div>
</section>

<!-- Protein Intake Calculator -->
<section class="section__container protein__container">
Expand Down
45 changes: 45 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1069,3 +1069,48 @@ url("assets/banner-2.png");
margin-right: 200px;
}
}
/* General Body Styles */
body {
font-family: Arial, sans-serif; /* Change to your website's font */
background-color: #f9f9f9; /* Background color */
color: #333; /* Text color */
}

/* Container Styles */
.bmi-calculator {
max-width: 400px; /* Maximum width of the calculator */
margin: 20px auto; /* Center the calculator */
padding: 20px; /* Padding inside the container */
background-color: #ffffff; /* Background color for the calculator */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
}

/* Input Field Styles */
input[type="number"] {
width: 100%; /* Full width */
padding: 10px; /* Padding inside the input */
margin: 10px 0; /* Margin around the input */
border: 1px solid #ccc; /* Border color */
border-radius: 4px; /* Rounded corners */
font-size: 16px; /* Font size */
}

/* Calculate Button Styles */
button {
width: 100%; /* Full width */
padding: 10px; /* Padding inside the button */
margin-top: 10px; /* Margin above the button */
background-color: black; /* Button background color */
color: white; /* Text color */
border: none; /* No border */
border-radius: 4px; /* Rounded corners */
font-size: 18px; /* Font size */
cursor: pointer; /* Pointer cursor on hover */
transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Button Hover Effect */
button:hover {
background-color: grey; /* Darker blue on hover */
}