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.

            
              <header class="masthead clear">
        <div class="centered">
            
            <div class="site-branding">
                <h1 class="site-title">Flexbox Demo: Card Layouts</h1>
              <p>Text from <a title="Office Ipsum" href="http://officeipsum.com/index.php">Office Ipsum</a> </p>
            </div><!-- .site-title -->
        </div><!-- .centered -->
    </header><!-- .masthead -->
    
    <main class="main-area">
        
        <div class="centered">

            <section class="cards">
                
                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-01.jpg" alt="A banana that looks like a bird">
                        </picture>
                        <div class="card-content">

                            <h2>Vacation Image 01</h2>
                            <p>TUX re-inventing the wheel, and move the needle. Feature creep dogpile that but diversify kpis but market-facing.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-02.jpg" alt="Norwegian boller">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 02</h2>
                            <p>Staff engagement synergize productive mindfulness and waste of resources cross sabers, or forcing function shotgun approach drink the Kool-aid.</p>
                            <p>Execute are we in agreeance what do you feel you would bring to the table if you were hired for this position, nor closer to the metal goalposts, are there any leftovers in the kitchen?.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-03.jpg" alt="A dinosaur wearing an aluminium jacket">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 03</h2>
                            <p>Viral engagement anti-pattern back of the net, for meeting assassin horsehead offer. Loop back design thinking drop-dead date. </p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-04.jpg" alt="Chocolate filled boller">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 04</h2>
                            <p>We need a paradigm shift get all your ducks in a row. I just wanted to give you a heads-up we need distributors to evangelize the new line to local markets when does this sunset? so waste of resources, yet fire up your browser, or touch base closing these latest prospects is like putting socks on an octopus.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-05.jpg" alt="Chocolate frog on oranges">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 05</h2>
                            <p>Action item get buy-in, so work flows low-hanging fruit innovation is hot right now. Game plan UX, nor open door policy, this is a no-brainer, new economy obviously.</p>
                            <p>Who's responsible for the ask for this request? </p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-06.jpg" alt="A whiskey jack taking a dive">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 06</h2>
                            <p>Personal development win-win-win close the loop yet are there any leftovers in the kitchen? for wheelhouse game-plan. We need a recap by eod, cob or whatever comes first work flows pig in a python. </p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-07.jpg" alt="Playing Jenga with pool cues">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 07</h2>
                            <p>Face time nail jelly to the hothouse wall, for herding cats, and shelfware. Action item mobile friendly. Bleeding edge bake it in we are running out of runway this is meaningless your work on this project has been really impactful. Feature creep waste of resources.</p>
                            <p>Value-added take five, punch the tree, and come back in here with a clear head, one-sheet, nor pixel pushing, yet organic growth reach out. </p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->
              
              <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-08.jpg" alt="Playing Jenga with pool cues">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 08</h2>
                            <p>On a recent trip to Europe my brothers and I invented a new game called "Pool Cue Jenga". It is the best game ever invented.</p>
                            <p>The rules are simple: You must use a pool cue to remove tiles. Only one cue can be used, and you can not use your fingers.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->
              
              <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-01.jpg" alt="Playing Jenga with pool cues">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 09</h2>
                            <p>Moving the goalposts. Work productize after I ran into Helen at a restaurant, I realized she was just office pretty, or organic growth blue money, for we need to future-proof this. </p>
                            <p>Globalize golden goose pulling teeth, nor player-coach.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->
              
               <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2017/02/image-example-02.jpg" alt="Playing Jenga with pool cues">
                        </picture>
                        <div class="card-content">
                            <h2>Vacation Image 10</h2>
                            <p>Moving the goalposts. Work productize after I ran into Helen at a restaurant, I realized she was just office pretty, or organic growth blue money, for we need to future-proof this. </p>
                            <p>Globalize golden goose pulling teeth, nor player-coach.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

            </section><!-- .cards -->
           
        </div><!-- .centered -->
        
    </main>
            
          
!
            
              /* Import the google web fonts you want to use */


@import url('https://fonts.googleapis.com/css?family=Comfortaa|Patua+One');

/* Card Based Layout - Base styles */

body {
	background: hsl(0, 0%, 90%);
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Comfortaa', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
  font-family: 'Patua One', sans-serif;
  letter-spacing: 2px;
}

h2 {
  font-size: 1rem;
  color: #007489;
}

p {
	margin-bottom: 1.5em;
  color: #898989;
}

b,
strong {
	font-weight: bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

.masthead {
	background-color: #005b75;
}

.masthead p, .masthead p a {
  color: white;
}

.site-title {
	color: white;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


.card {
	background: white;
	margin-bottom: 2em;	
}

.card a {
	color: black;
	text-decoration: none;
}

.card a:hover {
	box-shadow: 3px 3px 8px hsl(0, 0%, 80%);
}

.card-content {
	padding: 1.4em;
}

.card-content h2 {
	margin-top: 0;
	margin-bottom: .5em;
	font-weight: bold;
}

.card-content p {
	font-size: 80%;
}

/* Flexbox stuff */

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

.centered {
    margin: 0 auto;
    padding: 0 1em;
}

@media screen and (min-width: 52em) {
    .centered {
        max-width: 52em;
    }
}












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

Console