Make link open on card click - html

Question

I'm a beginner and I'm making a website in HTML. It's mostly formed of cards, and some of the cards link to other pages (for example, a biography). I want some of my cards, upon click, to take me to another webpage. I have a card class:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 10px;
width: 70%;
margin: auto;
}
And another class to make the card look nice:
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
So when the mouse hovers over certain cards, the card's shadow increases. These are the cards I want to have links (only two so far). Other non-link cards have a different class.
Is there a way to make the cards using the card class to link to another page when clicked? It should be if there's a click anywhere on the card, not just the text.

Answer 1

You do wrap the <a> tag around the card content but you need to add another class around the tag or else the areas to the sides can be clicked. This keeps it just to the card.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
width: 100%;
}
.card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
.control-width { width: 70%; margin: auto; }
.card2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
margin: auto;
width: 70%;
}
.card2:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
<div class="control-width">
<a href="your-link-bio">
<div class="card">
<h1>Card Header</h1>
<h3>Card Sub Header</h3>
<p>Card Description Card Description Card DescriptionCard DescriptionCard Description<p>
</div>
</a>
</div>
<a href="your-link-bio">
<div class="card2">
<h1>Card Header</h1>
<h3>Card Sub Header</h3>
<p>Card Description Card Description Card DescriptionCard DescriptionCard Description<p>
</div>
</a>