Published
Edited
Mar 14, 2022
<!-- HTML -->
<section class="exercicio">
<div class="caixa">
<div class="titulo">Os maiores PIBs do mundo em 2021</div>
<div class="subtitulo">Valores em trilhões de dólares (US$)</div>
<div class="grafico">
<!-- o gráfico entrará aqui depois -->
</div>
<div class="fonte"><strong>Fonte:</strong> Fundo Monetário Internacional, 10/2021</div>
</div>
</section>
<!-- CSS -->
<style>
/* importamos a fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
/* complete ou crie aqui as suas regras de CSS */
.caixa {
font-size: 14px;
font-family: 'Montserrat', var(--sans-serif); /* aplicamos a fonte importada */
font-weight: 400;
background-color: #fff;
}
</style>
<!-- HTML -->
<section class="exercicio">
<div class="caixa">
<div class="titulo">Os maiores PIBs do mundo em 2021</div>
<div class="subtitulo">Valores em trilhões de dólares (US$)</div>
<div class="grafico">
<div class="escala">
<div>25</div>
<div>20</div>
<div>15</div>
<div>10</div>
<div>5</div>
</div>
<div class="barras"></div>
<div class="rotulos"></div>
<!-- Fim do bloco de gráfico -->
</div>
<div class="fonte"><strong>Fonte:</strong> Fundo Monetário Internacional, 10/2021</div>
</div>
</section>
<!-- CSS -->
<style>
/* complete ou crie aqui as suas regras de CSS */
/* a regra abaixo cria um pseudo-elemento após a div selecionada,
para exibir os tracinhos */
/* .escala > div:after{
content: '';
display: inline-block;
vertical-align: top;
width: 5px;
margin-left: 5px;
border-top: 1px solid #333;
} */
</style>
<!-- HTML -->
<section class="exercicio">
<div class="caixa">
<div class="titulo">Os maiores PIBs do mundo em 2021</div>
<div class="subtitulo">Valores em trilhões de dólares (US$)</div>
<div class="grafico">
<div class="escala">
<div>25</div>
<div>20</div>
<div>15</div>
<div>10</div>
<div>5</div>
</div>
<div class="barras">
<div class="eua"></div>
<div class="ch"></div>
<div class="jp"></div>
<div class="al"></div>
<div class="ru"></div>
</div>
<div class="rotulos">
<div>EUA</div>
<div>China</div>
<div>Japão</div>
<div>Alemanha</div>
<div>Reino Unido</div>
</div>
<!-- Fim do bloco de gráfico -->
</div>
<div class="fonte"><strong>Fonte:</strong> Fundo Monetário Internacional, 10/2021</div>
</div>
</section>
<!-- CSS -->
<style>
/* complete ou crie aqui as suas regras de CSS */
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
