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.

            
                  <div class="warning">This demo only works in browsers that support CSS Grid Layout. If you can see this message, then your browser isn't supporting Grid. You can try out Grid in <a href="https://nightly.mozilla.org/">Firefox Nightly</a> or <a href="http://gridbyexample.com/browsers/">other browsers by flipping a flag</a>. It's likely that you will see bugs if you are not in the most recent version of Nightly. It depends on parts of Grid that were only finished, are are only working in Firefox Nightly.</div>


    <header role="banner">
      <h1><a href="#">Your Website</a></h1>
      <nav role="navigation"><ul>
        <li><a href="#">Is</a></li>
        <li><a href="#">This</a></li>
        <li><a href="#">Your</a></li>
        <li><a href="#">Website</a></li>
      </ul></nav>
    </header>
    <main role="main">
      <section class="hero">
        <h1>We’re Unique</h1>
        <h2><a href="#">Find Out How Unique</a></h2>
        <img src="http://labs.jensimmons.com/2016/examples/images/box.png" alt="this is a hero graphic (a pretend one)">
        <p>This is the bit where you talk about how unique you are as a business and that you’re different to all your competitors. Your website looks the same though.</p>
      </section>
      <section class="talking-points">
        <div>
          <h2>Always</h2>
          <img src="http://labs.jensimmons.com/2016/examples/images/uniqueicons/book.png" alt="Here we have an icon of a book. Not sure why.">
          <p>You could have our columns here but you won’t. You'll have three, like everyone else.</p>
        </div>
        <div>
          <h2>Three</h2>
          <img src="http://labs.jensimmons.com/2016/examples/images/uniqueicons/gears.png" alt="Ooooo, an icon of a gear. That shows you are making stuff. ">
          <p>Have a cog icon above one of these columns if you’re really feeling especially creative.</p>
        </div>
        <div>
          <h2>Columns</h2>
          <img src="http://labs.jensimmons.com/2016/examples/images/uniqueicons/shield.png" alt="It's an icon of a shield. Because you are strong.">
          <p>The perfect place to talk about your services. Because co-incidentally, you have three of them.</p>
        </div>
      </section>
    </main>
          
    <footer>
      <p>© If someone did own the copyright to this layout, if that were even possible, they’d be rich!</p>
      <p role="contentinfo">This design is based on a <a href="https://www.novolume.co.uk/admin/resources/template-01-.png">wireframe</a> from Dave Ellis, who wrote a popular blog post on how <a href="https://www.novolume.co.uk/blog/all-websites-look-the-same/"><i>All Websites Look The Same</i></a>.
    </footer>

            
          
!
            
              * {box-sizing:border-box;}

a:focus {
  border: 4px solid yellow;
}
html {
  font-family: helvetica, san-serif;
  line-height: 1.3em;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  text-size-adjust: 100%;
}
body {
//  width: 90%;
  margin: 5vw auto;
  text-align: center;
}
h1 {
  line-height: 1.2;
}
a {
  color: black;
  text-decoration: none;
}
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
header { /* autoprefixer: off */
  width: 90%;
  margin-left: 5vw;
  margin-right: 5vw;
  text-transform: uppercase;
  h1 {
    margin: 0 0 0.5em;
    font-size: 1.8rem;
  }
  @media (min-width: 500px) {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    h1 {
      margin: 0 1em 0 0;
    }
  }
  nav ul {
    display: flex;
    margin-bottom: 4px;
    justify-content: space-between;
  }    
  @media (min-width: 300px) {
    nav li {
      flex: auto;
      margin-right: 1em;
      padding-right: 1em; 
      border-right: 1px solid #000;
    }
  }
  @media (min-width: 580px) {
    nav ul {
      flex-wrap: wrap;
    }
  }
  nav li:last-child {
    border: none;
    margin-right: 0;
    padding-right: 0;
  }
}
.hero { /* autoprefixer: off */
  display: grid;
  @media (max-width: 880px) {
    grid-template-columns: 1fr 1fr 1fr 1fr; 
  }
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 2em;
  margin: 2rem 0;
  justify-content: center;
  align-items: center;
  h1 {
    text-transform: uppercase;
    grid-column: 1 / -1;
    grid-row: 2 / 3;  
    font-size: calc(2.2rem + 3vw); 
    margin-left: 1rem; 
    margin-right: 1rem; 
  }
  h2 {
    text-transform: uppercase;
    border: 1px solid black;
    background: rgba(255,255,255,0.6);
    padding: 1rem 0.5rem 0.6rem;
    font-size: 1.2rem;
    margin: 0;
    grid-column: 2 / 3;
    grid-row: 3 / 4;    
    align-self: self-start; 
    @media (max-width: 880px) {
      grid-column: 2 / 4;
    }
  }
  img {
    width: 100%;
    height: 100%;
    z-index: -1;
    grid-column: 1 / -1;
    grid-row: 1 / 4;
    object-fit: fill;
    opacity: 0.6;
  }
  p {
    grid-column: 1 / -1;
    grid-row: 4 / 5;   
    align-self: center;
    width: 66%; 
    justify-self: center;
    font-size: calc(0.75rem + 1vw);
    line-height: 1.5;
    margin: 0;
  }
}
.talking-points { /* autoprefixer: off */
  background: #191919;
  color: #efefef;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  div { /* autoprefixer: off */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1em 5% 1em;
    padding: 0 1rem;
    h2 {
      margin: 1em 0 0.25em;
      font-size: 1.8rem;
    }
    img {
      order: -1;
      max-width: 100px;
    }
    p {
      font-size: 0.9rem;
      margin-bottom: 0;
    }
  }
}
footer {
  width: 90%;
  margin-top: 1rem;
  margin-left: 5vw;
  margin-right: 5vw;
  padding: 1rem;
  font-size: 0.8em;
  p {
    margin: 0;
  }
  a {
    text-decoration: underline;
  }
}


// Style a Warning Message. Remove if Grid works ---------------------------------------
.warning {
  color: #eee;
  background: rgb(188, 0, 0);
  padding: 3rem 4rem;
  font-size: 150%; 
  line-height: 1.4;
  text-align: left;
  margin-bottom: 1em;
  a {
    color: white;
    text-decoration: underline;
  }
}
@supports (display: grid) {
  .warning {
    display: none;
  }
}

            
          
!
999px
Loading ..................

Console