Skip to content

Instantly share code, notes, and snippets.

@biamuniz

biamuniz/exercicio-1-grafico-de-barras.markdown

Created February 6, 2022 02:28
Show Gist options
  • Save biamuniz/092a644f655ef899fd8c1e1c9993fd07 to your computer and use it in GitHub Desktop.
Save biamuniz/092a644f655ef899fd8c1e1c9993fd07 to your computer and use it in GitHub Desktop.
Download ZIP
Exercício 1 - gráfico de barras
Raw
exercicio-1-grafico-de-barras.markdown
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<body>
<h1>Os cinco maiores PIBs em 2021</h1>
<div class="colunas">
<div class="coluna eua">EUA: U$22,94 trilhões</div>
<div class="coluna china">China: U$16,86 trilhões</div>
<div class="coluna japao">Japão: U$5,10 trilhões</div>
<div class="coluna alemanha">Alemanha: U$4,23 trilhões</div>
<div class="coluna reino-unido">UK: U$3,11 trilhões</div>
</div>
</body>
Raw
style.css
body{
background-color: white;
text-align: center;
}
.colunas{
background-color: rgb(211, 211, 211);
width: 600px;
height: 400px;
padding: 20px;
margin:auto;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.coluna{
height: 100%;
width: calc((100% - 15px)/5);
padding: 10px;
color: #fff;
margin-left: 8px;
font-family: montserrat;
text-align: center;
font-size: medium;
}
.coluna.eua{
height: 80%;
background-color: darkblue;
}
.coluna.china{
height: 58.79%;
background-color: orange;
}
.coluna.japao{
height: 17.78%;
background-color: firebrick;
}
.coluna.alemanha{
height: 14.75%;
background-color: darkgreen;
}
.coluna.reino-unido{
height: 10.84%;
background-color: lightcoral;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment