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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <h1>I'm Elizabeth Yalkut.</h1>
<p>I make things. I make food, novels, websites, mistakes, friendships, and pots of tea. Among others. (The tea and websites are my favorites.)
</p>
<p>I'm one-half of the <a href="http://irregulargentlewomen.org">Irregular Gentlewomen</a>, a hacktivist collective dedicated to curiosity, feminism, and dragons, and which <a href="https://github.com/irregulargentlewomen">open sources code</a>.</p>
<div>
  <input type="radio" id="select-all" name="button">
  <label for="select-all" class="label-all"> All </label>
  <input type="radio" id="select-personal" name="button">
  <label for="select-personal" class="label-personal"> Personal </label>
  <input type="radio" id="select-wfh" name="button">
  <label for="select-wfh" class="label-wfh"> Work-For-Hire </label>
</div>

<ul class="gallery">
  <li class="wfh-item">
    <img src="https://assets.codepen.io/65525/qfastr.jpg" alt="">
    <p>A private dashboard to allow a donor to track the impact their donation has had.</p>
  </li>
  <li class="wfh-item tall">
    <a href="https://hms.harvard.edu">
      <img src="https://assets.codepen.io/65525/hms.png" alt=""></a>
    <p>The flagship site for Harvard Medical School</p>
  </li>
  <li class="wfh-item">
    <img src="https://assets.codepen.io/65525/datamanagement.jpg" alt="">
    <p>The <a href="https://datamanagement.hms.harvard.edu">
        Harvard Longwood Medical Area Research Data Management Working Group</a> provides information and resources to better support research throughout the data lifecycle.</p>
  </li>
  <li class="wfh-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65525/Live_Well___Learn_Well.png" alt="">
    <p> <a href="http://wellbeing.columbia.edu">
        Live Well | Learn Well</a> aims to create a campus culture that values and promotes individual well-being and a healthy community for undergraduates at Columbia University. </p>
  </li>
  <li class="wfh-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65525/Core_to_Commencement.png" alt="">
    <p>The <a href="http://college.columbia.edu/campaign">Core to Commencement Campaign</a> is a $400 million fundraising and engagement campaign, the first-ever fundraising and engagement campaign to be dedicated exclusively to Columbia College, to enhance the College's undergraduate liberal arts education and support students and faculty.</p>
  </li>
  <li class="wfh-item">
    <img src="https://assets.codepen.io/65525/holder-2021.jpg" alt="">
    <p>The <a href="http://holder.college.columbia.edu">
        Eric H. Holder, Jr. Initiative for Civil and Political Rights</a> fosters scholarly inquiry, policy debate, and public engagement that draws on the principles of the Core Curriculum.</p>
  </li>
  <li class="wfh-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65525/Study_Abroad___Global_Programs_and_Fellowships.png" alt="">
    <p><a href="http://ogp.columbia.edu">Global Programs</a> develops, coordinates, implements, and collaborates with other units at Columbia to support academic and co-curricular opportunities &mdash; including study abroad, global internships, global service-learning, global research and global courses on campus and abroad &mdash; for global learning and engagement for all undergraduates during their Columbia University journey.</p>
  </li>
  <li class="wfh-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65525/Columbia_College_Alumni_Association.png" alt="">
    <p>The <a href="http://college.columbia.edu/alumni">Columbia College Alumni Association</a> provides rich opportunities for alumni to stay involved, have an impact and promote the success of Columbia College. </p>
  </li>
  <li class="wfh-item"><img src="https://assets.codepen.io/65525/givingday-2014.png" />
      <p>Columbia University raised $7.8 million during its second annual Giving Day, with a significant social media presence.</p>
    </a></li>
  <li class="wfh-item"><img src="https://assets.codepen.io/65525/planning-performance.png" />
      <p>The <a href="https://www.tugboatcreatives.com/planning-performance-tool">Planning &amp; Performance Tool</a> is an online tool designed to track the annual goals, projects and performance for individuals and teams at the Office of Alumni and Development at Columbia University.</p>
   </li>
  <li class="personal-item"> <img src="https://assets.codepen.io/65525/lettershome.png" />
    <p><a href="https://codepen.io/elizabethyalkut/full/vjABF">Letters Home</a> is an interactive poem.</p>
    </a> </li>
  <li class="wfh-item"> <a href="https://giving.columbia.edu/givingday"><img src="https://assets.codepen.io/65525/givingday-2013.png" />
      <p>Columbia Giving Day 2013</p>
    </a> </li>
  <li class="personal-item tall"><img src="https://assets.codepen.io/65525/wendyclock-cropped.png" />
    <p><a href="http://irregulargentlewomen.org/wendyclock">#wendyclock</a> is a timeline for Texas State Senator Wendy Davis' thirteen-hour-long filibuster to block Senate Bill 5, a measure which included more restrictive abortion regulations for Texas.</p>
    </a> </li>
  <li class="wfh-item"> <img src="https://assets.codepen.io/65525/artsaccess.png" />
    <p><a href="https://alumniarts.columbia.edu">Arts Access</a> allows Columbia University affiliates to receive invitations to exclusive events, ongoing discounts and benefits from Cultural Partners.</p>
   </li>
  <li class="wfh-item"> <a href="https://careers.alumdev.columbia.edu/"><img src="https://assets.codepen.io/65525/mycolumbiacareer.png" />
      <p>My Columbia Career</p>
    </a> </li>
  <li class="personal-item"><img src="https://assets.codepen.io/65525/ratedr.png" />
    <p><a href="https://ratedrforrapist.herokuapp.com/">Rated R For Rapist</a> provides information about whether a movie has been made in part by people who have chosen to collaborate with or otherwise support Roman Polanski.</p>
    </a></li>
  <li class="personal-item"> <a href="https://irregulargentlewomen.github.io/feminist-bingo/"><img src="https://assets.codepen.io/65525/bingo.png" />
      <p>The <a href="https://irregulargentlewomen.github.io/feminist-bingo/">Interactive Feminist Bingo Card</a> is meant to be an easy way for commenters in online feminist venues to identify sexist and misogynistic trolls, provide validation of a commenter’s judgement that a troll is genuinely trolling and not just clueless, and suggest responses to some of the remarks the troll has made.</p>
    </a> </li>
  <li class="wfh-item"> <img src="https://assets.codepen.io/65525/macarthur.png" />
    <p>The <a href="http://www.macfound.org">John D. and Catherine T. MacArthur Foundation</a> supports creative people, effective institutions, and influential networks building a more just, verdant, and peaceful world.</p>
    </a>
  </li>
</ul>
</div>
              
            
!

CSS

              
                 @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,600;1,300;1,600&display=swap');
body {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.4" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  width: 90vw;
    font-family: 'Josefin Sans', sans-serif;
  font-size: 100%;
}
ul {
  padding: 0;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(1, minmax(20rem, 1fr));
  @media (max-width: 599px) {
    grid-template-columns: repeat(2, minmax(20rem, 1fr));
  }
  @media (min-width: 600px) {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }
  // all sizes
  li {
    /* for flexbox */
    flex: 1 1 30%;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3));
    transition: filter 0.25s ease-in-out;
    list-style-type: none;
    padding: 0.25rem;
    border: 1px solid #ccc;
    background-color: rgba(white, 0.2);
    img {
      width: 100%;
      background-color: white;
    }
    &:hover {
      filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
      img {
        border-color: #999;
      }
    }
  }
}
label {
  cursor: pointer;
  background-color: rgba(#323131, 0.7);
  color: #fff;
  font-size: 1.6em;
  transition: all ease-in 0.25s;
  padding: 0.5rem 0.75rem;
  &:hover {
    color: rgba(#096, 0.7);
    background-color: rgba(#323131, 0.2);
  }
}
input {
  position: absolute;
  opacity: 0;
}
a {
  color: #096;
  font-spacing: 3px;
  font-weight: 600;
  transition: all .3s ease;
  &:hover {
    font-style: italic;
  }
}
/*Select Categories*/
input#select-personal:checked ~ .gallery li:not(.personal-item),
input#select-wfh:checked ~ .gallery li:not(.wfh-item) {
  opacity: 0.1;
}
input:checked + label {
  color: #096;
}

              
            
!

JS

              
                
              
            
!
999px

Console