mhekel

Contact Form Neo-Brutalism

A Pen by Marie Hekel on CodePen.

License.

mhekel

/* –------------------–-----------
BrutalistCss - by @mhekel
*/

/* -------------------------------------------------------
   FONT IMPORTS
------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&display=swap");
@import url("https://fonts.cdnfonts.com/css/boldonse");

mhekel

/**
 * FCC - Playing Cards
 */

/* #5 — playing-cards uses flexbox, centers children, wraps, 20px gap */
#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;

mhekel

<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>

mhekel

Book shelf (reproducing @emmainSTEM project)

A Pen by Marie Hekel on CodePen.

License.

mhekel

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

mhekel

<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"/>

mhekel

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

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

mhekel

(AI Generated) Neo-Brutalism Admin Dashboard

A Pen by Marie Hekel on CodePen.

License.

mhekel

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

}
span {display: inline-block;}