How can I add a clickable link to this 3D floating box in html/css?

Question

On this 3d box i made: https://www.lifetimereserve.co/splash/

I want to the be able to click the red text that says "lifetime" that is on the front face of the spinning cube.

When I add the link to the text, it doesn't seem to be clickable. I want the link to take you here: www.lifetimereserve.co

the git file is here: https://github.com/dmike23/ltr-splash

Answer 1

Hello Michael!

I took a look at your webpage, it's very cool.

You've currently got the link applied to the text, like so:

<a href="www.lifetimereserve.co">LIFETIME</a>

If I use Chrome Developer Tools and right-click the spinning box, and choose "Inspect," it can highlight parts of the screen while I hover over their HTML. It looks like the other things that occupy the same "space" as that text are the <div class="face ft">, the <div class="text3">, and the <div class="photon-shader">. When I right-click on any face of the box, the HTML element that it selects is the <div class="photon-shader"> on the relevant face.

So! Based on all that information, if you put the link around the "photon-shader" div, it will make that face become a clickable link.

Here's a code snippet of what it should look like (you have to promise not to copy and paste this!):

<div class="face ft">

<div class="text3">

LIFETIME

</div>

<a href="https://www.lifetimereserve.co/">

<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>

</a>

</div>

Answer 2

It looks like the red text on the front face of the spinning cube is actually an image, not text. To make the image clickable, you need to add an HTML link around the image tag.

Here's how you can do it:

1. Open the "index.html" file in your project.
2. Find the line of code that contains the image for the "Lifetime" text. It should look like this:

<img src="images/lifetime.png" alt="Lifetime">

1. Wrap the image tag with an HTML link tag like this:

<a href="http://www.lifetimereserve.co"><img src="images/lifetime.png" alt="Lifetime"></a>

1. Save the changes to the file and test the link by opening the "index.html" file in your web browser.

This should make the "Lifetime" image clickable and take you to the desired link when clicked.