Mesmo copiando o código do projeto final o svg "Verão" fica no meio da página sobre os cards e não sobre o oceano.
Mesmo copiando o código do projeto final o svg "Verão" fica no meio da página sobre os cards e não sobre o oceano.
Oi, Hebert, tudo bem?
Você revisou o seu código com o do projeto do curso que a instrutora está usando? Faça uma comparação do seu código com o da instrutora onde está dando esse problema. E se caso não consiga, coloca aqui o seu código :}
<header class="container-header">
<img src="assets/vectors/praia-caiaques.svg" alt="">
<svg class="lett-header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 728.4 290.09">
<title>lett-titulo</title>
<g id="lettering">
<g>
<path (ocultei o d= por causa do tamanho)>
<path (ocultei o d= por causa do tamanho)>
<g>
<path (ocultei o d= por causa do tamanho)>
<path (ocultei o d= por causa do tamanho)>
</g>
</g>
</g>
<g id="exclamacao">
<path (ocultei o d= por causa do tamanho)>
</g>
</svg>
</header>
body { margin: 0; background-color: #FFEAD4; overflow-x: hidden; }
.container-header { width: 100vw; }
.lett-header { position: absolute; left: 50%; transform: translate(-50%); width: 80%; margin-top: 10%; fill: transparent; animation: lett-preenchimento 0.5s ease-in-out forwards 4s; }
.lett-header path { stroke-width: 2px; stroke: #BE253F; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: lett-tracado 5s ease-in-out forwards 1s; }
h1, h2 { font-family: 'Pacifico', cursive; color: #BE253F; text-align: center; }
h1 { font-size: 3em; }
h2 { font-size: 1.5em; }
p { font-family: 'Lato', sans-serif; color: #484848; font-size: 1em; }
.container-cards { width: 80%; margin: auto; display: flex; }
.card { background-color: white; border-radius: 10px; width: 50%; padding: 20px; margin: 20px; }
.lett-footer { width: 60%; fill: #fff; opacity: 0.7; position: absolute; left: 20%; margin-top: 20%; }
.container-footer { position: relative; }
.footer-infos { text-align: center; }
@keyframes lett-preenchimento { to { fill: #BE253F; } }
@keyframes lett-tracado { to { stroke-dashoffset: 0; } }
Oi, Hebert, tudo bem?
Olhando o seu código ele está de acordo com o da instrutora. Você conseguiria colocar o seu código no github? Ficará mais fácil de testar e visualizar melhor :}
Oi, Hebert, tudo bem?
Eu baixei o sue código e abri aqui, e o nome Verão! apareceu corretamente em cima do oceano, segue: https://imgur.com/a/r8a3WUX
Não sei o q acontece. No meu continua com o mesmo problema. Mas se tá funcionando tá bom. Deve ser algum problema na minha máquina. Obrigado!