<section class="exemplo">
<div class="barra">
<a href="#" title="cultura" class="marca">CULTURA</a>
<div class="usuario"></div>
</div>
</section>
<!-- CSS -->
<style>
.barra{
width: 100%;
border: 1px solid #dedede;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1vw;
}
a.marca{
display: block; /* por padrão, <a> é inline. Modificamos para block; */
width: 15vw; /* 15/100 da largura do viewport - a largura total do navegador é 100vw */
background-color: #472479;
color: white;
padding: 1vw 2vw;
font-size: 2vw;
text-align: center;
font-weight: bold;
}
.usuario{
background: #dedede url('https://images2.imgbox.com/8f/88/ajSa48dz_o.png') no-repeat center; /* usa uma imagem como fundo */
background-size: 115% auto; /* pede que a imagem se ajuste a 115% */
background-position: center top;
width: 4vw;
aspect-ratio: 1; /* a altura será igual à largura */
border-radius: 50%; /* transforma a div quadrada num círculo */
}
</style>
<!-- HTML -->
<section class="exemplo exemplo-2">
<div class="barra">
<a href="#" title="cultura" class="marca">CULTURA</a>
<div class="usuario"></div>
</div>
</section>
<!-- CSS complementar ao Exemplo 1 -->
<style>
/* esse bloco de estilos é igual ao exemplo 1, após corrigido */
.exemplo-2 .barra{
width: 100%;
border: 1px solid #dedede;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.exemplo-2 a.marca{
display: block; /* por padrão, <a> é inline. Modificamos para block; */
width: 150px;
background-color: #472479;
color: white;
padding: 10px 20px;
font-size: 20px;
text-align: center;
font-weight: bold;
}
.exemplo-2 .usuario{
background: #dedede url('https://images2.imgbox.com/8f/88/ajSa48dz_o.png') no-repeat center; /* usa uma imagem como fundo */
background-size: 115% auto; /* pede que a imagem se ajuste a 115% */
background-position: center top;
width: 40px;
aspect-ratio: 1; /* a altura será igual à largura */
border-radius: 50%; /* transforma a div quadrada num círculo */
}
.exemplo-2 > .exemplo{
}
/* estilos dentro da condição a seguir só se
aplicam em janelas menores que 680px
*/
@media (max-width: 680px){
.exemplo-2 a.marca{
width: 100px;
padding: 8px 16px;
font-size: 15px;
}
.exemplo-2 .usuario{
width: 28px;
}
}
</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.
