<!-- HTML -->
<section class="exemplo">
<p>
Este é o texto de parágrafo com dois links: <a href="#">link 1</a>, que <b>não tem</b> classe definida e <a href="#" class="special-link">link 2</a>, que <b>tem</b> classe definida.
</p>
</section>
<!-- CSS -->
<style>
a{
font-weight: bold;
padding: 2px;
}
a.special-link{
padding: 1px 8px;
border: 1px solid black;
}
</style>
<!-- HTML -->
<section class="exemplo">
<div class="list-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item highlighted">3</div>
<div class="item">4</div>
</div>
<div class="list-container list-2">
<div class="item highlighted">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</section>
<!-- CSS -->
<style>
.list-container{ /* estilos aplicados aos dois blocos */
margin: 40px auto;
padding: 5px;
width: 40%;
min-width: 270px;
display: flex;
gap: 5px;
border: 1px solid black;
}
.list-container.list-2{ /* estilo aplicado somente ao bloco com a classe list-2 */
width: 26%;
min-width: 200px;
}
.item{
display: block;
text-align: center;
padding-top: 8px;
height: 38px;
width: calc(100% / 4);
background-color: white;
}
.item.highlighted{
background-color: pink;
}
</style>
<!-- HTML -->
<section class="exemplo">
<div class="box-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="box-container box-2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</section>
<!-- CSS -->
<style>
.box-container{
margin: 40px auto;
padding: 5px;
width: 40%;
min-width:270px;
display: flex;
gap: 5px;
border: 1px solid black;
}
.box-container.box-2{
width: 26%;
min-width:200px;
}
.box-container div{ /* elementos tipo div que sejam descendentes do .box-container */
display: block;
text-align: center;
padding-top: 8px;
height: 38px;
width: calc(100% / 4);
background-color: white;
}
</style>
<!-- CSS -->
<style>
.layout-2b{
width: 100%;
max-width: 360px;
min-height: 400px;
display: grid;
grid-template-rows: auto 1fr auto 1fr;
border: 1px solid black;
padding: 30px;
gap: 30px;
}
.layout-2b div{
width: 100%;
height: auto;
border: 1px solid pink;
padding: 15px;
}
.layout-2b > div > div{
width: 100%;
aspect-ratio: 1; /* determina que altura e largura do elemento sejam iguais */
}
.quadrados, .circulos{
background-color: white;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.quadrados > div{
width: 80%;
}
.circulos > div{
border-radius: 50%; /* o elemento é um quadrado. Mas colocamos bordas arredondadas tão grandes, que vira um círculo */
}
</style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-3a">
<div>1</div>
<div class="especial">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</section>
<!-- CSS -->
<style>
.layout-3a{
width: 100%;
max-width: 400px;
border: 1px solid black;
background-color: white;
padding: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.layout-3a > div{
width: 100%;
aspect-ratio: 1;
border: 1px solid lightblue;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* selecionamos as divs filhas de .layout-3a, mas somente quando estiverem com o mouse sobre elas */
/* nesse estado, elas terão fundo azul */
.layout-3a > div:hover{
background-color: lightblue;
}
.layout-3a > .especial{
border: 1px solid pink;
}
</style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-3b">
<button>botão 1</button>
<button class="inativo">botão 2</button>
<button>botão 3</button>
</div>
</section>
<!-- CSS -->
<style>
.layout-3b{
width: 100%;
max-width: 500px;
background-color: white;
padding:10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.layout-3b > button{
width: 100%;
aspect-ratio: 3; /* a largura é 3 vezes maior que a altura */
border: 1px solid #ccc; /* como padrão, borda cinza */
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 400;
text-transform: uppercase; /* deixa o texto em caixa alta */
}
.layout-3b > button:not(.inativo){
background-color: lightblue;
border: 1px solid lightblue;
}
</style>
<!-- HTML -->
<section class="exemplo">
<div class="layout-3c">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
<!-- CSS -->
<style>
.layout-3c{
width: 100%;
max-width: 500px;
background-color: white;
padding: 30px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.layout-3c > div{
width: 100%;
aspect-ratio: 1; /* altura igual a largura */
border: 2px solid lightblue;
border-radius: 50%; /* para transformar a div em círculo */
background: url('https://thumbs2.imgbox.com/78/68/tNh5HMEg_t.jpeg') no-repeat; /* define uma imagem de fundo, sem repetição */
background-size: 500%; /* a imagem terá tamanho de 500% do elemento div - assim ela fica responsiva */
background-position: 7% 2.5%;
}
.layout-3c > div:nth-child(1){
background-position: 7% 2.5%; /* posiciona a imagem a 7% da esquerda e 2.5% to topo */
}
.layout-3c > div:nth-child(2){
background-position: 36.5% 2.5%;
}
.layout-3c > div:nth-child(3){
background-position: 94% 26%;
}
.layout-3c > div:nth-child(4){
background-position: 7% 95.5%;
}
</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.
