Objetivo: Gerar o logotipo do Instagram em HTML com CSS
 |
| Saída gerada |
<!DOCTYPE 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>Logo da Instagram</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
div {
margin: 20px;
width: 20rem;
height: 20rem;
color: #fff;
background: radial-gradient(circle at 33% 100%,
#fed373 4%,
#f15245 30%,
#d92e7f 62%,
#9b36b7 85%,
#515ecf
);
border-radius: 30%;
position: relative;
}
.d1{
content: none;
border: 1rem solid;
border-radius: 30%;
width: 12.5rem;
height: 12.5rem;
position: absolute; /* nas 4 direções */
inset: 0;
margin: auto;
}
.d2{
content: normal;
border: 1rem solid;
border-radius: 100%; /* arredonda a borda em raio */
width: 5rem;
height: 5rem;
position: absolute; /*posição fixa da tela*/
inset: 0; /*posicionamento */
margin: auto;
}
span{
border: 1rem solid;
border-radius: 100%;
position: absolute;
top: -7rem; /*espaço acima do*/
right: -5rem ;
}
</style>
</head>
<body>
<div >
<div class="d1">
<span class="d2">
<span></span>
</span>
</div>
</div>
<div>
<div class="d1">
<div class="d2">
<span></span>
</div>
</div>
</div>
</body>
</html>
