root
/
css-mastery-16-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using flexbox to create equal-height columns</title>
  <!-- the base styles and "housekeeping" styles are in here: -->
  <link rel="stylesheet" href="css/grid-base.css">
<!-- Modernizr script to detect flexbox support, 
     which also includes HTML5 shiv,
     to help older browsers understand styling
     on newer HTML5 elements: -->
     <script src="js/modernizr.min.js"></script>
     <style>

      /* grid styling */
      .row {
        list-style: none;
        padding: 0;
        margin: 0 -.6875em;
      }
      .flexbox .row,
      .flexboxtweener .row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      }
      .row:after {
        content: '';
        display: block;
        clear: both;
      }
      .row-quartet > * {
        width: 25%;
      }
      .row-trio > * {
        width: 33.3333%;
      }
      .row-wrapping {
        font-size: 0;
        margin: 0 -11px;
        margin: 0 -.6875rem;
      }
      .flexwrap .row-wrapping {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
      }
      .row-wrapping > .col {
        float: none;
        vertical-align: top;
        display: inline-block;
        font-size: 16px;
        font-size: 1rem;
      }
      .col {
        float: left;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
        padding: 0 .6875em 1.375em;
      }
      .flexbox .col,
      .flexboxtweener .col {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
      }
      .flexbox .col > *,
      .flexboxtweener .col > * {
        -webkit-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1;
      }
      .col:last-child {
        float: right;
      }
      /* content styling */

      .subcategory {
        margin-top: 1.5em;
        border-bottom: 1px solid #8e3339;
      }
      .subcategory-featured {
        width: 50%;
      }
      .subcategory-content {
        width: 80%;
      }
      .subcategory-header {
        width: 20%;
      }

      .story {
        padding: .6875em;
        background-color: #eee;
      }
      .story + .story {
        margin-top: 1.375em;
      }
      .story img {
        width: 100%;
      }

    </style>
  </head>
  <body>
    <header class="masthead">
      <div class="wrapper">
        <h1>Important News</h1>
        
      </div>
    </header>

    <nav role="navigation" class="navbar">
      <div class="wrapper">
        <ul class="navlist">
          <li><a href="#">Home</a></li>
          <li><a href="#">World</a></li>
          <li><a href="#">Local</a></li>
          <li><a href="#">Sports</a></li>
        </ul>
      </div>
    </nav>
    <main class="wrapper">

      <section class="subcategory">
        <div class="row">
          <header class="col subcategory-header">
            <h2>Lorem ipsum</h2>
          </header>
          <div class="col subcategory-content">
            <div class="row row-quartet">
              <div class="col subcategory-featured">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image">
                  <h3><a href="#">Cras suscipit nec leo id.</a></h3>
                  <p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>
                </article>
              </div>
              <div class="col">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image">
                  <h3><a href="#">Perferendis, ipsam!</a></h3>
                  <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
                </article>
              </div>
              <div class="col">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image">
                  <h3><a href="#">Curabitur mattis purus nec velit.</a></h3>
                  <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
                </article>
              </div>
            </div>
            <ul class="row row-quartet row-wrapping">
              <li class="col">
                <div class="story">
                  <h3><a href="#">Perferendis, ipsam! Dolor sit amet consectetur</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Aliquam mattis eros id posuere.</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Proin leo felis, semper nec</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Aliquam vitae risus tortor. Sed!</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Perferendis, ipsam!</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Aliquam mattis eros id posuere.</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Proin leo felis, semper nec</a></h3>
                </div>
              </li>
              <li class="col">
                <div class="story">
                  <h3><a href="#">Aliquam vitae risus tortor. Sed!</a></h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section class="subcategory">
        <div class="row">
          <header class="col subcategory-header">
            <h2>Dolor sit amet</h2>
          </header>
          <div class="col subcategory-content">
            <div class="row row-trio">
              <div class="col">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image">
                  <h3><a href="#">Ut sit amet mi massa</a></h3>
                  <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
                </article>
              </div>
              <div class="col">
                <article class="story">
                  <h3><a href="#">Nunc mollis sit amet nunc</a></h3>
                  <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
                </article>
                <article class="story">
                  <h3><a href="#">Duis sed ante enim. Cras</a></h3>
                  <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
                </article>
              </div>
              <div class="col">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image">
                  <h3><a href="#">Animi, explicabo, ipsum</a></h3>
                  <p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
                </article>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
  </body>
  </html>