Is there a way for the user to click anywhere in these boxes and be directed to the file in the link?
If this is currently not possible, what steps can I take to implement it?
https://i.sstatic.net/Dhz9J.png
Below is the code for the cards.
<div class="card card1">
<br>
<a href="breathing-tool.html">Rhythmic Breathing Guide</a>
<br>
<br>
<p> Proper breathing helps to reduce anxiety by increasing the flow of oxygen throughout the body.
<br> <br>
This exercise is designed to deliver the best timing of deep breathing suggested by health specialists.
<br> <br>
Practice this for 5 to 10 minutes daily.
</p>
</div>
<div class="card card2">
<br>
<a href="pink-meditation.html">Pink Meditation</a>
<br>
<br>
<p> This is a meditation space to help calm and reduce anxiety.</p>
<br>
<p> This design was inspired by the psychological calming effects of the color pink which has been used in famous arts. </p>
<br>
<p> Please use this for no more than 20 to 30 minutes a day, as long periods of exposure to pink can have adverse effects. </p>
</div>
<div class="card card3">
<br>
<a href="quote-generator.html"> Quote Generator</a>
<br>
<br>
<p> This is a collection of quotes that you can read when you need to be inspired. </p>
<br>
<p> A motivational quote has the power to affect your mood leading to positive changes in the way you act and react. </p>
<br>
<p> Reading a few of these positive quotes at the beginning of the day can make a positive impact on your mindset. </p>
</div>
CSS
.card{
width: 200px;
height: 230px;
font-size: 11px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;