115 lines
6.2 KiB
HTML
115 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<title>Main</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="w-25 d-flex justify-content-center">
|
|
<select name="critter-type" id="critter-type" class="form-select text-center">
|
|
<option value="cat" selected>Cat</option>
|
|
<option value="dog">Dog</option>
|
|
<option value="bird">Bird</option>
|
|
</select>
|
|
</header>
|
|
<nav id="nav" class="fixed-top w-25 bg-body" style="width: max-content;">
|
|
<ul class="d-flex flex-row justify-content-evenly list-unstyled p-1 m-0 w-100">
|
|
<li>
|
|
<a href="#chat" class="text-black border-black border m-0 rounded-circle d-block text-decoration-none"
|
|
style="aspect-ratio: 1/1; width: 3rem;"><i
|
|
class="bi bi-chat-right-dots w-100 h-100 d-flex justify-content-center align-items-center text-decoration-none"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#search" class="text-black border-black border m-0 rounded-circle d-block text-decoration-none"
|
|
style="aspect-ratio: 1/1; width: 3rem;"><i
|
|
class="bi bi-search w-100 h-100 d-flex justify-content-center align-items-center text-decoration-none"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#profile" class="text-black border-black border m-0 rounded-circle d-block text-decoration-none"
|
|
style="aspect-ratio: 1/1; width: 3rem;"><i
|
|
class="bi bi-person-fill w-100 h-100 d-flex justify-content-center align-items-center text-decoration-none"></i></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main id="content" class="px-1 py-3 d-grid justify-content-center">
|
|
<div id="card1" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-1" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/NationalGeographic_2572187_3x2.avif" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100"
|
|
alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card2" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-2" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/cut cat serhio 02-1813x1811-720x719.jpg" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100"
|
|
alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card3" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-3" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/gettyimages-1067956982.webp" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100"
|
|
alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card4" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-4" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/images.jpg" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100" alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card5" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-1" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/NationalGeographic_2572187_3x2.avif" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100"
|
|
alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card6" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-2" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/cut cat serhio 02-1813x1811-720x719.jpg" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100"
|
|
alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card7" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-3" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/gettyimages-1067956982.webp" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100"
|
|
alt="A picture of a cat"></a>
|
|
</div>
|
|
<div id="card8" class="card rounded-4 border-secondary-subtle bg-secondary-subtle border"
|
|
style="padding: 2px;border: 1em;width: 95%;height: 95%;">
|
|
<a href="item-4" class="text-decoration-none user-select-none w-100 h-100" style="border-radius: inherit; aspect-ratio: 1/1;"><img
|
|
src="./images/placeholders/images.jpg" draggable="false" class="c-card-image mw-100 mh-100 w-100 h-100" alt="A picture of a cat"></a>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
#content {
|
|
padding-top: 1.5rem !important;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.c-card-image {
|
|
border-radius: inherit;
|
|
object-fit: cover;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
#nav {
|
|
border-left: var(--bs-secondary-bg) solid 2px;
|
|
border-bottom: var(--bs-secondary-bg) solid 2px;
|
|
border-radius: 0 0 0 1em;
|
|
left: auto;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |