I am currently learning Bootstrap 5, html, and CSS. I am using these technologies to develop a website and implementing Bootstrap 5 to create cards. I wanted to make these cards clickable so that they can redirect users to another page on the website. However, even after adding anchor tags, the cards remain unclickable.
Test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home |</title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bea3bd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
...
Test.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: hsl(233, 47%, 96%);
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid hsl(216, 90%, 44%)
}
.crd {
background: hsl(233, 47%, 96%);
transition: all;
}
.crd:hover {
background: hsl(216, 90%, 44%);
color: #fff;
transition: 0.5s;
}
...
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: hsl(233, 47%, 96%);
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid hsl(216, 90%, 44%)
}
.crd {
background: hsl(233, 47%, 96%);
transition: all;
}
.crd:hover {
background: hsl(216, 90%, 44%);
color: #fff;
transition: 0.5s;
}
...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home |</title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beef5e8f5eb">[email protected]</a>/dist/css/bootstrap...