Escolar Documentos
Profissional Documentos
Cultura Documentos
Livro Da Imersão Dev Da Alura
Livro Da Imersão Dev Da Alura
forma
executarCodigo()
.length
function exibeTexto() {
console.log("Olá Mundo!")
}
app.js
index.html
style.css
Casa do Código Sumário
Sumário Casa do Código
Casa do Código Sumário
Versão: 25.5.6
CAPÍTULO 1
alert prompt
10 * 5.50 =
1 CONVERSOR DE MOEDAS 1
55.00
10 5.50
55.00
valor
em dólar * taxa de câmbio
( )
var
valorEmDolarTexto
prompt
”10”
valorEmDolarTexto
parseFloat()
prompt
valorEmDolarTexto
valorEmDolarNumero
5.50
valorEmDolarNumero
valorEmReal
.toFixed()
toFixed
nomeDaVariavel.toFixed(2)
valorEmRealFixado
alert()
alert(valorEmRealFixado)
nomeDaVariavel
parseFloat()
1.4 RESUMO 7
CAPÍTULO 2
var primeiroValor
parseInt
8 2 CALCULADORA
prompt parseInt
prompt
operacao
operacao
if ()
operacao
==
if (operacao == 1)
=
var nome = "Maria"
==
{ }
if (operacao == 1) {
resultado
if (operacao == 1) {
var resultado
}
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
}
10
2
document.write
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
document.write(resultado)
}
primeiroValor
segundoValor
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
document.write(primeiroValor + " / " + segundoValor + " = " + r
esultado)
}
<h2>
document.write
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
document.write("<h2>" + primeiroValor + " / " + segundoValor +
" = " + resultado + "</h2>")
}
1
else
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
document.write("<h2>" + primeiroValor + " / " + segundoValor +
" = " + resultado + "</h2>")
} else
operacao 2
*
document.write
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
document.write("<h2>" + primeiroValor + " / " + segundoValor +
" = " + resultado + "</h2>")
} else if (operacao == 2) {
var resultado = primeiroValor * segundoValor
document.write("<h2>" + primeiroValor + " x " + segundoValor +
" = " + resultado + "</h2>")
} else if (operacao == 3) {
var resultado = primeiroValor + segundoValor
document.write("<h2>" + primeiroValor + " + " + segundoValor +
" = " + resultado + "</h2>")
} else if (operacao == 4) {
var resultado = primeiroValor - segundoValor
document.write("<h2>" + primeiroValor + " - " + segundoValor +
" = " + resultado + "</h2>")
}
10 2
else
if (operacao == 1) {
var resultado = primeiroValor / segundoValor
document.write("<h2>" + primeiroValor + " / " + segundoValor +
" = " + resultado + "</h2>")
} else if (operacao == 2) {
var resultado = primeiroValor * segundoValor
document.write("<h2>" + primeiroValor + " x " + segundoValor +
" = " + resultado + "</h2>")
} else if (operacao == 3) {
var resultado = primeiroValor + segundoValor
document.write("<h2>" + primeiroValor + " + " + segundoValor +
" = " + resultado + "</h2>")
} else if (operacao == 4) {
var resultado = primeiroValor - segundoValor
document.write("<h2>" + primeiroValor + " - " + segundoValor +
" = " + resultado + "</h2>")
} else {
document.write("<h2>Opção inválida</h2>")
}
// if = se
16 2.3 RESUMO
CAPÍTULO 3
Math.random
> Math.random()
<- 0.20982489919137293
> Math.random()
<- 0.43822764751936005
> Math.random()
<- 0.2983069465358348
> Math.random()
3 MENTALISTA 17
<- 0.6899012983471291
> Math.random() * 10
<- 3.029855123323566
> Math.random() * 10
<- 4.808136849238727
parseInt
console.log(numeroSecreto)
alert(numeroSecreto)
console.log(numeroSecreto)
var tentativas = 3
while
prompt
parseInt
if
break
if (numeroSecreto == chute) {
alert("Acertou")
break
}
}
else if
if (numeroSecreto == chute) {
alert("Acertou")
break
} else if (chute > numeroSecreto) {
!=
if (chute != numeroSecreto){
alert("Suas tentativas acabaram. O número secreto era " + numer
oSecreto)
}
if (numeroSecreto == chute) {
alert("Acertou")
break
} else if (chute > numeroSecreto) {
alert("O número secreto é menor")
tentativas = tentativas - 1
} else if (chute < numeroSecreto) {
alert("O numero secreto é maior")
tentativas = tentativas - 1
}
}
3.3 RESUMO 21
CAPÍTULO 4
console.log(filme1)
console.log(filme2)
console.log(filme3)
22 4 ALURAFLIX
var filmes = [“Star Wars”, “Toy Story”, “Interestellar”]
console.log(filmes)
push
var filmes = []
filmes.push(“Star Wars”)
filmes.push(“Toy Story”)
filmes.push(“Interestellar”)
console.log(filmes)
0 1 2
while for
for
var i = 0 i
i < 3
i++ i = i + 1
i
0 i
for
for
console.log()
.length
.jpg
for
<img> document.write()
src img
28 4.3 RESUMO
CAPÍTULO 5
.jpg
script.js
function adicionarFilme() {
var campoFilmeFavorito = document.querySelector('#filme')
var filmeFavorito = campoFilmeFavorito.value
if (filmeFavorito.endsWith('.jpg')) {
listarFilmesNaTela(filmeFavorito)
} else {
alert("Imagem inválida")
}
campoFilmeFavorito.value = ""
}
’#filme’
input
.value
.jpg
if .endsWith()
string
.jpg
if (filmeFavorito.endsWith('.jpg')) {
listarFilmesNaTela(filmeFavorito)
} else {
alert("Imagem inválida")
}
listarFilmesNaTela(filmeFavorito)
filmeFavorito
listarFilmesNaTela(filmeFavorito)
listarFilmesNaTela
campoFilmeFavorito.value = ""
listarFilmesNaTela
function listarFilmesNaTela(filme) {
var listaFilmes = document.querySelector('#listaFilmes')
var elementoFilme = "<img src=" + filme + ">"
listaFilmes.innerHTML = listaFilmes.innerHTML + elementoFilme
}
id=”listaFilmes”
<div id="listaFilmes"></div>
filme
listarFilmesNaTela filme
filme
if
listaFilmes
innerHTML
elementoFilme
+
innerHTML
innerHTML
innerHTML id=”lista”
<div id="lista">
</div>
innerHTML
<div id=”lista”>
<div id="lista">innerHTML</div>
innerHTML
var paulo = {}
paulo
nome
:
var paulo = {
nome: "Paulo",
vitorias: 2,
empates: 5,
derrotas: 1,
pontos: 0
}
rafa
var rafa = {
nome: "Rafa",
vitorias: 3,
empates: 5,
derrotas: 2,
pontos: 0
}
console.log(rafa.vitorias)
console.log(paulo.empates)
console.log(paulo.nome)
console.log(paulo.vitorias)
paulo.empates += 1
console.log(paulo.vitorias)
function calculaPontos(jogador) {}
function calculaPontos(jogador) {
var pontos = (jogador.vitorias * 3) + jogador.empates
}
return pontos
function calculaPontos(jogador) {
var pontos = (jogador.vitorias * 3) + jogador.empates
return pontos
}
pontos
rafa.pontos = calculaPontos(rafa)
paulo.pontos = calculaPontos(paulo)
function exibirJogadoresNaTela(jogadores) {}
innerHTML
html
function exibirJogadoresNaTela(jogadores) {
var html = ""
}
for
function exibirJogadoresNaTela(jogadores) {
var html = ""
for (var i = 0; i < jogadores.length; i++) {}
}
tr
td
function exibirJogadoresNaTela(jogadores) {
var html = ""
for (var i = 0; i < jogadores.length; i++) {
tabelaJogador
document.getElementById
innerHTML html
function exibirJogadoresNaTela(jogadores) {
var html = ""
for (var i = 0; i < jogadores.length; i++) {
html += "<tr><td>" + jogadores[i].nome + "</td>"
html += "<td>" + jogadores[i].vitorias + "</td>"
html += "<td>" + jogadores[i].empates + "</td>"
html += "<td>" + jogadores[i].derrotas + "</td>"
html += "<td>" + jogadores[i].pontos + "</td>"
}
var tabelaJogadores = document.getElementById('tabelaJogadore
s')
tabelaJogadores.innerHTML = html
}
function exibirJogadoresNaTela(jogadores) {
var html = ""
for (var i = 0; i < jogadores.length; i++) {
html += "<tr><td>" + jogadores[i].nome + "</td>"
html += "<td>" + jogadores[i].vitorias + "</td>"
html += "<td>" + jogadores[i].empates + "</td>"
html += "<td>" + jogadores[i].derrotas + "</td>"
html += "<td>" + jogadores[i].pontos + "</td>"
html += "<td><button onClick='adicionarVitoria(" + i + ")
'>Vitória</button></td>"
html += "<td><button onClick='adicionarEmpate(" + i + ")'
>Empate</button></td>"
html += "<td><button onClick='adicionarDerrota(" + i + ")
'>Derrota</button></td></tr>"
}
var tabelaJogadores = document.getElementById('tabelaJogadore
s')
tabelaJogadores.innerHTML = html
}
adicionaVitoria
jogador
i
function adicionarVitoria(i) {
var jogador = jogadores[i]
function adicionarVitoria(i) {
var jogador = jogadores[i]
jogador.vitorias++
jogador.pontos = calculaPontos(jogador)
exibirJogadoresNaTela(jogadores)
}
adicionarEmpate
jogador.empate++
exibirJogadoresNaTela
function adicionarEmpate(i) {
var jogador = jogadores[i]
jogador.empates++
jogador.pontos = calculaPontos(jogador)
exibirJogadoresNaTela(jogadores)
}
function adicionarDerrota(i) {
var jogador = jogadores[i]
jogador.derrotas++
exibirJogadoresNaTela(jogadores)
46 6.3 RESUMO
CAPÍTULO 7
objeto
| Propriedade | Valor |
| --- | --- |
| nome | Nome Sobrenome |
| data de nascimento | 19/03/2008 |
| email | email@email.com |
|série | 5a B |
var estudante = {
nome: "Nome Sobrenome",
dataNascimento: "19/03/2008",
email: "email@email.com",
serie: "5a B"
}
var cartaPokemon = {
nome: "Bulbasauro",
atributos: {
ataque: 70,
defesa: 65,
magia: 85
}
}
var cartaStarWars = {
nome: "Lorde Darth Vader",
atributos: {
ataque: 88,
defesa: 62,
magia: 90
}
}
// índice 0 1 2
var cartas = [ cartaSeiya, cartaPokemon, cartaStarWars ]
var cartaMaquina
var cartaJogador
var cartas = [ cartaSeiya, cartaPokemon, cartaStarWars ]
Math.random()
cartas[0] // cartaSeiya
cartas[1] // cartaPokemon
cartas[2] // cartaStarWars
numeroCartaMaquina
array[numeroDoIndice]
cartaMaquina
<button onclick="sortearCarta()"
id="btnSortear">Sortear carta</button>
sortearCarta()
function sortearCarta() {
var numeroCartaMaquina = parseInt(Math.random() * 3)
cartaMaquina = cartas[numeroCartaMaquina]
document.getElementById('btnSortear').disabled = true
document.getElementById('btnJogar').disabled = false
// exibirOpcoes()
}
document.getElementById('btnSortear').disabled = true
document.getElementById('btnJogar').disabled = false
// exibirOpcoes()
.disabled
for
for...in
function exibirOpcoes() {
for (var atributo in cartaJogador.atributos) {
console.log(atributo)
}
}
cartaJogador
console.log(cartaJogador)
cartaJogador.atributos
{
nome: "Seiya de Pégaso",
atributos: {
ataque: 80,
defesa: 60,
magia: 90
}
}
cartaJogador
for...in
cartaJogador.atributos
atributos: {
ataque: 80,
defesa: 60,
magia: 90
}
function exibirOpcoes() {
var opcoes = document.getElementById('opcoes')
var opcoesTexto = ""
for (var atributo in cartaJogador.atributos) {
opcoesTexto += "<input type='radio' name='atributo' value=
'" + atributo + "'>" + atributo
}
opcoes.innerHTML = opcoesTexto
}
opcoes
id=”opcoes”
opcoesTexto
for...in
console.log() +=
opcoesTexto
opcoes.innerHTML =
opcoesTexto
innerHTML opcoes
.disabled =
false
jogar()
onclick=”jogar()”
<form id="form">
<h2>Escolha o seu atributo</h2>
<div class="opcoes" id="opcoes"></div>
<button type="button" id="btnJogar" onclick="jogar()" disabled="f
alse">Jogar</button>
</form>
jogar()
function jogar() {
var atributoSelecionado = obtemAtributoSelecionado()
obtemAtributoSelecionado()
atributoSelecionado
obtemAtributoSelecionado()
function obtemAtributoSelecionado() {
var radioAtributo = document.getElementsByName('atributo')
for (var i = 0; i < radioAtributo.length; i++) {
if (radioAtributo[i].checked) {
return radioAtributo[i].value
}
}
}
for
name=’atributo’
for
console.log()
if (radioAtributo[i].checked) {
return radioAtributo[i].value
}
for
checked
.value
return
radioAtributo[i].value
return
value
exibirOpcoes() value=
jogar()
obtemAtributoSelecionado() return
value
function jogar() {
var atributoSelecionado = obtemAtributoSelecionado()
objeto[“nomeDaPropriedade”]
objeto[variavel]
cartaSeiya
obtemAtributoSelecionado()
jogar()
jogar()
obtemAtributoSelecionado()
7.5 RESUMO 65
CAPÍTULO 8
var cartaPokemon = {
nome: "Bulbasauro",
imagem: "http://4.bp.blogspot.com/-ZoCqleSAYNc/UQgfMdobjUI/AAA
AAAAACP0/s_iiWjmw2Ys/s1600/001Bulbasaur_Dream.png",
atributos: {
ataque: 70,
defesa: 65,
magia: 85
}
}
var cartaStarWars = {
nome: "Lorde Darth Vader",
imagem: "https://images-na.ssl-images-amazon.com/images/I/51VJ
BqMZVAL._SX328_BO1,204,203,200_.jpg",
atributos: {
ataque: 88,
defesa: 62,
magia: 90
}
}
imagem string
getElementById() getElementsByName()
exibeCartaJogador()
document.getElementById(“carta-jogador”)
id=”carta-jogador”
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
exibirOpcoes() sortearCarta()
exibeCartaJogador()
sortear carta
” ”
innerHTML
<div>
<div>
<div id="carta-jogador">
<img src="https://www.alura.com.br/assets/img/imersoes/dev
-2021/card-super-trunfo-transparent-ajustado.png"
style=" width: inherit; height: inherit; position: abs
olute;">
<h3></h3>
</div>
class
<h1 class="page-title">
Conversor de moedas
</h1>
class
.page-title {
color: #ffffff;
style
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
divCartaJogador.style.backgroundImage = `url(${cartaJogador.im
agem})`
}
divCartaJogador.style.backgroundImage
= ` para adicionar um
atributo ao elemento que já estava salvo na
variável . Além de adicionamos também
qual é a propriedade de estilo que queremos adicionar e
seu valor, uma (um caminho de um link) que estamos
obtendo do objeto
cartaJogador
<p>
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
divCartaJogador.style.backgroundImage = `url(${cartaJogador.im
agem})`
var nome = `<p class="carta-subtitle">${cartaJogador.nome}</p>
`
}
divCartaJogador
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
divCartaJogador.style.backgroundImage = `url(${cartaJogador.im
agem})`
var nome = `<p class="carta-subtitle">${cartaJogador.nome}</p>
`
divCartaJogador.innerHTML += nome
}
+=
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
divCartaJogador.style.backgroundImage = `url(${cartaJogador.im
agem})`
var nome = `<p class="carta-subtitle">${cartaJogador.nome}</p>
`
var opcoesTexto = ""
string
input type=”radio”
atributo
cartaJogador.atributos
opcoesTexto
+=
divCartaJogador
divCartaJogador.innerHTML += nome + opcoesTexto
class=’carta-status’
<div>
</div>
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
divCartaJogador.style.backgroundImage = `url(${cartaJogador.im
agem})`
var nome = `<p class="carta-subtitle">${cartaJogador.nome}</p>
`
var opcoesTexto = ""
jogar()
obtemAtributoSelecionado()
if
alert
function jogar() {
var atributoSelecionado = obtemAtributoSelecionado()
var htmlResultado = “”
exibeCartaMaquina()
}
htmlResultado
if string
”resultado”
.innerHTML
htmlResultado
if
exibeCartaMaquina()
exibeCartaJogador()
type=”radio”
function exibeCartaMaquina() {
var divCartaMaquina = document.getElementById("carta-maquina")
divCartaMaquina.style.backgroundImage = `url(${cartaMaquina.im
agem})`
var nome = `<p class="carta-subtitle">${cartaMaquina.nome}</p>
`
var opcoesTexto = ""
exibeCartaJogador()
exibeCartaMaquina()
jogar
for… in
<p>
exibeCartaJogador()
exibeCartaMaquina()
var cartaPokemon = {
nome: "Bulbasauro",
imagem: "http://4.bp.blogspot.com/-ZoCqleSAYNc/UQgfMdobjUI/AAA
AAAAACP0/s_iiWjmw2Ys/s1600/001Bulbasaur_Dream.png",
atributos: {
ataque: 70,
defesa: 65,
magia: 85
}
}
var cartaStarWars = {
nome: "Lorde Darth Vader",
var cartaLol = {
nome: "Caitlyn",
imagem: "http://1.bp.blogspot.com/-K7CbqWc1-p0/VLc98v85s0I/AAA
AAAAABqk/-ZB684VVHbg/s1600/Caitlyn_OriginalSkin.jpg",
atributos: {
ataque: 95,
defesa: 40,
magia: 10
}
}
var cartaNaruto = {
nome: "Naruto",
imagem: "https://conteudo.imguol.com.br/c/entretenimento/16/20
17/06/27/naruto-1498593686428_v2_450x337.png",
atributos: {
ataque: 80,
defesa: 60,
magia: 100
}
}
var cartaHarry = {
nome: "Harry Potter",
imagem: "https://sm.ign.com/ign_br/screenshot/default/89ff10dd
-aa41-4d17-ae8f-835281ebd3fd_49hp.jpg",
atributos: {
ataque: 70,
defesa: 50,
magia: 95
}
}
var cartaBatman = {
nome: "Batman",
imagem: "https://assets.b9.com.br/wp-content/uploads/2020/09/B
var cartaMarvel = {
nome: "Capitã Marvel",
imagem: "https://cinepop.com.br/wp-content/uploads/2018/09/cap
itamarvel21.jpg",
atributos: {
ataque: 90,
defesa: 80,
magia: 0
}
}
var cartaMaquina
var cartaJogador
var cartas = [cartaSeiya, cartaPokemon, cartaStarWars, cartaLol,
cartaNaruto, cartaHarry, cartaBatman, cartaMarvel]
var pontosJogador = 0
var pontosMaquina = 0
function atualizaQuantidadeDeCartas() {
var divQuantidadeCartas = document.getElementById('quantidade-
cartas')
var html = "Quantidade de cartas no jogo: " + cartas.length
divQuantidadeCartas.innerHTML = html
}
id=”quantidade-cartas”
cartas.length
cartas
divPlacar.innerHTML = html
}
pontosJogador pontosMaquina
0
cartas
function sortearCarta() {
var numeroCartaJogador = parseInt(Math.random() * cartas.lengt
h)
cartaJogador = cartas[numeroCartaJogador]
cartas.splice(numeroCartaJogador, 1)
document.getElementById('btnSortear').disabled = true
document.getElementById('btnJogar').disabled = false
exibeCartaJogador()
while
while
cartas.splice(numeroCartaJogador,
1) cartas
numeroCartaJogador
cartas
function exibeCartaJogador() {
var divCartaJogador = document.getElementById("carta-jogador")
var moldura = '<img src="https://www.alura.com.br/assets/img/i
mersoes/dev-2021/card-super-trunfo-transparent.png" style=" width
: inherit; height: inherit; position: absolute;">';
divCartaJogador.style.backgroundImage = `url(${cartaJogador.im
agem})`
var nome = `<p class="carta-subtitle">${cartaJogador.nome}</p>
`
var opcoesTexto = ""
moldura
<img>
innerHTML
function exibeCartaMaquina() {
var divCartaMaquina = document.getElementById("carta-maquina")
var moldura = '<img src="https://www.alura.com.br/assets/img/i
mersoes/dev-2021/card-super-trunfo-transparent.png" style=" width
: inherit; height: inherit; position: absolute;">';
divCartaMaquina.style.backgroundImage = `url(${cartaMaquina.im
agem})`
var nome = `<p class="carta-subtitle">${cartaMaquina.nome}</p>
`
var opcoesTexto = ""
jogar
<input type=’radio’>
function obtemAtributoSelecionado() {
var radioAtributo = document.getElementsByName('atributo')
for (var i = 0; i < radioAtributo.length; i++) {
if (radioAtributo[i].checked) {
return radioAtributo[i].value
}
}
}
jogar()
if
else if
function jogar() {
var divResultado = document.getElementById("resultado")
var atributoSelecionado = obtemAtributoSelecionado()
if (cartas.length == 0) {
alert("Fim de jogo")
if (pontosJogador > pontosMaquina) {
htmlResultado = '<p class="resultado-final">Venceu</p>
'
} else if (pontosMaquina > pontosJogador) {
htmlResultado = '<p class="resultado-final">Perdeu</p>
'
} else {
htmlResultado = '<p class="resultado-final">Empatou</p
>'
}
} else {
document.getElementById('btnProximaRodada').disabled = fal
se
}
divResultado.innerHTML = htmlResultado
document.getElementById('btnJogar').disabled = true
atualizaPlacar()
exibeCartaMaquina()
if/else
pontosJogador++
pontosMaquina++
++
0
pontosJogador ++
if
pontosJogador
cartas
cartas.length == 0 true
cartas.length 0
próxima rodada
if (cartas.length == 0) {
alert("Fim de jogo")
if (pontosJogador > pontosMaquina) {
htmlResultado = '<p class="resultado-final">Venceu</p>
'
} else if (pontosMaquina > pontosJogador) {
htmlResultado = '<p class="resultado-final">Perdeu</p>
atualizaPlacar()
exibeCartaMaquina()
atualizaQuantidadeDeCartas()
atualizaPlacar()
pontosJogador pontosMaquina exibeCartaMaquina()
atualizaQuantidadeDeCartas()
function proximaRodada() {
var divCartas = document.getElementById('cartas')
document.getElementById('btnSortear').disabled = false
document.getElementById('btnJogar').disabled = true
document.getElementById('btnProximaRodada').disabled = true
document.getElementById('btnSortear').disabled = false
document.getElementById('btnJogar').disabled = true
document.getElementById('btnProximaRodada').disabled = true
94 9.3 RESUMO
splice
9.3 RESUMO 95
CAPÍTULO 10
96 10 CERTIFICADO
h1
<h1>Guilherme Lima</h1>
<h2>Insígnias da imersao.dev</h2>
h1 h6
h1
h6
h1
h2
h1
ol
li
<div>
<h2>Insígnias da imersao.dev</h2>
<ol>
<li> Conversor de Moedas</li>
<li> Calculadora</li>
<li> Mentalista</li>
<li> Aluraflix</li>
h1
h1 {
font-size: 20px;
}
seletor {
propriedade: valor;
}
body
<section>
<header>
<img src="https://unavatar.now.sh/github/omariosouto" />
</header>
<h1>Mario Souto (@omariosouto/devsoutinho)</h1>
<div>
<h2>Insígnias da imersao.dev</h2>
<ol>
<li> Conversor de Moedas</li>
<li> Calculadora</li>
<li> Mentalista</li>
<li> Aluraflix</li>
<li> Tabela de classificação</li>
<li> Supertrunfo</li>
img header
section
h2
div
section
section {
-webkit-box-shadow: 5px 5px 50px 8px rgba(0,0,0,0.59);
box-shadow: 5px 5px 50px 8px rgba(0,0,0,0.59);
display: block;
margin-left: auto;
margin-right: auto;
max-width: 500px;
margin-top: 100px;
background-color: white;
padding: 15px;
border: 1px solid black;
border-radius: 5px;
}
header
header {
background-image: url('https://cdn.cinepop.com.br/2021/02/pokem
on-list.jpg');
background-size: cover;
height: 80px;
div
div {
padding: 15px;
border-radius: 5px;
border: 1px solid black;
background-color: #bac3d6;
}
img {
width: 150px;
height: 150px;
border-radius: 100%;
margin-left: auto;
margin-right: auto;
display: block;
transform: translateY(-50%);
border: 8px solid white;
}
h1 section
section h1 {
font-size: 20px;
}