DM Elysium mhekel

Book Inventory App

Projct for fcc

(AI Generated) Neo-Brutalism Admin Dashboard

3D Book Browsing

A CSS-only demo that simulates picking books off a shelf and previewing a page (on hover) in first-person. It all works using labels and offscreen radio inputs for each book, and a reset input as a Return button allows you to put everything back to its original position. I made up almost all the titles which parody random novels, developer attitudes, and some dark Internet things.

Notes

No 3D support in IE
Strange state animation behavior in Safari I have no idea how to fix

Update 12/13/23: Restored after being broken by Sass upgrade

Book shelf (reproducing @emmainSTEM project)

A Pen by Marie Hekel on CodePen.

License.

	<body>
	<!-- Page heading -->
	<h1>Book Inventory</h1>

	<!-- Main table containing the book data -->
	<table>
	<!-- Table header section -->
	<thead>
	<tr>
	<!-- Column labels -->

	<body>
	<!-- Page heading -->
	<h1>Book Inventory</h1>

	<!-- Main table containing the book data -->
	<table>
	<!-- Table header section -->
	<thead>
	<tr>
	<!-- Column labels -->

	/**
	* Book Inventory App
	*/
	body {
	background: #f06;
	background: linear-gradient(45deg, #e5e5e5, #A3A3A3);
	min-height: 100%;

	}
	span {display: inline-block;}

	.case {
	border: 2rem solid #ccc;
	}

	.shelf {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 15rem;
	background: linear-gradient(to top, #666, #777 5%);

	<form class="container">
	<input type="radio" name="title" id="book1"/>
	<input type="radio" name="title" id="book2"/>
	<input type="radio" name="title" id="book3"/>
	<input type="radio" name="title" id="book4"/>
	<input type="radio" name="title" id="book5"/>
	<input type="radio" name="title" id="book6"/>
	<input type="radio" name="title" id="book7"/>
	<input type="radio" name="title" id="book8"/>
	<input type="radio" name="title" id="book9"/>

	<main id="playing-cards">


	<div class="card hearts" id="hearts">
	<div class="left heart">K♥</div>
	<div class="middle">
	<div class="heart">♥</div>
	<div class="heart">♥</div>
	<div class="heart">♥</div>
	</div>