201 lines
11 KiB
HTML
201 lines
11 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-100 d-flex justify-content-center text-center">
|
|
<select name="critter-type" id="critter-type" class="form-select text-center w-25 neumorphism-out-flat">
|
|
<option value="cat" selected>Cat</option>
|
|
<option value="dog">Dog</option>
|
|
<option value="bird">Bird</option>
|
|
</select>
|
|
</header>
|
|
<nav id="nav" class="fixed-top bg-body mt-2 me-2 neumorphism-in-flat" style="width: max-content;">
|
|
<ul class="d-flex flex-column justify-content-evenly list-unstyled p-1 m-0 w-100 gap-2">
|
|
<li>
|
|
<a href="#chat" class="text-black m-0 rounded-circle neumorphism-button 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 m-0 rounded-circle neumorphism-button 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 m-0 rounded-circle neumorphism-button 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 pt-2 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>
|
|
<div id="card9" 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="card10" 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="card11" 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="card12" 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="card13" 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="card14" 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="card15" 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="card16" 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;
|
|
}
|
|
|
|
.neumorphism-out-flat {
|
|
border-radius: 50px;
|
|
background: #e0e0e0;
|
|
box-shadow: 20px 20px 60px #bebebe,
|
|
-20px -20px 60px #ffffff;
|
|
}
|
|
|
|
.neumorphism-button {
|
|
border-radius: 50px;
|
|
background: linear-gradient(145deg, #cacaca, #f0f0f0);
|
|
box-shadow: 10px 10px 20px #bebebe,
|
|
-10px -10px 20px #ffffff;
|
|
}
|
|
|
|
.neumorphism-in-flat {
|
|
border-radius: 50px;
|
|
background: #e0e0e0;
|
|
box-shadow: inset 20px 20px 60px #bebebe,
|
|
inset -20px -20px 60px #ffffff;
|
|
}
|
|
|
|
.neumorphism-in-rounded {
|
|
border-radius: 50px;
|
|
background: linear-gradient(145deg, #cacaca, #f0f0f0);
|
|
box-shadow: 20px 20px 60px #bebebe,
|
|
-20px -20px 60px #ffffff;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |