text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox 0 — starting code</title>

Sample flexbox example

First article

Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.

Second article

Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.

Third article

Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.

Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox align 1 —  center aligned horizontally and vertically</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 70%;
        max-width: 960px;
        margin: 20px auto;
      }

      button {
        font-size: 18px;
        line-height: 1.5;
        width: 15%;
      }

      div {
        height: 100px;
        border: 1px solid black;
      }

      /* Add your flexbox CSS below here */

      div {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }

    </style>
  </head>
  <body>
    <div>
      <button>Smile</button>
      <button>Laugh</button>
      <button>Wink</button>
      <button>Shrug</button>
      <button>Blush</button>
    </div>
  </body>
</html>

repo_name: mdn/learning-area

repo_language: HTML

mime_type: text/plain


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox align 0 — starting code</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 70%;
        max-width: 960px;
        margin: 20px auto;
      }

      button {
        font-size: 18px;
        line-height: 1.5;
        width: 15%;
      }

      div {
        height: 100px;
        border: 1px solid black;
      }

      /* Add your flexbox CSS below here */

    </style>
  </head>
  <body>
    <div>
      <button>Smile</button>
      <button>Laugh</button>
      <button>Wink</button>
      <button>Shrug</button>
      <button>Blush</button>
    </div>
  </body>
</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Complex flexbox example</title>

Complex flexbox example

First article

Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.

Second article

Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.

          <button>Smile</button>
          <button>Laugh</button>
          <button>Wink</button>
          <button>Shrug</button>
          <button>Blush</button>

Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.

Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>3 column layout wrong order</title>

3 column layout wrong order

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third column

Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple clearing example</title>

Float clearing example

Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple clearing example</title>

flow-root example

Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple clearing example</title>

"clearfix" example

Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple clearing example</title>

clearing with overflow example

Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>2 column layout example</title>

2 column layout example

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple float example</title>

Simple float example

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple float example</title>

Simple float example

Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Float disaster</title>

Float disaster

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third column

Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.

©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>2 column layout fixed example</title>

2 column layout fixed example

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fixed layout border-box</title>

Fixed layout border-box

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third column

Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.

©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fixed layout adjusted percentages</title>

Fixed layout adjusted percentages

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third column

Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.

©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fixed height columns</title>

Fixed height columns

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third column

Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.

©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>3 column layout example</title>

3 column layout example

First column

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Third column

Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fake div buttons</title>

Fake buttons

Click me!

Click me too!

And me!


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Native keyboard accessibility</title>

Links

This is a link to Mozilla.

Another link, to the Mozilla Developer Network.

Buttons

      <button data-message="This is from the first button">Click me!</button>
      <button data-message="This is from the second button">Click me too!</button>
      <button data-message="This is from the third button">And me!</button>

Form

    <form>

        Fill in your name:
        <input type="text" id="name" name="name">

        Enter your age:
        <input type="text" id="age" name="age">

        Choose your mood:
        <select id="mood" name="mood">
          <option>Happy</option>
          <option>Sad</option>
          <option>Angry</option>
          <option>Worried</option>
        </select>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Good semantics example</title>

My heading

This is the first section of my document.

I'll add another paragraph here too.

My subheading

This is the first subsection of my document. I'd love people to be able to find this content!

My 2nd subheading

This is the second subsection of my content. I think is more interesting than the last one.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Bad semantics example</title>

    My heading

    This is the first section of my document.

    I'll add another paragraph here too.

    My subheading

    This is the first subsection of my document. I'd love people to be able to find this content!

    My 2nd subheading

    This is the second subsection of my content. I think is more interesting than the last one.


text:
'use strict';

const assert = require('assert');

let webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

describe('Alert', () => {
  it('should have the correct text content - this is from the first button', done => {
    let driver = new webdriver.Builder()
        .withCapabilities(webdriver.Capabilities.firefox())
        .build();

    driver.get('http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html')
        .then(() => driver.findElement(By.css('button:nth-of-type(1)')))
        .then(button => button.click())
        .then(() => driver.switchTo().alert())
        .then(alert => alert.getText())
        .then(text => assert.equal(text, 'This is from the first button'))
        .then(() => driver.quit())
        .then(done)
        .catch(err => done(err));
  });
});


text:
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

driver.get('https://www.google.com');
driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
  });
});

driver.quit();


text:
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

driver.get('http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html');

const button = driver.findElement(By.css('button:nth-of-type(1)'));

button.click();

const alert = driver.switchTo().alert();

alert.getText().then(function(text) {
  console.log('Alert text is \'' + text + '\'');
});

alert.accept();

const input = driver.findElement(By.id('input1'));

driver.sleep(2000).then(function() {
  input.sendKeys('Filling in my form');
  input.getAttribute("value").then(function(value) {
    if(value !== '') {
      console.log('Form input editable');
    }
  });
});

driver.quit();


text:
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until,
    username = "YOUR-USER-NAME",
    accessKey = "YOUR-ACCESS-KEY";

let SauceLabs = require('saucelabs');

let saucelabs = new SauceLabs({
    username : "YOUR-USER-NAME",
    password : "YOUR-ACCESS-KEY"
});

let driver = new webdriver.Builder().
    withCapabilities({
      'browserName': 'chrome',
      'platform': 'Windows XP',
      'version': '43.0',
      'username': username,
      'accessKey': accessKey
    }).
    usingServer("https://" + username + ":" + accessKey +
          "@ondemand.saucelabs.com:443/wd/hub").
    build();

driver.getSession().then(function (sessionid){
      driver.sessionID = sessionid.id_;
});

driver.get('http://www.google.com');
driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
      let testPassed = true;
    } else {
      console.log('Test failed');
      let testPassed = false;
    }

    saucelabs.updateJob(driver.sessionID, {
      name: 'Google search results page title test',
      passed: testPassed
    }, function(err,res) {

    });
  });
});

driver.quit();


text:
const request = require('request'); // require request to use the REST API
let webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

// Input capabilities
let capabilities = {
   'browserName' : 'Firefox',
   'browser_version' : '56.0 beta',
   'os' : 'OS X',
   'os_version' : 'Sierra',
   'resolution' : '1280x1024',
   'browserstack.user' : 'chrismills4',
   'browserstack.key' : 'DoDmjvSzK5eLSmAtVwi4',
   'browserstack.debug' : 'true',
   'build' : 'First build',
   'project' : 'Google test 2' // split up into projects
};

let driver = new webdriver.Builder().
  usingServer('http://hub-cloud.browserstack.com/wd/hub').
  withCapabilities(capabilities).
  build();

// obtain session ID
let sessionId;

driver.session_.then(function(sessionData) {
  sessionId = sessionData.id_;
});

driver.get('http://www.google.com');
driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
      request({uri: "https://chrismills4:DoDmjvSzK5eLSmAtVwi4@www.browserstack.com/automate/sessions/" + sessionId + ".json", method:"PUT", form:{"status":"passed","reason":"Google results showed correct title"}});
    } else {
      console.log('Test failed');
      request({uri: "https://chrismills4:DoDmjvSzK5eLSmAtVwi4@www.browserstack.com/automate/sessions/" + sessionId + ".json", method:"PUT", form:{"status":"failed","reason":"Google results showed wrong title"}});
    }
  });
});

driver.quit();


text:
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .usingServer('http://localhost:4444/wd/hub')
    .build();

driver.get('http://www.google.com');
driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
  });
});

driver.quit();


text:
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

let driver_fx = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

let driver_chr = new webdriver.Builder()
    .forBrowser('chrome')
    .build();

searchTest(driver_fx);
searchTest(driver_chr);

function searchTest(driver) {
  driver.get('https://www.google.com');
  driver.findElement(By.name('q')).sendKeys('webdriver');

  driver.sleep(1000).then(function() {
    driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
  });

  driver.findElement(By.name('btnK')).click();

  driver.sleep(2000).then(function() {
    driver.getTitle().then(function(title) {
      if(title === 'webdriver - Google Search') {
        console.log('Test passed');
      } else {
        console.log('Test failed');
      }
    });
  });

  driver.quit();
}


text:
main {
  display: flex;
}

main div {
  padding-right: 4%;
  flex: 1;
}

main div:last-child {
  padding-right: 0;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS feature detection example</title>

    <link href="basic-styling.css" rel="stylesheet">
    <link class="conditional" href="float-layout.css" rel="stylesheet">

My funky website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Copyright blah blah


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS feature detection example</title>
    <link href="basic-styling.css" rel="stylesheet">
    <link class="conditional" href="" rel="stylesheet">

My funky website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Copyright blah blah


text:
main div {
  width: 22%;
  float: left;
  padding-right: 4%;
}

main div:last-child {
  padding-right: 0;
}

footer {
  clear: left;
}


text:
html {
  font-family: sans-serif;
}

body {
  min-width: 960px;
  width: 70%;
  margin: 0 auto;
}

header {
  background-color: lime;
  height: 100px;
}

footer {
  background-color: lime;
  height: 50px;
  padding: 0 2%;
}

main {
  padding: 2%;
}

h1 {
  margin: 0;
  font-size: 4em;
  text-align: center;
  line-height: 100px;
}

p {
  font-size: 1em;
  line-height: 1.5;
}

footer p {
  line-height: 50px;
}

@supports (flex-flow: row) and (flex: 1) {

  main {
    display: flex;
  }

  main div {
    padding-right: 4%;
    flex: 1;
  }

  main div:last-child {
    padding-right: 0;
  }

}

@supports not (flex-flow: row) and (flex: 1) {

  main div {
    width: 22%;
    float: left;
    padding-right: 4%;
  }

  main div:last-child {
    padding-right: 0;
  }

  footer {
    clear: left;
  }

}


text:
html {
  font-family: sans-serif;
}

body {
  min-width: 960px;
  width: 70%;
  margin: 0 auto;
}

header {
  background-color: lime;
  height: 100px;
}

footer {
  background-color: lime;
  height: 50px;
  padding: 0 2%;
}

main {
  padding: 2%;
}

h1 {
  margin: 0;
  font-size: 4em;
  text-align: center;
  line-height: 100px;
}

p {
  font-size: 1em;
  line-height: 1.5;
}

footer p {
  line-height: 50px;
}

/* Properties for browsers with modern flexbox */

.flexbox main {
  display: flex;
}

.flexbox main div {
  padding-right: 4%;
  flex: 1;
}

.flexbox main div:last-child {
  padding-right: 0;
}

/* Fallbacks for browsers that don't support modern flexbox */

.no-flexbox main div {
  width: 22%;
  float: left;
  padding-right: 4%;
}

.no-flexbox main div:last-child {
  padding-right: 0;
}

.no-flexbox footer {
  clear: left;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Modernizr JavaScript example</title>

Simple maps example


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS @supports example</title>
    <link href="supports-styling.css" rel="stylesheet">

My funky website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Copyright blah blah


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Modernizr CSS example</title>

    <link href="modernizr-css.css" rel="stylesheet">

My funky website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
        erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
       at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
       feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
       auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
       In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
       laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
       tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
       erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
      at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
      feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
      auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
      In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
      laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.

Copyright blah blah


text:
html {
  font-family: sans-serif;
}

body {
  min-width: 960px;
  width: 70%;
  margin: 0 auto;
}

header {
  background-color: lime;
  height: 100px;
}

footer {
  background-color: lime;
  height: 50px;
  padding: 0 2%;
}

main {
  padding: 2%;
}

h1 {
  margin: 0;
  font-size: 4em;
  text-align: center;
  line-height: 100px;
}

p {
  font-size: 1em;
  line-height: 1.5;
}

footer p {
  line-height: 50px;
}


text:
const request = require("request");

let bsUser = "BROWSERSTACK_USERNAME";
let bsKey = "BROWSERSTACK_ACCESS_KEY";
let baseUrl = "https://" + bsUser + ":" + bsKey + "@www.browserstack.com/automate/";

function getPlanDetails(){
	request({uri: baseUrl + "plan.json"}, function(err, res, body){
		console.log(JSON.parse(body));
	});
	/* Response:
	{
		automate_plan: <string>,
		parallel_sessions_running: <int>,
		team_parallel_sessions_max_allowed: <int>,
		parallel_sessions_max_allowed: <int>,
		queued_sessions: <int>,
		queued_sessions_max_allowed: <int>
	}
	*/
}

getPlanDetails();


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Arrow function example</title>
    <link href="style.css" rel="stylesheet">


text:
const SauceLabs = require('saucelabs');

let myAccount = new SauceLabs({
  username: "your-sauce-username",
  password: "your-sauce-api-key"
});

myAccount.getAccountDetails(function (err, res) {
  console.log(res);
  myAccount.getServiceStatus(function (err, res) {
    // Status of the Sauce Labs services
    console.log(res);
    myAccount.getJobs(function (err, jobs) {
      // Get a list of all your jobs
      for (let k in jobs) {
        if ( jobs.hasOwnProperty( k )) {
          myAccount.showJob(jobs[k].id, function (err, res) {
            let str = res.id + ": Status: " + res.status;
            if (res.error) {
              str += "\033[31m Error: " + res.error + " \033[0m";
            }
            console.log(str);
          });
        }
      }
    });
  });
});


text:
body {
  display: flex;
}

body > p {
  flex: 1;
  text-align: center;
}


text:
let array = ['Chris', 'Bob', 'Mark', 'Paul'];

// Arrow function syntax
array.forEach((e, i, a) => {
   const elem = document.createElement('p');
   elem.textContent = (i + 1) + '. ' + e;
   document.body.appendChild(elem);
});


text:
const gulp = require('gulp');
const htmltidy = require('gulp-htmltidy');
const autoprefixer = require('gulp-autoprefixer');
const csslint = require('gulp-csslint');
const babel = require('gulp-babel');
const jshint = require('gulp-jshint');
const { series } = require('gulp');

function html(cb) {
  return gulp.src('src/index.html')
        .pipe(htmltidy())
        .pipe(gulp.dest('build'));
    cb();
}

function css(cb) {
    return gulp.src('src/style.css')
        .pipe(csslint())
        .pipe(csslint.formatter('compact'))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(gulp.dest('build'));
    cb();
}

function js(cb) {
    return gulp.src('src/main.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('build'));
        cb();
}

exports.html = html;
exports.css = css;
exports.js = js;
exports.default = series(html, css, js);


text:
<!DOCTYPE html>

	<meta charset="utf-8">
	<title>Hidden info panel</title>

  ❔
  <input type="checkbox" id="toggle">

Information

Some very important information about your app:

It has a really cool slide-out information box.

This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.

It also uses a cool technique called the checkbox hack.

This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Selectivizr example</title>

Selectivizr example

Selectivizr example