root
/
css-mastery-16-master


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive news section example with picture element</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>
  
  <script src="js/picturefill.min.js"></script>
  
  <!-- Meta viewport tag to enable correct viewport on mobile devices -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>

    /* Wrapper styling with fallback: */

    .wrapper {
      max-width: 40em;
      width: 95%;
      margin: 0 auto;
    }
    @media only all {
      .wrapper {
        max-width: 76em;
      }
    }


    /* grid styling */

    /**
    * [1] Remove list-style and default padding, in case any 
    *     columns are actually <li> items.
    * [2] Negative margin equal to 1/2 gutter width.
    */
    .row {
      list-style: none; /* [1] */
      padding: 0; /* [1] */
      margin: 0 -.6875em; /* [2] */
    }
    /**
    * Make sure rows contain floats.
    */
    .row:after {
      content: '';
      display: block;
      clear: both;
    }
    /**
    * [1] Set font-size to 0 to counteract the white-space issue with
    *     inline-block children.
    * [2] Set the negative margin in px as a "good-enough" fallback for IE8 (see 3)
    * [3] Set the negative margin in rems instead of ems as the font-size is 0.
    */
    .row-wrapping {
      font-size: 0; /* [1] */
      margin: 0 -11px; /* [2] */
      margin: 0 -.6875rem; /* [3] */
    }
    /**
    * Children of wrapping rows are inline blocks.
    * [1] Set the font-size in as a fallback for browsers without rem support 
    *     e.g. IE8. (see 2)
    * [2] Set the font size using rems since font-size on parent is 0.
    */
    .row-wrapping > .col {
      float: none;
      vertical-align: top;
      display: inline-block;
      font-size: 16px;
      font-size: 1rem;
    }
    /**
    * [1] Set columns to float/100% width by default, despite not needing to for 
    *     for single-column layouts. That way, we don't need to decide at which
    *     breakpoint the column starts floating.
    */
    .col {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
      padding: 0 .6875em 1.375em;
      float: left; /* [1] */
      width: 100%; /* [1] */
    }
    /**
    * If flexbox wrapping is supported, it will be automatically taken care of
    * at the various breakpoints.
    */
    .flexwrap .row {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    }

    /** 
    * Set columns as flexbox column containers, to enable equal height columns
    * on wider screens later, if wrapping is supported.
    */
    .flexwrap .col {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .flexwrap .col > * {
      -webkit-flex: 1;
      -ms-flex: 1 0 auto;
      flex: 1;
    }
    @media only screen and (min-width: 35em) {
      .row-quartet > * {
        width: 50%;
      }
      .subcategory-featured {
        width: 100%;
      }
    }
    @media only screen and (min-width: 50em) {
      .row-quartet > * {
        width: 25%;
      }
      .subcategory-featured {
        width: 50%;
      }
      
    }
    @media only screen and (min-width: 70em) {
      .subcategory-header {
        width: 20%;
      }
      .subcategory-content {
        width: 80%;
      }
    }

    .col:last-child {
      float: right;
    }
    /* content styling */

    .subcategory {
      margin-top: 1.5em;
      border-bottom: 1px solid #8e3339;
    }


    .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">
                <picture>
                  <source type="image/webp"
                  srcset="img/300x150.webp 300w,
                  img/400x200.webp 400w,
                  img/600x300.webp 600w,
                  img/800x400.webp 800w,
                  img/1200x600.webp 1200w"
                  sizes="(min-width: 70em) 28em,
                  (min-width: 50em) calc(50vw * 0.95 - 2.75em),
                  calc(95vw - 1.375em)"
                  />
                  <img src="img/300x150.png"
                  srcset="img/300x150.png 300w,
                  img/400x200.png 400w,
                  img/600x300.png 600w,
                  img/800x400.png 800w,
                  img/1200x600.png 1200w"
                  sizes="(min-width: 70em) 28em,
                  (min-width: 50em) calc(50vw * 0.95 - 2.75em),
                  calc(95vw - 1.375em)"
                  alt="Dummy image">
                </picture>
                <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="img/300x150.png"
                srcset="img/300x150.png 300w,
                img/400x200.png 400w,
                img/600x300.png 600w,
                img/800x400.png 800w,
                img/1200x600.png 1200w"
                sizes="(min-width: 70em) 12.6875em,
                (min-width: 50em) calc(25vw * 0.95 - 2.75em),
                (min-width: 35em) calc(95vw / 2 - 4.125em),
                calc(95vw - 1.375em)"
                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="img/300x150.png"
                srcset="img/300x150.png 300w,
                img/400x200.png 400w,
                img/600x300.png 600w,
                img/800x400.png 800w,
                img/1200x600.png 1200w".png
                sizes="(min-width: 70em) 12.6875em,
                (min-width: 50em) calc(25vw * 0.95 - 2.75em),
                (min-width: 35em) calc(95vw / 2 - 4.125em),
                calc(95vw - 1.375em)"
                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>
  </main>

</body>
</html>