Skip to main content

DO IT part 1: HTML

· 2 min read

In the first part, I define the structure of HTML.

To develop the 3D text, I created an HTML file and called it index.html, I created a CSS file, index.css, and I created a JS file, index.js. In this post, I will talk about HTML.

Defining the structure​

The structure is very simple, with the highlights being:

  • Line 10: CSS file link
  • Lines 11 to 13: links of the font used, Montserrat
  • Line 17: div.wrapper centers the content and applies perspective for the three-dimensional effect
  • Line 18: div.container contains the div.text, which is styled and manipulated for interaction
  • Line 23: JS script
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
/* CSS goes here */
index.js
/* JS goes here */

Current result​

With the structure defined, I obtained the following result:

Conclusion​

Having defined the structure, I moved on to styling with CSS: DO IT part 2: CSS.

Recommended reading​