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.

  - Goal: Create a float-based, responsive grid

  - Create an <article> containing block 
    with 3 children <section> elements
  - <section> elements are the .grid contexts
  - .grid elements will be parents to children
    <div> .col-1-4 positioned on the left and
    <div> .col-3-4 positioned on the right
  - each .col- will be parents to children
    <div> .module elements

  - the article needs an <h1> heading
  - each section needs an <h2> heading
  - Place an <img> inside .module inside .col-1-4;
    use placehold.it
  - Place placeholder text inside .module
    inside .col-3-4
  - Create at least one link with a hover
    pseudo-class effect
  - Create an unordered list with checkmarks
    inside one of the right-positioned .module
  - Apply background color scheme using .bg-color
    class and nth-child() to the <section>
  Using the body selector, define the default font-size to 18px.

  Typography: Define the fonts / font-size scheme of your
  headings, using the relative size rem value. Remember, em
  computes relative to the font-size defined in the containing
  block. In this case, it is the inherited 18px value from the
  body: 2em = 18px * 2 (36px).

  Use this section to also define any other personal typographic

  Hard part: Create a simple float-based responsive grid 
  (See my codepen for an example: https://codepen.io/lndgrn/pen/ojBpXW)

    > the .grid-1-4 should be 25% of the .grid container
    > the .grid-3-4 should be 75% of the .grid container
    > You will also need to use a clear-fix hack + box-sizing to make it work

  Using the nth-child pseudo-class, add some color to each of 
  the articles with the class: .bg-colors. Add any other styles 
  that you like.

  Make the images 100% width and centered in the div (hint: use 
    margin). Add any other styles that you'd like.

  Use the first-letter pseudo-element to style the first letter
    of the first paragraph in each section.

  Use the :hover pseudo-class on the anchor tags to remove the 

  Using the :before pseudo-element, replace the bullets/discs
    on the ul.checkmark list items (li). Style it accordingly.
    Hint: If you're stuck, Google it. :-)

  Use any of the other classes to do any other styling here. Or, 
    add your own, if you're so inclined.

  Bonus hotshot points to anyone who creates a <nav> with an
    inline-block ul list.


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.


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