diff --git a/BMI calculator/index.html b/BMI calculator/index.html index 4a9e50b..94652dc 100644 --- a/BMI calculator/index.html +++ b/BMI calculator/index.html @@ -17,17 +17,17 @@

38.3

Body Mass

Index

-

Gender:

+

Gender

-

Height:

- CM +

Height (cm)

+

Age

- +

Weight

diff --git a/BMI calculator/style.css b/BMI calculator/style.css index a643331..c4ffeeb 100644 --- a/BMI calculator/style.css +++ b/BMI calculator/style.css @@ -1,3 +1,15 @@ +/* Disable increment/decrement arows from Number input */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number]{ + -moz-appearance: textfield; +} + + body{ display: flex; align-items: center; @@ -66,6 +78,10 @@ body{ margin: 0px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } +#symbol { + font-family: 'Courier New', Courier, monospace; + font-size: 18px; +} .heading{ margin-top: 10px; font-size: 40px; @@ -78,10 +94,10 @@ body{ font-weight: 100; } .subheading{ - font-size: 30px; - text-decoration: underline; - font-weight: 100; + font-size: 25px; + font-weight: 80; } + select { cursor: pointer; display: inline-block; @@ -100,13 +116,9 @@ select { font-size: 20px; color: black; } - .symbol{ - margin-left: 20px; - font-size: 30px; - font-weight: 100; - } + .heightInput{ - width: 80%; + width: 95%; border: 2px solid rgba(255, 0, 0, 0.386); height: 40px; border-radius: 10px; @@ -125,8 +137,10 @@ select { align-items: center; } .WeightInput,.AgeInput{ - font-size: 60px; + font-size: 20px; + text-align: center; width: 50%; + height: 50px; border: 2px solid rgba(255, 0, 0, 0.386); border-radius: 10px; }