Desktop design

Tablet design

Mobile design

Body Mass Index calculator

<div class="healthyEatingTextContainer"><div class="textHeader"><p>Healthy eating</p></div><div class="textBody"><p>Healthy eating promotes weigth control, disease prevention, better digestion, immunity, mental clarity, and mood.</p></div></div>

<div class="exerciseTextContainer"><div class="textHeader"><p>Regular exercise</p></div><div class="textBody"><p>Exercise improves fitness, aids weight control, elevates mood, and reduces disease risk, fostering wellness and longevity.</p></div></div>

<div class="sleepTextContainer"><div class="textHeader"><p>Adequate sleep</p></div><div class="textBody"><p>Sleep enhances mental clarity, emotional stability, and physical wellness, promoting restoration and rejuvenation.</p></div></div>

<div class="cardBody"><p class="cardBodyText">The development and body fat composition of girls and boys vary with age. Consequently, a child's age and gender are considered when evaluating their BMI.</p></div>

<div class="ageCardBody"><p>In aging individuals, increased body fat and muscle loss may cause BMI to underestimate body fat content.</p></div>

<div class="muscleCardBody"><p>BMI may misclassify muscular individuals as overweight or obese, as it doesn't differentiate muscle from fat.</p></div>

<p class="pregnancyHeaderText">Pregnancy</p>

<div class="pregnancyCardBody"><p>Expectant mothers experience weight gain due to their growing baby. Maintaining a healthy pre-pragnancy BMI is advicable to minimise health risks to both mother and child.</p></div>

<div class="raceCardBody"><p>Certain health concerns may affect individuals of some Black and Asian origins at lower BMIs than others. To learn more, it is advised to discuss this with your GP or practice nurse.</p></div>

Design comparison

Please log in to post a comment

Community feedback

Fully Responsive BMI Calculator App

Design comparison

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community