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

              
                <div class="demo">

  <div class="demo-header-container">
    <div class="demo-header">
      <h1 class="vertical">THINK DIFFERENT</h1>
      <h1 class="dob">1955-2011</h1>

      <div class="demo-text-area">
        <p>
      <span class="rainbow-text">"Here's to the crazy ones. The misfits. The rebels. The troublemakers.
      The round pegs in the square holes.</span>
      <span class="rainbow-text">The ones who see things differently.
      They're not fond of rules. And they have no respect for the status quo.
      You can quote them,</span>
      <span class="rainbow-text"> disagree with them, glorify or vilify them.
      About the only thing you can't do is ignore them.</span>
      <span class="rainbow-text">Because they change things. They push the human race forward.
      And while some may see them as the crazy ones,</span>
      <span class="rainbow-text">we see genius.
      Because the people who are crazy enough</span>
      <span class="rainbow-text"> to think they can change the world,
      are the ones who do."</span>
        </p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" class="apple-logo" width="500" height="550" viewBox="0 0 500.00001 549.99998" overflow="visible" xml:space="preserve" style="overflow:visible"><g id="g3" transform="matrix(.98693 0 0 .99106 3.5 .907)" stroke-miterlimit="2.6131"><path clip-rule="evenodd" d="M25.824 200.612c.166-.273.342-.542.518-.806 28.447-43.799 73.32-69.434 115.518-69.434 42.969 0 69.98 23.555 105.498 23.555 34.463 0 55.454-23.589 105.132-23.589 37.534 0 77.329 20.439 105.674 55.781-7.837 4.292-14.907 9.165-21.226 14.521l-411.114-.028z" id="path5" style="fill:#61bb46;fill-rule:evenodd;stroke:#61bb46;stroke-width:2.9849;stroke-miterlimit:2.61310005"/><path clip-rule="evenodd" d="M314.808 90.875c18.032-23.159 31.748-55.859 26.777-89.292-29.482 2.021-63.965 20.791-84.106 45.225-18.276 22.197-33.364 55.117-27.49 87.095 32.187 1.001 65.483-18.218 84.819-43.028z" id="path7" style="fill:#61bb46;fill-rule:evenodd;stroke:#61bb46;stroke-width:2.9849;stroke-miterlimit:2.61310005"/><path clip-rule="evenodd" d="M24.357 199.967c-12.251 19.192-20.728 46.701-22.977 70.83l397.437-.01c4.297-26.398 18.586-51.618 41.233-70.791l-415.693-.03h.023z" id="path9" style="fill:#fdb827;fill-rule:evenodd;stroke:none"/><path clip-rule="evenodd" d="M4.989 340.998c-3.862-24.644-4.487-48.403-2.061-70.2l394.341-.01c-3.857 23.638-.62 48.237 9.136 70.225l-401.416-.015z" id="path11" style="fill:#f5821f;fill-rule:evenodd;stroke:#f5821f;stroke-width:2.9849;stroke-miterlimit:2.61310005"/><path clip-rule="evenodd" d="M24.261 411.193c-9.312-23.584-15.688-47.271-19.272-70.195l401.416.015c12.427 28.018 35.425 51.821 67.808 64.053-.962 2.139-1.89 4.185-2.783 6.157l-447.169-.03z" id="path13" style="fill:#e03a3e;fill-rule:evenodd;stroke:#e03a3e;stroke-width:2.9849;stroke-miterlimit:2.61310005"/><path clip-rule="evenodd" d="M471.429 411.222c-11.118 24.443-17.563 37.129-32.949 60.547a605.045 605.045 0 01-6.436 9.609l-370.527.034a850.124 850.124 0 01-3.521-5.288c-13.853-21.099-25.068-42.974-33.735-64.932l447.168.03z" id="path15" style="fill:#963d97;fill-rule:evenodd;stroke:#963d97;stroke-width:2.9849;stroke-miterlimit:2.61310005"/><path d="M472.972 550.778c13.589 0 24.604-11.016 24.604-24.595 0-13.59-11.016-24.6-24.604-24.6s-24.604 11.01-24.604 24.6c0 13.579 11.015 24.595 24.604 24.595m-6.992-9.648v-27.485h11.011m6.645 27.182l-6.553-13.892m-11.054-.244h11.006m-.01-.034c2.734 0 5.503-2.891 5.503-6.46 0-3.8-2.886-6.553-5.537-6.553" id="path17" style="fill:none;stroke:#000000;stroke-width:3.89479995;stroke-miterlimit:2.61310005"/><path clip-rule="evenodd" d="M432.044 481.378c-22.666 33.203-53.096 69.741-90.02 70.088-36.03.327-45.273-23.447-94.155-23.179-48.882.273-59.087 23.594-95.117 23.257-38.521-.356-68.433-36.24-91.235-70.132l370.527-.034z" id="path19" style="fill:#009ddc;fill-rule:evenodd;stroke:#009ddc;stroke-width:2.9849;stroke-miterlimit:2.61310005"/></g>
  
        </svg>
      </div>

    </div>
    <ul class="demo-stats">
      <li><span class="year">1984</span> The Macintosh
      <span class="hr"></span>
      </li>
      <li><span class="year">1986-1996</span> From NeXT to Pixar
        <span class="hr"></span>
      </li>
      <li><span class="year">1997-2004</span> iMac and iPod
        <span class="hr"></span>
      </li>
      <li><span class="year">2005-2011</span> iPhone and iPad
        <span class="hr"></span>
      </li>
    </ul>
  </div>

  <div class="demo-content-container">
    <h1 class="article-intro">iMourn The Loss..</h1>
    <div class="demo-blurb">
      <p><span class="intro-text">I</span> spend most of any waking day inside Steve
        jobs' idea. I'm roused out of bed by an alarm clock set by my
        iPhone, which is docked to it. I get up and go for a run,
        listening to my iPod Nano on shuffle. Back home I get
        dressed,listening to NPR (iPhone app).
        Breakfast time and I read the paper,
        which is not on the doorstep yet but is on my iPad. Walk the kids to school,
        checking tweets on the way back. Spend the day at my desk, looking into a
        rectangle with a glowing Apple in back of it. At night, as Time's television
        critic, I'm in front of the TV—usually with the iPad on my lap.
      </p>

      <p>That's where I was when word of Jobs' death came to me as he would have wanted it to:
        as a news alert on my iPad. I was watching Jeopardy! with my kids and found myself
        trying to explain why I would be sad about the death of the founder of a giant company,
        whom I didn't know. So I told them about all the things they use and see every day
        that came from Jobs: the computers, the touchscreens, the Pixar movies, the computer mouse.
      </p>

      <h2 class="jobs-quote">Word of Jobs' death came to me as he would have wanted it to: as a news alert on my iPad</h2>

    </div>
    <div class="demo-blurb">
      <p>
        But really what we got from Jobs and his company was an idea: that computers were
        something that belonged in your life, not in a science lab. That you would want to use them,
        play with them, touch them, carry them with you. That they were not just for numbers but also for music,
        movies, magazines, creation, communication. A lot of people made computers in the
        past decades, but it was Steve Jobs who understood that he was making media.
      </p>

      <h2 class="jobs-quote">Computers were something that belonged in your life, not in a science lab</h2>

      <p>
        It's been said, correctly, that Jobs did not invent many of the innovations that Apple came
        to be known for: the graphical user interface, the touchscreen, the personal computer itself.
        He was a popularizer, but I'm not sure that's a lesser accomplishment. The technology to put
        a friendly interface on your desk, a music and video library in your pocket, an arsenal of info-
        appliances on your phone would have existed without him. Someone would even have tried to sell it.
        But without Jobs to realize, before we knew it, how we wanted to use technology as an
        effortless extension of our consciousness, not a specialist's tool—none of it would
        be as ubiquitous or as well realized. Steve Jobs was a great salesman because he was a great consumer.
      </p>

    </div>
    <div class="jobs-images">
      <div class="steve one"></div>
      <h2 class="jobs-quote"><span>He was a popularizer</span></h2>
      <div class="steve two"></div>
    </div>
    <div class="demo-blurb">
      <p>
        And by making devices an extension of ourselves, he helped change our understanding of
        media; it would no longer be just a system you got information from but a system you contrib uted information to.
        As he envisioned them—before the rest of us knew we wanted this computers were
        tools not of calculation but of communication.
      </p>

      <h2 class="jobs-quote">Computers were tools not of calculation but of communication.</h2>

      <p>
        That's part of the reason that Jobs' aesthetic sense for Apple so famously fastidious and
        demanding—was key to what he did. Yes, his products were pretty on purpose as were '50s sedans and
        illuminated manuscripts. (Hence the fact that the iPad is such a luminous showcase
        for magazines and video.) But the look and feel of Apple gadgets did not just make them beautiful or make
        you feel cool. They communicated an idea about the world too.
      </p>
    </div>
    <div class="demo-blurb">
      <p>
        Like other great modernists, Jobs knew that simplicity was not just about sleekness but also about function.
        He intuited that, as many designers say, the best design is barely there. The infinity pool like touchscreen of
        my iPhone says this Star Trek Swiss Army knife of information in my pocket should become, wholly,
        whatever I want it to be, with no form factor getting in the way. It should not merely run Angry Birds;
        it should become Angry Birds. The slab-of-glass iPad was his last and truest attempt at the ideal
        computer: a window, a pane that you brush your fingertips against, a portal you reach through.
      </p>
      <p>
        That, as I was trying to explain to my kids, is the reason I felt so deeply sad about a guy
        who ran some company: because my experience of his products, like I suspect many of yours, was so personal.
        Apple's devices are made, like a hot rod, for customization: your music, your pictures, your wallpaper.
        It's no wonder that their owners should feel their identities bound up more in them than in any other
        modern consumer goods since the automobile.
      </p>

    </div>

    <div class="jobs-images">
      <div class="steve three"></div>

      <div class="steve four"></div>
    </div>

    <div class="demo-blurb">
      <p>
        So, yes, my aching over Jobs' loss is partly a selfish nostalgia for my own life past.
        Macintoshes were the first computers I ever used in a college computer lab; I wrote my first news
        paper stories on them, played Dark Castle on them, discovered the World Wide Web on them and
        edited my kids' baby videos on them.
      </p>

      <p>
        But it's also that the things Apple makes are expressions of the idea that technology should be personal,
        that it only matters to the extent that it can add to what we find important in life.
        Which is why I'll spend much of tomorrow, too, inside Steve Jobs' idea that a
        computer should be an elegant, simple frame and we should fill it with the
        things that matter to us.
      </p>

      <h2 class="jobs-quote">The things Apple makes are expressions of the idea that technology should be personal</h2>


    </div>

    <div class="steve five"></div>

  </div>

</div>
              
            
!

CSS

              
                $desktop-width: 624px;
$mobile-only: 600px;

@import url("https://fonts.googleapis.com/css?family=Oswald|Roboto");

$oswald: "Oswald", sans-serif;
$roboto: "Roboto", sans-serif;

$steve: url("https://Andrewrock.github.io/img/steve.png");
$steve-young: url("https://Andrewrock.github.io/img/jobs-young.jpg");
$steve-young-two: url("https://Andrewrock.github.io/img/jobs-young2.jpg");
$steve-old: url("https://Andrewrock.github.io/img/jobs-old.jpg");
$steve-old-two: url("https://Andrewrock.github.io/img/jobs-old2.jpg");
$jobs-floor: url("https://Andrewrock.github.io/img/jobs-floor.jpg");

$fonts: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;;
$background-white: #f4f3f1;
$body-color: #282828;
$hero-bg: #000;
$transparent: transparent;
$transparent-bg: rgba(0, 0, 0, 0.66);
$apple-logo-green: #61bb46;
$apple-logo-yellow: #fdb827;
$apple-logo-orange: #f5821f;
$apple-logo-red: #e03a3e;
$apple-logo-purple: #963d97;
$apple-logo-blue: #009ddc;
$white: #fff;

$height: 100%;
$width: 100%;

$large-grid-gap: 48px;
$medium-grid-gap: 24px;
$small-grid-gap: 12px;
$grid-break: 500px;
$underline-height: 4px;
$apple-gradient: linear-gradient(
  135deg,
  $apple-logo-green 0%,
  $apple-logo-green 16.5%,
  $apple-logo-yellow 16.5%,
  $apple-logo-yellow 33.5%,
  $apple-logo-orange 33.5%,
  $apple-logo-orange 50%,
  $apple-logo-red 50%,
  $apple-logo-red 66.5%,
  $apple-logo-purple 66.5%,
  $apple-logo-purple 83%,
  $apple-logo-blue 83%,
  $apple-logo-blue 100%
);

$h1: 2.5rem;
$h2: 2rem;
$h3: 1.75rem;
$h4: 1.5rem;
$h5: 1.25rem;
$h6: 1rem;
$line-height-base: 1.5;

h1 {
  font-size: $h1;
}
h2 {
  font-size: $h2;
}
h3 {
  font-size: $h3;
}
h4 {
  font-size: $h4;
}
h5 {
  font-size: $h5;
}
h6 {
  font-size: $h6;
}

h1,
h2,
h3,
h4,
h5 {
  font: $fonts;
  font-weight: 600;
}

body {
  margin: 0;
   font-family: $fonts;
}

p {
  line-height: $line-height-base;
  margin-bottom: 24px;
}

.demo {
  background-color: $background-white;
  display: grid;
  grid-gap: $large-grid-gap 0;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: minmax(840px, 1fr) auto;
}

.demo-header-container {
  grid-column: 1 / span 5;
}

.demo-header {
  align-items: center;
  background: $steve center center / cover no-repeat, $apple-gradient;
  background-blend-mode: multiply;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  margin-bottom: $large-grid-gap;
  width: $width;
}

.vertical,
.dob,
.demo-text-area {
  grid-row: 1;
}

.vertical,
.dob {
  align-self: flex-start;
  font-size: 4.5rem;
  height: $height;
  mix-blend-mode: overlay;
  padding: $medium-grid-gap 0;
  writing-mode: vertical-lr;
}

.vertical {
  color: $white;
  grid-column: 1;
}

.dob {
  color: $apple-logo-red;
  grid-column: 5;
  mix-blend-mode: difference;
}

.demo-text-area {
  align-self: flex-end;
  background-color: $transparent-bg;
  border-radius: $small-grid-gap;
  display: flex;
  flex-flow: row wrap;
  grid-column: 2 / span 3;
  grid-row: 1;
  padding: $medium-grid-gap $small-grid-gap;

  @media screen and (max-width: $grid-break) {
    grid-column: 1 / span 5;
    grid-row: 2;
    margin: auto;
    max-width: 90%;
  }
}

.rainbow-text {
  color: $apple-logo-green;

  &:nth-of-type(2) {
    color: $apple-logo-yellow;
  }

  &:nth-of-type(3) {
    color: $apple-logo-orange;
  }

  &:nth-of-type(4) {
    color: $apple-logo-red;
  }

  &:nth-of-type(5) {
    color: $apple-logo-purple;
  }

  &:nth-of-type(6) {
    color: $apple-logo-blue;
  }
}

.apple-logo {
  display: flex;
  height: 48px;
  justify-content: center;
  margin: auto;
  width: 96px;
}

.demo-stats {
  align-items: flex-end;
  display: flex;
  flex-flow: row wrap;
  grid-column: 1 / span 5;
  justify-content: space-around;
  text-align: center;

  li {
    list-style: none;
    padding: 0 6px;
  }
}

.hr {
  display: block;
  height: $underline-height;
  margin: auto;
  padding: $medium-grid-gap 0;
  position: relative;
  width: $width;

  &::after,
  &::before {
    bottom: 50%;
    content: "";
    height: $underline-height;
    left: 0;
    position: absolute;
    width: 100%;
  }

  &::before {
    background: $apple-gradient;
    z-index: 1;
  }
}

.year {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
}

.demo-text-body {
  padding: $large-grid-gap $small-grid-gap;
  position: relative;
}

.article-intro {
  font-size: 6rem;
  margin-bottom: $large-grid-gap;
}

.demo-content-container {
  grid-column: 1 / span 5;
  padding: 0 $medium-grid-gap;
}

.intro-text {
  color: $apple-logo-red;
  display: block;
  float: left;
  font-family: serif;
  font-size: 10rem;
  line-height: 0.75;
  margin-right: $small-grid-gap;
  text-transform: capitalize;
}

.jobs-images {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: $medium-grid-gap;
  overflow: hidden;

  .jobs-quote {
    height: 180px;
    max-width: 25%;
    writing-mode: vertical-rl;
  }
}

.steve {
  display: flex;
  flex: 0 0 33%;
  height: 180px;
}

.three,
.four {
  flex: 0 0 50%;
}

.one {
  background: $steve-young center center / cover no-repeat;
}

.two {
  background: $steve-young-two center center / cover no-repeat;
}

.three {
  background: $steve-old center center / cover no-repeat;
}

.four {
  background: $steve-old-two center center / cover no-repeat;
}

.five {
  align-items: center;
  background: $jobs-floor center center / cover no-repeat;
  background-blend-mode: screen;
  justify-content: center;
}

.jobs-quote {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: $apple-gradient;
  color: $transparent;
  margin-bottom: $medium-grid-gap;
  text-align: center;
}

@media screen and (min-width: $desktop-width) {
  .demo {
    grid-gap: 24px;
    grid-template-rows: minmax(725px, 1fr) auto;
  }

  .demo-header-container,
  .demo-content-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .demo-header {
    grid-column: 1 / span 4;
    margin-bottom: 0;
  }

  .vertical,
  .dob {
    font-size: 6rem;
    grid-row: 1 / span 3;
  }

  .vertical {
    grid-column: 1;
  }

  .dob {
    grid-column: 5;
  }

  .demo-content-container {
    grid-gap: 24px 12px;
    grid-template-rows: auto;
  }

  .demo-text-area {
    align-self: center;
    grid-column: 2 / span 3;
    grid-row: 3;
    margin-bottom: $medium-grid-gap;
    max-width: 600px;
  }

  .demo-stats {
    display: grid;
    grid-column: 5;
  }

  .year {
    font-size: 2rem;
    margin-bottom: 12px;
  }

  .article-intro {
    grid-column: 1 / span 2;
  }

  .demo-blurb {
    display: flex;
    flex-flow: row wrap;

    &:nth-of-type(1) {
      grid-column: 1 / span 2;
    }

    &:nth-of-type(2) {
      grid-column: 3 / span 2;
    }

    &:nth-of-type(4) {
      grid-column: 1 / span 2;
    }

    &:nth-of-type(5) {
      grid-column: 3 / span 2;
    }

    &:nth-of-type(7) {
      grid-column: 1 / span 3;
    }
  }

  .jobs-images {
    align-items: flex-start;
    flex-flow: row wrap;
    margin-bottom: 0;

    .jobs-quote {
      height: auto;
      max-width: initial;
      writing-mode: horizontal-tb;
    }
  }

  .steve {
    flex: initial;
    height: 228px;
    width: $width;
  }

  .one {
    align-self: flex-start;
  }

  .five {
    grid-column: 4 / span 2;
    height: 100%;
  }

  .jobs-quote {
    padding: 2px;
  }

  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
    .demo-header,
    .demo-stats {
      grid-column: 1 / span 5;
    }

    .demo-stats {
      display: flex;
      flex-flow: row wrap;
      grid-row: 2;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .demo {
    background-color: #101010;
    color: $white;
  }

  .demo-text-area {
    background-color: #000000;
  }

  img {
    opacity: 0.75;
    transition: opacity 0.5s ease-in-out;

    &:hover {
      opacity: 1;
    }
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console