Coding the index.html page

Now open the index.html and, at the beginning of the document, change the title of the web page from Hello! to AR Training Web App. You can leave the rest of the code between the <head> </head> tags as it is. Now, remove everything between the <body> </body> tags (if you want, you can leave the last two lines with the Glitch button).

Now, let's add the title and the three boxes for the models inside the <body> tags:

Add the title between <h1> tags so that it uses our .css file's style:

<h1>Select a gearbox to display in AR</h1>

Now, after the title, add the first box with the title on top and the CC BY message at the bottom:

<div class="box">
   <h2>Planetary Gearbox</h2>
   <div class="cc"> 
     <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
         <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg">
         <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg">
     </a> 
     &nbsp;&nbsp; 
     <a href="https://sketchfab.com/3d-models/gearbox-planetary-2bee7992d266456aaef1f1394b0ebb98" target="_blank">T-FLEX CAD ST (Free)</a>
   </div>
</div>

The main component is the box class. Inside it, we have the title in <h2> format and the cc class with a link to the license, the two images from creativecommons to identify the CC BY license type, and the author of the model with a link to the Sketchfab page where it comes from.

Do the same for the other two models:

<div class="box"> 
      <h2>Worm Gearbox</h2>
      <div class="cc"> 
        <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
          <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg">
          <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg">
        </a> 
        &nbsp; &nbsp;
        <a href="https://sketchfab.com/3d-models/warm-gearbox-e7fedd86a90b4c46a53fe88882e66aa3" target="_blank">T-FLEX CAD ST (Free)</a>
      </div>
    </div>
    <div class="box"> 
      <h2>Conical Gearbox</h2>
      <div class="cc"> 
        <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
          <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg">
          <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg">
        </a> 
        &nbsp; &nbsp;
        <a href="https://sketchfab.com/3d-models/gearbox-conical-60f023924ee0456daa758eb590b6064b" target="_blank">T-FLEX CAD ST (Free)</a>
      </div>
</div>

At the moment, your project should look like this:

The web page with the three boxes

Now, we have to include the 3D models with the <model-viewer> Component.

Table of Contents for Coding the index.html page

Create new playlist

Sign In

Sign Up

Table of Contents for
Coding the index.html page