cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              article
  .hero
  .content
    h1 The Long Road Home
    .content__header
      h2 A fighting spirit and a passion for hockey are in the blood of courageous North Dakota Senior
      span By Jess Myers
    .content__copy
      p Blood. It's where a passion for University of North Dakota hockey lives in Lisa Marvin. Skating for the team now known as the Fighting Hawks isn't just something she does while pursuing her communications degree. It's ingrained her DNA.
      p Her older sister Layla played four seasons at North Dakota, and was the team capatain last year. Their father spent four seasons manning the blue line for the team then known as the Fighting Sioux. So did a trio of uncles and cousins. Her grandfather, Cal Marvin, started the school's hockey program not long after World War II.
      p When Lisa committed to play for North Dakota after an amazingly successful youth and high school hockey career in her hometown of Warroad, Minn., it was perhaps the least-surprising recruiting news in the history of college sports. She scored more state tournament points than any Minnesota high school player ever, and notched 94 points as a senior.
      p But the transition to college hockey was tough. Lisa had just one goal as a freshman. The following season, she was off to another challenging start, but had a goal to her credit after playing five games.
      p Then, on a seemingly normal cold November 2014 afternoon, her truck ran out of gas on the shoulder of a busy street not far from campus. She hiked to a nearby gas station and was filling the truck, sure to be on her way soon. She doesn't remember the rest.
      h3 Fateful Day
      p Blood. It's one of the first things Layla noticed when she got to the hospital. It was streaked in Lisa's hair, along with pieces of glass. David and Kallie, and their parents were at work in the restaurant and motel they own, 135 miles away, when they got a frantic call from Layla. They called the Grand Forks hospital. Lisa was there, in the emergency room. She was alive and stable, but the parents were advised to get there ASAP.
      p A few hours later, they found their youngest daughter covered in blankets. The room smelled of gasoline. Her right arm was a mangled mess, broken in three places, with a three-inch section of bone gone and a hole bigger than a bottle cap, where bone had punctured skin. All of the ligaments in Lisa's right knee were shredded. Nerve damage had curled her right hand and wrist into a paralyzed fist.
      p Blood. It's red. The same color as the car that came speeding down the road that day. While Lisa stood by the shoulder, pouring gas into her truck, an 18-year-old driver was racing with a friend in another car. He list control, and slammed into the back of Lisa's truck. Witnesses later recounted to police that the impact sent her body flying through the air.
      p The driver was later charged with aggravated reckless driving, and spent several months in jail. Lisa's sentence was considerably lengthier.
            
          
!
            
              $green: #009a49;
body {
  margin: 0;
}
article {
  display: flex;
  
}
.hero {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/81080/pr-hoodie.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 52%;
  height: 100vh;
  clip-path: polygon(0 0, 91% 0, 76% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 91% 0, 76% 100%, 0 100%);
}
.content {
  width: 47%;
  &__header {
    width: 37%;
    padding-right: 3%;
    text-align: right;
    display: inline-block;
    vertical-align: top;
    h2 {
      font-family: sans-serif;
      text-transform: capitalize;
      color: #969696;
      margin-top: 0;
    }
    span {
      font-family: sans-serif;
    }
  }
  &__copy {
    width: 54%;
    padding-left: 3%;
    padding-right: 3%;
    border-left: 1px solid #969696;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
  }
}

h1 {
  font-family: "bee", sans-serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 12vw;
  margin: 10% auto 5% -30%;
  padding-left: 8%;
  z-index: 1;
  line-height: 1;
  position: relative;
  align-self: flex-start;
  width: 100%;
  color: #000;
  letter-spacing: 2px;
  &:after {
    content: '';
    display: inline-block;
    background-color: #FFF;
    width: 100%;
    height: 130%;
    position: absolute;
    left: -7%;
    right: 0;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(16% 0%, 100% 0, 100% 100%, 8% 100%);
    -webkit-clip-path: polygon(16% 0%, 100% 0, 100% 100%, 8% 100%);
  }
}
p {
  margin-bottom: 0;
  margin-top: 0;
  text-indent: 1.5em;
  font-size: 0.8rem;
  &:first-of-type {
    text-indent: 0;
  }
  &:nth-of-type(1) {
    &::first-letter {
      float: left;
      font-size: 9em;
      margin: -0.2em 0.04em -0.2em 0;
      font-family: "bee", sans-serif;
      font-weight: bold;
    }
  }
}
h3 {
  color: $green;
  margin-bottom: 0.1rem;
  font-family: sans-serif;
  & + p {
    text-indent: 0;
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console