Skip to content

Instantly share code, notes, and snippets.

@heliohdd

heliohdd/calcule-seu-imc.markdown

Created May 28, 2021 14:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save heliohdd/6f07186d97b515f7b7ae70a4d3556ca7 to your computer and use it in GitHub Desktop.
Save heliohdd/6f07186d97b515f7b7ae70a4d3556ca7 to your computer and use it in GitHub Desktop.
Download ZIP
Calcule seu IMC
Raw
index.html
<html>
<head>
</head>
<body>
<div class="container">
<h1>Calcule seu IMC</h1>
<form>
<div class="container-calculadora-peso">
<p>Digite seu peso</p>
<input class="peso-slider" type="range"/>
<p>Peso:</p>
<input class="input-number" type="number"/>
</div>
<div class="container-calculadora-altura">
<p>Digite sua altura</p>
<input class="altura-slider" type="range"/>
<p>Altura:</p>
<input class="input-number" type="number"/>
<input class="botao-calcular" type="button" value=Calcular />
</form>
</div>
</body>
</html>
Raw
style.css
h1 {
margin-left: 20px;
}
.container {
border: 5px solid black;
box-shadow: 0px 0px 10px;
padding: 15px;
margin: 20px;
height: 480px;
}
.container-calculadora-peso,
.container-calculadora-altura {
margin-bottom: 16px;
width: 100%;
}
.peso-slider,
.altura-slider {
width: 100%;
height: 1px;
outline: none;
}
.input-number{
height: 30px;
width: 90px;
margin-left: 20px;
font-size: 20px;
}
.botao-calcular{
font-size: 18px;
width: 100%;
background-color: #1b2845;
color: white;
border: none;
cursor: pointer;
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment