Desktop design

Tablet design

Mobile design

Body Mass Index calculator

<h3 _ngcontent-ng-c3849568067="" class="title3" style="margin-bottom: 32px;"> Enter your details below </h3>

<h4 _ngcontent-ng-c3849568067="" class="title4">Gender</h4>

<span _ngcontent-ng-c3849568067="" class="label-radio">Metric</span>

<span _ngcontent-ng-c3849568067="" class="label-radio">Imperial</span>

<div _ngcontent-ng-c3849568067="" fxlayoutalign="center" class="copyright description" style="place-content: stretch center; align-items: stretch; flex-direction: row; box-sizing: border-box; display: flex;"> © 2023 less. Tous droits réservés. </div>

="16.2.9"><div _ngcontent-ng-c3849568067="" class="container"><div _

ontainer"><div _ngcontent-ng-c3849568067="" fxlayoutalign="center start" class="header" style="place-content: flex-start center; align-items: flex-start; flex-direction: row; box-sizing: border-box; display: flex;"><div _

y: flex;"><div _ngcontent-ng-c3849568067="" fxflex="80" fxflex.lt-lg="100" fxlayout="column" fxlayoutgap="28px" style="z-index: 2; flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 80%;"><div _

th: 80%;"><div _ngcontent-ng-c3849568067="" fxlayoutalign="space-between center" style="margin-bottom: 28px; place-content: center space-between; align-items: center; flex-direction: row; box-sizing: border-box; display: flex;"><div _

y: flex;"><div _ngcontent-ng-c3849568067="" class="img-logo"><img _

img-logo"><img _ngcontent-ng-c3849568067="" src="./assets/img/logo.svg" alt="logo"></div>

go"></div><div _ngcontent-ng-c3849568067="" fxlayoutgap="8px" fxlayoutalign="start center" class="lang-container" style="place-content: center flex-start; align-items: center; flex-direction: row; box-sizing: border-box; display: flex;"><div _

y: flex;"><div _ngcontent-ng-c3849568067="" fxlayoutgap="4px" fxlayoutalign="start center" style="margin-right: 8px; place-content: center flex-start; align-items: center; flex-direction: row; box-sizing: border-box; display: flex;"><div _

y: flex;"><div _ngcontent-ng-c3849568067="" class="selected-lang" style="margin-right: 4px;">EN</di

con></div><div _ngcontent-ng-c3849568067="" fxlayoutalign="center center" id="btn-toggle-menu" style="place-content: center; align-items: center; flex-direction: row; box-sizing: border-box; display: flex;"><mat-i

div></div><div _ngcontent-ng-c3849568067="" fxlayoutalign="start center" fxlayoutgap="32px" fxlayout.lt-md="column" style="place-content: center flex-start; align-items: center; flex-direction: row; box-sizing: border-box; display: flex;"><div _

y: flex;"><div _ngcontent-ng-c3849568067="" fxflex="50" fxflex.lt-md="100" fxlayout="column" fxlayoutgap="35px" fxlayoutalign.lt-md="start center" class="text-header" style="margin-right: 32px; flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><h1 _n

th: 50%;"><h1 _ngcontent-ng-c3849568067="" fxlayout="column" fxlayoutalign="start start" fxlayoutalign.lt-md="start center" class="title1 title" style="margin-bottom: 35px; flex-direction: column; box-sizing: border-box; display: flex; place-content: flex-start; align-items: flex-start;"> Body

ator </h1><div _ngcontent-ng-c3849568067="" fxlayoutalign.lt-md="start center" class="description"> Bett

div></div><form _ngcontent-ng-c3849568067="" novalidate="" fxflex="50" fxflex.lt-md="100" fxlayout="column" fxlayoutgap="32px" class="formulare ng-untouched ng-pristine ng-valid" style="flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><h3 _n

th: 50%;"><h3 _ngcontent-ng-c3849568067="" class="title3" style="margin-bottom: 32px;"> Enter

elow </h3><div _ngcontent-ng-c3849568067="" fxlayout="row" fxlayoutalign="start center " fxlayoutgap="24px" class="btn-group" style="margin-bottom: 32px; flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-start; align-items: center;"><div _

center;"><div _ngcontent-ng-c3849568067="" fxflex="50" fxlayoutalign="start start" style="margin-right: 24px; place-content: flex-start; align-items: flex-start; flex-direction: row; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><label

th: 50%;"><label _ngcontent-ng-c3849568067="" for="metric" fxlayout="row" fxlayoutalign="start center" fxlayoutgap="18px" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-start; align-items: center;"><input

center;"><input _ngcontent-ng-c3849568067="" type="radio" name="system" id="metric" value="metric" checked="" class="ng-untouched ng-pristine ng-valid"><span

ng-valid"><span _ngcontent-ng-c3849568067="" class="radio" style="margin-right: 18px;"></span

;"></span><span _ngcontent-ng-c3849568067="" class="label-radio">Metric

bel></div><div _ngcontent-ng-c3849568067="" fxflex="50" fxlayoutalign="start start" style="place-content: flex-start; align-items: flex-start; flex-direction: row; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><label

th: 50%;"><label _ngcontent-ng-c3849568067="" for="imperial" fxlayout="row" fxlayoutalign="start center" fxlayoutgap="18px" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-start; align-items: center;"><input

center;"><input _ngcontent-ng-c3849568067="" type="radio" name="system" id="imperial" value="imperial" class="ng-untouched ng-pristine ng-valid"><span

;"></span><span _ngcontent-ng-c3849568067="" class="label-radio">Imperi

div></div><div _ngcontent-ng-c3849568067="" fxlayout="row" fxlayoutalign="start center" fxlayoutgap="24px" fxlayout.lt-sm="column" fxlayoutalign.lt-sm="start" class="input-group" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: center flex-start; align-items: center; margin-bottom: 32px;"><label

m: 32px;"><label _ngcontent-ng-c3849568067="" for="height" fxflex="50" fxflex.lt-sm="100" fxlayout="column" fxlayoutgap="8px" style="margin-right: 24px; flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><span

th: 50%;"><span _ngcontent-ng-c3849568067="" class="label-input" style="margin-bottom: 8px;">Height

ght</span><div _ngcontent-ng-c3849568067="" fxflex="row" fxlayoutalign="start center" class="input-container" style="place-content: center flex-start; align-items: center; flex-direction: row; box-sizing: border-box; display: flex; flex: 1 1 100%;"><input

v></label><label _ngcontent-ng-c3849568067="" for="weight" fxflex="50" fxflex.lt-sm="100" fxlayout="column" fxlayoutgap="8px" style="flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><span

th: 50%;"><span _ngcontent-ng-c3849568067="" class="label-input" style="margin-bottom: 8px;">Weight

--><div _ngcontent-ng-c3849568067="" fxlayout="row" fxlayoutalign="space-between center" fxlayout.lt-sm="column" fxlayoutgap="24px" fxlayoutalign.lt-sm="start" class="resultat" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: center space-between; align-items: center;"><div _

center;"><div _ngcontent-ng-c3849568067="" fxflex="50" fxflex.lt-sm="100" fxlayout="column" fxlayoutgap="8px" class="resultat__value" style="margin-right: 24px; flex-direction: column; box-sizing: border-box; display: flex; flex: 1 1 100%; max-width: 50%;"><span

Design comparison

Please log in to post a comment

Community feedback

BMI calculator app using angular and flex-layout

Design comparison

Please log in to post a comment

Community feedback

Join our Discord community