Initial Commit
This commit is contained in:
BackwardsUser
commit
249c6bd553
BIN
images/placeholders/NationalGeographic_2572187_3x2.avif
Normal file
BIN
images/placeholders/NationalGeographic_2572187_3x2.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
images/placeholders/cut cat serhio 02-1813x1811-720x719.jpg
Normal file
BIN
images/placeholders/cut cat serhio 02-1813x1811-720x719.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
images/placeholders/gettyimages-1067956982.webp
Normal file
BIN
images/placeholders/gettyimages-1067956982.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
images/placeholders/images.jpg
Normal file
BIN
images/placeholders/images.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
7
index.html
Normal file
7
index.html
Normal file
@ -0,0 +1,7 @@
|
||||
<h1>Main</h1>
|
||||
<a href="main-mobile-portrait.html">mobile - portrait</a>
|
||||
<a href="main-mobile-landscape.html">mobile - landscape</a>
|
||||
<a href="main-web.html">web</a>
|
||||
|
||||
<h1>Post View</h1>
|
||||
<a href="post-mobile-portrait.html">mobile - portrait</a>
|
||||
115
main-mobile-landscape.html
Normal file
115
main-mobile-landscape.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!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>
|
||||
113
main-mobile-portrait.html
Normal file
113
main-mobile-portrait.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!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">
|
||||
<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>
|
||||
<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>
|
||||
<nav id="footer" class="fixed-bottom w-100 bg-body py-3">
|
||||
<ul class="d-flex flex-row justify-content-evenly list-unstyled">
|
||||
<li>
|
||||
<a href="#chat" class="text-black border-black border p-2 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 p-2 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 p-2 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>
|
||||
|
||||
<style>
|
||||
#content {
|
||||
padding-bottom: 6.5rem !important;
|
||||
grid-template-columns: repeat(2, 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;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-radius: 25% 25% 0 0;
|
||||
border-top: var(--bs-secondary-bg) solid 2px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
201
main-web.html
Normal file
201
main-web.html
Normal file
@ -0,0 +1,201 @@
|
||||
<!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>
|
||||
102
post-mobile-portrait.html
Normal file
102
post-mobile-portrait.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!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>
|
||||
<div id="content" class="W-100 d-flex flex-column">
|
||||
<div id="carousel" class="mw-100 pt-4">
|
||||
<div id="before" class="item">
|
||||
<img src="https://api.backwards.dev/images/cat1.jpg" alt="">
|
||||
</div>
|
||||
<div id="current" class="item">
|
||||
<img src="https://api.backwards.dev/images/cat2.jpg" alt="">
|
||||
</div>
|
||||
<div id="after" class="item">
|
||||
<img src="https://api.backwards.dev/images/cat3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="details">
|
||||
<div class="row">
|
||||
<span id="critter-type" class="row-item neu-out-flat">Cat</span>
|
||||
<span id="date-found" class="row-item neu-out-flat">03/04/2025</span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
#before {
|
||||
transform: translateX(-50%) translateX(-3em) scale(0.9);
|
||||
}
|
||||
|
||||
#current {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#after {
|
||||
transform: translateX(-50%) translateX(3em) scale(0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#content {
|
||||
height: 42vh;
|
||||
}
|
||||
|
||||
#details {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.row {
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.row-item {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
padding: .25em 2em;
|
||||
}
|
||||
|
||||
.neu-out-flat {
|
||||
border-radius: 18px;
|
||||
background: #e0e0e0;
|
||||
box-shadow: 20px 20px 60px #bebebe,
|
||||
-20px -20px 60px #ffffff;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 65vw;
|
||||
height: 65vw;
|
||||
position: absolute;
|
||||
background-color: var(--bs-secondary-bg);
|
||||
border-radius: 18px;
|
||||
border: 1px solid #e0e0e0a1;
|
||||
/* background: #e0e0e0;
|
||||
box-shadow: 20px 20px 60px #bebebe,
|
||||
-20px -20px 60px #ffffff;
|
||||
padding: .5em; */
|
||||
overflow: hidden;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
img {
|
||||
aspect-ratio: 1/1;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user