Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

"Verão" fica sobre os cards

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.

6 respostas

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 :}

Segue endereço com todos os arquivos no github: https://github.com/hebertfantinatto/svgproject

solução!

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!