root
/
css-mastery-16-master


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox columns: article teaser</title>
  <script src="js/html5shiv.min.js"></script>
  <style>
    body {
      font-family: Georgia, Times New Roman, serif;
      line-height: 1.5;
      max-width: 70em;
      margin: 0 auto;
      padding: 1em;
    }


    .article-teaser {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: -webkit-box;
      display: -moz-box;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
                 -moz-box-orient: vertical;
                 -moz-box-direction: normal;
              flex-direction: column;
      max-width: 20em;
      padding: 1em;
      margin: 1em;
      border: 1px solid #ccc;
    }
    .article-teaser h2 {
      font-family: Avenir, SegoeUI, Franklin Gothic, sans-serif;
      font-size: 1.25em;
      margin: 0 0 .5em 0;
    }
    .article-teaser-text {
      margin: .5em 0;
    }

    .article-teaser-text p {
      margin: 0;
    }
    /**
    * 1. This is a fix for a peculiar sizing bug on images in flexbox columns
    *    that appears to only happen in Chrome. The intrinsic dimensions of the
    *    image are taken to mean the main-axis size, and thus the minimum size.
    *    Setting an explicit min-height value counters this problem.
    */
    .article-teaser img {
      width: 100%;
      min-height: 0; /* [1] */
      -webkit-order: -1;
      -ms-flex-order: -1;
      order: -1;
      margin: 0 0 .5em 0;
    }
    .article-teaser-more {
      margin: .5em 0 0;
    }
    .article-teaser-more a {
      display: block;
      border-radius: .5em;
      background-color: #3372a0;
      font-family: Avenir, SegoeUI, Franklin Gothic, sans-serif;
      color: #fff;
      text-decoration: none;
      text-align: center;
      padding: .25em;
    }

  </style>
</head>
<body>
  <div class="article-teaser">
    <h2>The Dragon and other spaceships</h2>
    <div class="article-teaser-text">
      <p>There are actual spaceships,
        flying in space right now, probably. For example, there’s the International Space Station, which is 
        a spaceship of sorts. Well, actually it’s a space station, which is even cooler!</p>
      </div>
      <img src="images/medium_spaceship.jpg" alt="The Dragon spaceship in orbit around Earth.">
      <p class="article-teaser-more">
        <a href="/spaceships">Read the whole Spaceship article</a>
      </p>
    </div>
  </body>
  </html>