Pular para o conteúdo principal

DO IT parte 1: HTML

· Leitura de 2 minutos

Na primeira parte, defino a estrutura do HTML.

Para desenvolver o texto tridimensional, criei um arquivo HTML e o chamei de index.html, criei um arquivo CSS, index.css, e criei um arquivo JS, index.js. Nesta postagem, falarei sobre o HTML.

Definindo a estrutura​

A estrutura é bem simples, sendo os destaques:

  • Linha 10: link do arquivo CSS
  • Linhas 11 a 13: links da font usada, Montserrat
  • Linha 17: div.wrapper centraliza o conteúdo e aplica perspectiva para o efeito tridimensional
  • Linha 18: div.container contém o div.text, que é estilizado e manipulado para interação
  • Linha 23: script JS
index.html
<!DOCTYPE html><html lang="en">  <head>    <title>DO IT!</title>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="./index.css" />    <link rel="preconnect" href="https://fonts.googleapis.com" />    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet" />  </head>  <body>    <div class="wrapper">      <div class="container">        <div class="text">DO IT!</div>      </div>    </div>    <script src="./index.js"></script>  </body></html>
index.css
/* o CSS entrará aqui */
index.js
/* o JS entrará aqui */

Resultado atual​

Com a estrutura definida, obtive o seguinte resultado:

Conclusão​

Tendo a estrutura definida, segui para a estilização com CSS: DO IT parte 2: CSS.

Leitura recomendada​