Flexbox Cards - Final

flexbox-cards-final.markdown

Flexbox Cards - Final

A Pen by Abbey Fitzgerald on CodePen.

License.

index.html

<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-09.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 -->

            </section><!-- .cards -->
           
        </div><!-- .centered -->
        
    </main>

style.css

/* 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 */

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -1em;
    }

    .card {
        display: flex;
        flex: 0 1 calc(50% - .5em);
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 60em) {
    .cards {
        margin-top: inherit;
    }
    
    .card {
        flex: 0 1 calc(25% - 1em);
        margin-bottom: 2em;
    }
}

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

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