Como fazer uma Pokebola em HTML e Css
Neste conteúdo piloto foi desenvolvido uma Pokebola totalmente em html e css.
Primeiro passo após a instalação do Visual Studio Code, “Caso não tenha instalado”!
<body>
<div id="pokebola">
<div class="esfera">
</div>
<div class="meia-lua1">
</div>
<div class="meia-lua2">
</div>
<div class="tarja">
</div>
<div class="esfera-centro">
</div>
<div class="contorno">
</div>
<div class="botao">
</div>
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/International_Pok%C3%A9mon_logo.svg/1200px-International_Pok%C3%A9mon_logo.svg.png">
</div>
</div>
</body>
<style>
#pokebola {
margin-top: 0;
}
.tarja {
width: 500px;
height: 70px;
border-style: solid;
border-width: 0;
margin-top: 210px;
margin-left: 650px;
position: absolute;
background-color: #313131;
border-radius: 5px;
box-shadow: 0 5px 9px 0px #0000009c;
}
.esfera {
width: 500px;
height: 500px;
border-style: solid;
border-width: 0;
margin-top: 0;
margin-left: 650px;
border-radius: 250px;
position: absolute;
box-shadow: 20px 18px 20px 0px #000000;
}
.meia-lua1 {
width: 500px;
height: 250px;
background-color: #ff0000;
margin-top: 0;
margin-left: 650px;
border-radius: 250px 250px 0 0;
position: absolute;
box-shadow: inset 10px 10px 20px 0 #dadada;
}
.meia-lua2 {
width: 500px;
height: 250px;
border-style: solid;
border-width: 0;
margin-top: 250px;
margin-left: 650px;
border-radius: 0 0 250px 255px;
position: absolute;
box-shadow: inset -5px -5px 20px 10px #777777;
}
.esfera-centro {
background-color: #313131;
width: 200px;
height: 200px;
border-style: solid;
border-width: 0;
margin-top: 150px;
margin-left: 800px;
border-radius: 250px;
position: absolute;
box-shadow: inset 5px 5px 15px 0 #ffffff;
}
.botao {
background-color: #bfbfbf;
width: 100px;
height: 100px;
border-style: solid;
border-width: 0;
margin-top: 200px;
margin-left: 848px;
border-radius: 250px;
position: absolute;
box-shadow: 5px 5px 15px 5px #000000;
}
.contorno {
background-color: #ffffff;
width: 125px;
height: 125px;
border-style: solid;
border-width: 1px;
margin-top: 187px;
margin-left: 836px;
border-radius: 250px;
position: absolute;
}
.logo {
display: flex;
margin-top: 347px;
margin-left: 600px;
position: absolute;
}
.logo img {
width: 50%;
}
</style>
Aqui pode conferir o vídeo da construção do código html e Css
Deixe seu comentário ou dúvida, e compartilhe este conteúdo.
Comentários