Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="h-feed">
<div class="bookcards">
  <div class="h-cite u-rl bookcard" href="https://quickthoughts.jgregorymcverry.com/2020/06/28/monument-poems-new-and-selected">
    <div class="bookcard-body">
      <div class="bookcard-front">
      <h2 class="p-name">
        Monument
      </h2>
<img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/bdd19ed0f9cabd5569f868355e01ea4c/Screen+Shot+2020-06-28+at+7.35.33+AM.png">
        <p>Natasha Trethewey</p>
      </div>
      <div class="bookcard-back e-content">
      <p> Natasha Trethewey paints the past in brutal truths. Her collection of new and curated poems in Tretheway's skills as a historian of humanity. As she notes "Why is everything I see the past / I’ve tried to forget?"</p>
     <p>
     Often Trethewey shines the light of her stanza onto corners of history we have forgotten. these stories usually revolve around Mississippi where she grew up the child of biracial parents, Trethewey's mother who her stepfathered murdered, and deep seeded racism.</p>

<p>Through this lens Trethweay tells the story of the help, the dock workers, those forgottten during Katrina. She also finds historical artifacts such as piantings or the Race classification system used in Mexico.</p>
        <a href="https://quickthoughts.jgregorymcverry.com/2020/06/28/monument-poems-new-and-selected">Read Full Review</a>


</div>
    </div>
  </div>
 <div class="h-cite u-rl bookcard" href="https://quickthoughts.jgregorymcverry.com/2020/06/28/monument-poems-new-and-selected">
    <div class="bookcard-body">
      <div class="bookcard-front">
      <h2 class="p-name">
        Type Writer Rodeo
      </h2>
<img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/fa9a2a43ef6689508b0f0e8a37203163/thumb.jpg">
        <p>Jodi Egerton, David Fruchter, Kerri Ann Holt, Sean Petri</p>
      </div>
      <div class="bookcard-back e-content">
    <p> I could not put this collection down, still can't. In fact I turn to typewriter rodeo when ever I need a good dose of inspiration to slap me upside the head.</p>

<p>"Typewriter rodeo" tells the tale of four friends who write free improv poetry for people on typewriters. The grup heads out to events and conferences, asks for an idea and then the keys start chomping through history.</p>

<p>The authros gathered their poems and organized them into collections such as "love" "family" "whimsy", and "vunerability" to name a few</p>
        <a href="https://quickthoughts.jgregorymcverry.com/2020/06/28/monument-poems-new-and-selected">Read Full Review</a>


</div>
    </div>
  </div>
  <div class="h-cite u-rl bookcard" href="https://quickthoughts.jgregorymcverry.com/2020/05/14/fooling-with-words">
    <div class="bookcard-body">
      <div class="bookcard-front">
      <h2 class="p-name">
        Fooling with Words
      </h2>
<img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/0f1550ce223e129b922d02d518d97181/615561.jpg">
        <p>Bill Moyers</p>
      </div>
      <div class="bookcard-back e-content">
  <p>Few books make my, "Do not give away list." The highest rating I can give. Moyer's "Fooling with Words", make the cut as a poets guide to writing and living.</p>

<p>The book which involves a series of interviews with 11 poets at the Dodge Poetry festival would make a great gift or even a textbook in an Intro to Poetry class.</p>

<p>Each chapter, one for each poet overflows with advice and learning from some of the top masters of 20th Century American poets.</p>

<p>Based on who spoke at the festival some voices feel underrepresented. The age of the poets, many who lived lives three times over, also means fresh voices of Spoken Word and Hip Hop did not make the stage. Cervantes, Lamkin, Garrison, Geok-Lin Lim create space for critical voices but the book still feels quite white.</p>
        <a href="https://quickthoughts.jgregorymcverry.com/2020/05/14/fooling-with-words">Read Full Review</a>


</div>
    </div>
  </div>
    <div class="h-cite u-rl bookcard" href="https://quickthoughts.jgregorymcverry.com/2020/05/14/fooling-with-words">
    <div class="bookcard-body">
      <div class="bookcard-front">
      <h2 class="p-name">
        Sentinel
      </h2>
<img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/01b0c7d58126c00d7e0a042061c09da5/51GLyRdN9zL._SX319_BO1%2C204%2C203%2C200_.jpg">
        <p>Robert Hunter</p>
      </div>
      <div class="bookcard-back e-content">
  <p>When Hunter passed I ordered his collection Sentinel. Probably haven't seen it in twenty years and never really read the work.</p>

<p>Sure Hunter published all his books and poems online, from his own website,  before people knew what online meant but I like to read poetry on the shitter.</p>

<p>Right off the top you realize how different and same Hunter's poetry taste when the the words hit your tongue.</p>

<p>Same cascading truths peaking from cracks in the soul that we dig from deep within the earth but the poetry more sparse.</p>

<p>Hunter writes with many dichotomies and paradigms. A style, I realize, I emulate, but I never deeply studied his poetry like I have his lyrics.</p>
        <a href="https://quickthoughts.jgregorymcverry.com/2020/05/14/fooling-with-words">Read Full Review</a>


</div>
    </div>
  </div>
</div>
</main>
              
            
!

CSS

              
                :root { --time: 0.707s; }

.bookcards {
  display: grid;
}

.bookcard {
  perspective: 40rem;
}
.bookcards img {
   display: block;
    margin-left: auto;
    margin-right: auto;
width:50%;
}
.bookcard-body {
  display: flex;
  transform-style: preserve-3d;
  transition: var(--time) transform;

  .bookcard:hover &, .bookcard:focus & {
    transform: rotateX(-180deg);
  }
}

.bookcard-front, .bookcard-back {
  backface-visibility: hidden;
  min-width: 100%;
}
.bookcard-front, .bookcard-back img {
  backface-visibility: hidden;

}

.bookcard-back {
  transform: rotateX(-180deg) translate(-100%, 0);
}

/* Make it Pretty */

body {
  line-height: 1.3;
  font-family: sans-serif;
}

.bookcards {
  grid-gap: 4rem;
  grid-auto-rows: 1fr;
  padding: 3rem;
  background: whitesmoke;
  grid-template-columns: 1fr 1fr 1fr;
}
@media only screen and (max-width: 900px) {
  .bookcards{
    grid-template-columns: 1fr;
    justify-content: center;
  }
}
.bookcard {
  display: flex;
  transition: z-index, transform calc(var(--time) / 4);
  transition-delay: var(--time), 0s;
  text-decoration: none;
  color: inherit;
  z-index: 0;
  
  &:hover {
    transition-delay: 0s;
    z-index: 1;
  }

  &:active {
    transform: scale(0.975);
  }
}

.bookcard-body {
  border-radius: 0.25rem;
  flex: 3;
}

.bookcard-front, .bookcard-back {
  @extend .shadow;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  box-sizing: border-box;
  padding: 1.5rem;
  border-radius: 0.25rem;
}

.bookcard-front {
  font-size: 1.5rem;
}
.bookcard-back p {
  margin-bottom:1rem;
}
.shadow {
  box-shadow: 0 -1px 1px rgba(0,0,0,0.04), 
              0 2px 2px rgba(0,0,0,0.04), 
              0 4px 4px rgba(0,0,0,0.04), 
              0 8px 8px rgba(0,0,0,0.04),
              0 16px 16px rgba(0,0,0,0.04); 
}

              
            
!

JS

              
                
              
            
!
999px

Console