text:
/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

/* typography */

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

/* graphics */

thead, tfoot {
  background: url(leopardskin.jpg);
  color: white;
}

thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
  text-shadow: 1px 1px 1px black;
}

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}

/* caption */

caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}


text:
<!DOCTYPE html>

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

Border image

repo_name: mdn/learning-area

repo_language: HTML

mime_type: text/plain


text:
<!DOCTYPE html>

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

Writing progress

Chapter 1: I was born

Chapter 2: School

Chapter 3: University

Chapter 4: Rock and roll

Chapter 5: Fell in love

Chapter 6: Children

Chapter 7: Tired!


text:
<!DOCTYPE html>

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

Rounded corners are groovy!


text:
html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Min and max width example</title>
    <link href="min-max-container.css" type="text/css" rel="stylesheet">

Min and max width example

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>Max width image example</title>
    <link href="min-max-image-container.css" type="text/css" rel="stylesheet">

Max width image example

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>Box sizing example</title>
    <link href="box-sizing-example.css" type="text/css" rel="stylesheet">


text:
<!DOCTYPE html>

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

This is a box

This is a box

This is a box

    <button class="create">Create box</button>
    <button class="reset">Reset demo</button>


text:
html {
  font-family: sans-serif;
  background: #ccc;
}

h1 {
  margin-top: 0;
  padding-top: 24px;
}

p {
  line-height: 1.5;
  letter-spacing: 1px;
}

body {
  background: white;
  padding: 10px;

  /* First bit of CSS from the article */
  width: 70%;
  max-width: 1280px;
  min-width: 480px;
  margin: 0 auto;
}

img {
  /* Second bit of CSS from the article */
  display: block;
  margin: 0 auto;
  max-width: 100%;
}


text:
html {
  font-family: sans-serif;
  background: #ccc;
}

h1 {
  margin-top: 0;
  padding-top: 24px;
}

p {
  line-height: 1.5;
  letter-spacing: 1px;
}

body {
  background: white;
  padding: 10px;

  /* First bit of CSS from the article */
  width: 70%;
  max-width: 1280px;
  min-width: 480px;
  margin: 0 auto;
}


text:
<!DOCTYPE html>

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

    <form>

First of all, tell us your name and age.

        First name:
        <input type="text" id="fname">

        Last name:
        <input type="text" id="lname">

        Age:
        <input type="text" id="age">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>Cool box</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

This is a cool box


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

div {
  /* sizing and position */
  width: 200px;
  margin: auto;
  line-height: 9;
  /* text */
  font-size: 1.1rem;
  /* Since the default font-size is 16px, I guessed that the correct
  size would be 1.1rem. I set it, then checked it in the dev tools. */
  text-align: center;
  color: white;
  /* Choose a text color which contrasts well with it's background
  ...again make use of the dev tools! */
  text-shadow: 1px 1px 1px black;
  /*border*/
  border-radius: 10px;
  border: 1px solid #990000;
  /* background */
  background-color: red;
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
  /* other effects */
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6), 2px 2px 5px black;
}


text:
# Marking guide for "A cool looking box"
The following guide outlines a marking guide for the MDN Learning Area CSS assessment — [A cool looking box](https://developer.mozilla.org/en-US/Learn/CSS/Styling_boxes/A_cool_looking_box). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 22. Work out their final mark, and then divide by 22 and multiply by 100 to give a percentage mark. For reference, you can find a [finished styled box](index.html) that would be awarded top marks.

## General tasks

"Apply the CSS to the HTML." (1 mark)

One mark for creating a suitable &ltlink> element, or <style> element to apply the CSS with.

## Styling the box

"A reasonable width for a large box." (1 mark)

One mark for giving the div a width of around 150-300px. This is fairly hard to not get, as long as it isn't set to 1000px, or 50px.

"A reasonable height for a large box, centering the text vertically." (1 mark)

One mark for giving the div a line-height of around 8-10. Again, award the mark as long as it doesn't look ridiculous.

"Horizontally Centered box." (1 mark)

One mark for giving the div margin of 0 auto, or auto, or similar.

"A slight Increase in font size, to around 17-18px computed style. Use rems." (2 marks)

One mark for setting an appropriate font-size (somewhere between 1.0625-1.125rem), and one mark for a good explanation. Something like recalling that the default font size is 16px, and calculating an exact rem value (e.g. 17/16), or approximating it and checking it in the browser dev tools, will do fine.

"A base color for the design. Give the box this color as its background color." (1 mark)

One mark for choosing a reasonable color and setting it as a background-color. Easy.

"A contrasting color for the text; a black text shadow. Make it readable." (2 marks)

One mark for setting a contrasting color and one mark for a tight text-shadow. Something like 1px 1px 1px black is fine, but nothing too diffuse.

"A fairly subtle border radius." (1 mark)

One mark for setting a fairly subtle border-radius value like 10-15px, or 1rem perhaps. 20px at the most; nothing too ridiculous.

"A 1 pixel solid border with a color similar to the base color, but a slightly darker shade." (2 marks)

One mark for setting the border as 1px solid [a color], and one mark for setting the color to a slightly darker shade than the base color, e.g. if your base color is rgb(255,0,0), set it to rgb(200,0,0).

"A linear semi-transparent black gradient that goes towards the top left corner. Make it completely transparent at the start, gradiating to around 0.2 opacity by 30% along, and remaining at the same color until the end." (4 marks)

An ideal value would be background-image: linear-gradient(to top left, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 30%, rgba(0,0,0,0));. The student can get:

One mark for knowing how to use a linear-gradient.

One mark for getting the direction value right: to top left (to left top is also fine)

One mark for using rgba() or hsla() colors correctly, with an opacity channel value of 0.2 or similar.

One mark for the correct use of an 0.2 opacity color stop at 30% along.

"Multiple box shadows." (6 marks)

The mark scheme is as follows:

One mark for getting the basic box-shadow syntax correct.

One mark for the simple, non-inset box shadow. Something like this is fine: 2px 2px 5px black. But not too diffuse.

Two marks for the top left shadow. It should have a positive offset to move it down and right - making it hug the top and left edges, and use a semi-transparent white. A good example: inset 2px 2px 3px rgba(255,255,255,0.6).

Two marks for the bottom right shadow. It should have a negative offset to move it up and left - making it hug the bottom and right edges, and use a semi-transparent black. A good example: inset -2px -2px 3px rgba(0,0,0,0.6).


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS blend modes examples</title>

Background blend modes

      No blend mode

      Multiply

      Screen

      Overlay

      Color-dodge

      Color-burn

      Hard-light

      Soft-light

      Difference

      Hue

Mix blend modes

      No mix blend mode

      Multiply mix

      Screen mix

      Overlay mix

      Color-dodge mix

      Color-burn mix

      Hard-light mix

      Soft-light mix

      Difference mix

      Hue mix


text:
<!DOCTYPE html>

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

Blur filter

Brightness filter

Drop shadow filter

Grayscale filter

Sepia filter

Inversion filter

Saturation filter

Opacity filter

Hue rotation filter


text:
<!DOCTYPE html>

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

WOW

WOW


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS box shadow examples</title>

Basic box shadow example

Warning: The thermostat on the cosmic transcender has reached a critical level.

Multiple box shadows example

Warning: The thermostat on the cosmic transcender has reached a critical level.

Inner shadows example

    <button>Press me!</button>


text:
<!DOCTYPE html>

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

My imperfect page

My article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer nec odio. Praesent libero.

Sed cursus ante dapibus diam.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

©1978 Chris' brain


text:
/* General styles */

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
}

body {
  width: 80em;
  margin: 0 auto;
}

/* Typography */

h1 {
  font-size: 4em;
}

h2 {
  font-size: 3.2em;
}

pli {
  font-size: 1.7em;
}

/*+++ more specific section styles +++*/

/* header and footer */

header, footer {
  background-colour: teal;
  height: 10em;
  padding: 2em;
}

h1, footer p {
  margin: -70px;
}

h1 {
  text-align: center;
  padding: 0.5em 0;
}

/* main content */

main {
  padding: 2em;
}

main p, main li {
  line-height: 2;
}

img {
  float: right
  margin: 1.2em 2em;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fundamental CSS comprehension</title>
    <link rel="stylesheet" href="style.css">

Chris Mills

50 My Street

         The Town

         Gray Peach

         UK

         ZO50 1MU

        Tel: 01234 567 890

        Mail: chris@nothere.com

Editing, writing, and web development services


text:
/* General styles */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

/* card setup */

.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

.card h2, .card p {
  margin: 0;
}

/* Header and footer */

.card header, .card footer {
  height: 3em;
  padding: 1em;
}

.card header {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
}

.card footer {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
}

.card header h2 {
  font-size: 2em;
  line-height: 1.5;
}

.card footer p {
  font-size: 1.5em;
  line-height: 2;
}

/* Main body of card (article) */

.card article {
  height: 12em;
  background-color: rgba(0,0,0,0.25);
}

.card article img {
  max-height: 100%;
  float: right;
}

.card article p {
  padding: 1em;
  color: rgba(255,255,255,0.8);
}


text:
# Marking guide for "Fundamental CSS comprehension"
The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Fundamental CSS comprehension](https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 35. Work out their final mark, and then divide by 35 and multiply by 100 to give a percentage mark. For reference, you can find a [finished business card](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/) that would be awarded top marks.

## Basic setup

"create a new file in the same directory as your HTML and image files" (1 mark)

The first task — creating your CSS file — is only worth one mark. It is pretty easy, although you won't be able to do much without getting this right.

"Link your CSS to your HTML file via a <link> element" (2 marks)

Slightly more challenging, but again pretty easy.

"copy and paste them into the top of your new CSS file. Use them as a test to make sure your CSS is properly applied to your HTML." (1 mark)

This is just copy and paste, so not really worth much.

"Above the two rules, add a CSS comment with some text inside it to indicate that this is a set of general styles for the overall page. "General page styles" would do. Also add three more comments..." (2 marks)

Good commenting is important. You should award 0.5 marks for each of the four comments, as long as they are written in a sensible place with meaningful text.

## Taking care of the provided selectors and rulesets

"look at the four selectors, and calculate the specificity for each one." (2 marks)

The correct specificity for each one is as follows (half a mark each):

0012

0011

0011

0010

"Now it's time to put the right selector on the right rule set!" (4 marks)

The correct pairing are as follows (1 mark for each):

.card article img goes with the fourth ruleset.

.card footer goes with the third ruleset.

.card header goes with the second ruleset.

.card goes with the first ruleset.

"Beware! There are two errors in the provided rulesets." (2 marks)

The errors are as follows (one mark for fixing each one):

background-colour in the first ruleset: colour > color.

max-height: 100% in the fourth rule needs a semi-colon at the end of it.

## New rulesets you need to write

"Write a ruleset that targets both the card header, and card footer..." (3 marks)

The correct rule should look something like this. Since the default font size as set on the <html> element is 10px, 1em is 10px, so the height (30px) should be represented by 3em, and the padding by 1em. 10 + 30 + 10 = 50.

"The default margin applied to the <h2> and <p> elements by the browser will interfere with our design" (3 marks)

The correct rule should look something like this. Simply setting the margin to 0 on all paragraphs and the <h2> should be fine.

"To stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific height." (3 marks)

The correct rule should look something like this. The height needs to be 12ems (as 12 x the base size of 10px = 120px), and the color needs to be RGBA — black expressed in RGB (0,0,0) with an alpha channel value of about 0.1-0.3.

"Write a ruleset that gives the <h2> an effective font size of 20px (but expressed in ems) and an appropriate line height to place it in the center of the header's content box..." (3 marks)

The correct rule should look something like this. The height needs to be 2ems (2 x 10 = 20), and the line height would be expressed best as 1.5 (1.5 x 20px = 30px, the height of the header content.) Setting line height to 30px would also be ok.

"Write a ruleset that gives the <p> an effective font size of 15px (but expressed in ems) and an appropriate line height to place it in the center of the footer's content box..." (3 marks)

The correct rule should look something like this. The height needs to be 1.5ems (1.5 x 10 = 15), and the line height would be expressed best as 2 (2 x 15px = 30px, the height of the header content.) Setting line height to 30px would also be ok.

"As a last little touch, give the paragraph inside the <article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its color to be fairly light so it is easy to read." (3 marks)

The correct rule should look something like this. The padding needs to be 1em, and the color needs to be set to some kind of lighter color that will show up well against the darker background we set earlier. Pure white would be ok, or something similar.

## Other things to think about

"You'll get bonus marks if you write your CSS for maximum readability, with a separate declaration on each line." (2 marks)

If the CSS is arranged in a readable  manner, with a separate declaration on each line (or similar), then they get the marks. If not, then they don't.

"You should include .card at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content." (1 mark)

A nice little addition to include in the assessment for promoting the idea of "compartmentalisation", or "namespacing" of CSS so different sets of rules don't interfere with one another. Not that important in this particular context, but it would be nice for the student to include.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS values and units</title>
    <link rel="stylesheet" href="style.css">

This is a paragraph.

This is a paragraph.

This is a paragraph.

Blue ocean silo royal baby space glocal evergreen relationship housekeeping native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary virtuoso granularity catalyst wow factor loop back brainstorm. Core competency baked in push back silo irrational exuberance circle back roll-up.

Hello

Fixed width layout with pixels

Liquid layout with percentages

This paragraph has a red background

This paragraph has a blue background

This paragraph has a kind of pinky lilac background


text:
/* General styles */

hr {
  width: 80%;
  margin: 50px auto;
}

/* Simple size/length example */

#length-simple p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

/* length units example */

#length-simple p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

#length-simple p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

#length-simple p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

/* unitless number example */

#unitless p {
  line-height: 1.5;
}

/* CSS animation example */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#animation p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

#animation p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

/* Percentage example */

#percentage div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

#percentage div:nth-child(1) {
  background-color: red;
  width: 1300px;
}

#percentage div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

/* Color example */

/* equivalent to the red keyword */
#color p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
#color p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
#color p:nth-child(3) {
  background-color: rgb(224,176,255);
}

/* length playground for live sample */

#length-playground .outer {
  width: 100%;
  height: 200px;
  background-color: red;
}

#length-playground .inner {
  width: 550px;
  height: 200px;
  background-color: blue;
}

/* color playground for live sample */

#color-playground .first {
  background-color: red;
  width: 400px;
  height: 200px;
  top: 0;
  left: 100px;
}

#color-playground .second {
  background-color: blue;
  width: 200px;
  height: 200px;
  top: -50px;
  left: 125px;
}

#color-playground .third {
  background-color: pink;
  width: 200px;
  height: 300px;
  top: -375px;
  left: 250px;
}

#color-playground div {
  position: relative;
}


text:
/* General styles - put these straight into your stylesheet */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

/* Selectors to be matched up with rulesets */

.card article img
.card footer
.card header
.card

/* Rulesets to be matched up with selectors */

{
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-colour: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

{
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
}

{
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
}

{
  max-height: 100%
  float: right;
}


text:
<!DOCTYPE html>

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

Chris Mills

50 My Street

         The Town

         Gray Peach

         UK

         ZO50 1MU

        Tel: 01234 567 890

        Mail: chris@nothere.com

Editing, writing, and web development services


text:
<!DOCTYPE html>

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

My imperfect page

My article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer nec odio. Praesent libero.

Sed cursus ante dapibus diam.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

©1978 Chris' brain


text:
/* General styles */

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
}

body {
  width: 80em;
  margin: 0 auto;
}

/* Typography */

h1 {
  font-size: 4em;
}

h2 {
  font-size: 3.2em;
}

p, li {
  font-size: 1.7em;
}

/*+++ more specific section styles +++*/

/* header and footer */

header, footer {
  background-color: teal;
  height: 10em;
  padding: 2em;
}

h1, footer p {
  margin: 0;
}

h1 {
  text-align: center;
  padding: 0.5em 0;
}

/* main content */

main {
  padding: 2em;
}

main p, main li {
  line-height: 2;
}

img {
  float: right;
  margin: 1.2em 2em;
}


text:
<!DOCTYPE html>

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

Hello World!

This is a paragraph.

This is

A list

My first paragraph.

My second paragraph.

My third paragraph

Winner: Velma Victory

2nd: Colin Contender

3rd: Phoebe Player

Manchester United

Barcelona

Bayern Munich

Real Madrid

Borussia Dortmund

Southampton FC

United Kingdom

Germany

Finland

Russia

Spain

Poland

This is my very important paragraph. I am a distinguished gentleman of such renown that my paragraph needs to be styled in a manner befitting my majesty. Bow before my splendour, dear students, and go forth and learn CSS!

Home

Portfolio

About

Welcome to my website

Hello, and welcome! I hope you enjoy your time here.

My philosophy

I am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and drink green tea.


text:
/* General styles */

hr {
  width: 80%;
  margin: 50px auto;
}

/* Element selectors example */

#element-selectors h1 {
  color: red;
  text-shadow: 1px 1px 1px black;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1));
  padding: 3px;
  text-align: center;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.5);
}

/* Class selectors example */

#class-selectors .base-box {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
  padding: 3px 3px 3px 7px;
}

#class-selectors .important {
  font-weight: bold;
}

#class-selectors .editor-note {
  background-color: #9999ff;
  border-left: 6px solid #333399;
}

#class-selectors .warning {
  background-color: #ff9999;
  border-left: 6px solid #993333;
}

/* ID selectors example */

#id-selectors p {
  text-transform: uppercase;
  padding: 5px;
}

#id-selectors #first {
  background-color: goldenrod;
}

#id-selectors #second {
  background-color: silver;
}

#id-selectors #third {
  background-color: #CD7F32;
}

/* Attribute selectors */

#attribute-selectors li[lang="en-GB"] {
  background: url("en-GB.png") 5px center no-repeat;
}

#attribute-selectors li[lang="de"] {
  background: url("de.png") 5px center no-repeat;
}

#attribute-selectors li[lang="es"] {
  background: url("es.png") 5px center no-repeat;
}

#attribute-selectors li[data-perf*="inc"] {
  background-color: rgba(0,255,0,0.7);
}

#attribute-selectors li[data-perf*="same"] {
  background-color: rgba(0,0,255,0.5);
}

#attribute-selectors li[data-perf*="dec"] {
  background-color: rgba(255,0,0,0.7);
}

#attribute-selectors li[data-perf*="pro"] {
  font-weight: bold;
}

#attribute-selectors li[data-perf*="rel"] {
  font-style: italic;
  color: #666;
}

#attribute-selectors ol {
  padding: 0;
}

#attribute-selectors li {
  padding: 3px 3px 3px 34px;
  margin-bottom: 5px;
  list-style-position: inside;
}

/* Pseudo class selectors */

#pseudo-class-selectors ul {
  padding: 0;
}

#pseudo-class-selectors li {
  padding: 3px;
  margin-bottom: 5px;
  list-style-type: none;
}

#pseudo-class-selectors a {
  text-decoration: none;
  color: black;
}

#pseudo-class-selectors a:hover {
  text-decoration: underline;
  color: red;
}

#pseudo-class-selectors li:nth-of-type(2n) {
  background-color: #ccc;
}

#pseudo-class-selectors li:nth-of-type(2n+1) {
  background-color: #eee;
}

/* Pseudo element selectors */

#pseudo-element-selectors p::first-line {
  text-transform: uppercase;
}

#pseudo-element-selectors p::first-letter {
  font-size: 3em;
  border: 1px solid black;
  background: red;
  display: block;
  float: left;
  padding: 2px;
  margin-right: 4px;
}

/* Combinators */

#combinators ul {
  padding: 0;
  list-style-type: none;
}

#combinators ul a {
  text-decoration: none;
  display: inline-block;
  color: black;
  background-color: red;
  padding: 5px;
  margin-bottom: 10px;
}

#combinators ul a:hover {
  color: red;
  background-color: black;
}

h1 + p {
  font-weight: bold;
  color: blue;
}


text:
<!DOCTYPE html>

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

Heading 1

Paragraph 1

Paragraph 2

Heading 2

Paragraph 3

Paragraph 4


text:
<!DOCTYPE html>

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

    Header
    Main content
    Footer


text:
/* General styles */

body {
  margin: 0;
}

body > * {
  padding: 10px;
  font-size: 20px;
  border: 20px solid rgba(0,0,0,0.5);
}

/* specific boxes */

header, footer {
  background-color: blue;
  color: white;
}

main {
  background-color: yellow;
}

header {

}

footer {

}


text:
/*
Errno::ENOENT: No such file or directory - app/sass

Backtrace:
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:360:in `read'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:360:in `update_stylesheet'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:203:in `block in update_stylesheets'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:201:in `each'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:201:in `update_stylesheets'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin/compiler.rb:235:in `watch'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/plugin.rb:107:in `method_missing'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/exec.rb:463:in `watch_or_update'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/exec.rb:326:in `process_result'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/exec.rb:41:in `parse'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/lib/sass/exec.rb:21:in `parse!'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/gems/sass-3.2.14/bin/sass:13:in `<top (required)>'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/bin/sass:23:in `load'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/bin/sass:23:in `<main>'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/bin/ruby_executable_hooks:15:in `eval'
/Users/chrismills/.rvm/gems/ruby-1.9.3-p547/bin/ruby_executable_hooks:15:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Errno::ENOENT: No such file or directory - app/sass"; }


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">

Hello World!

This is my first CSS example


text:
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS values and units</title>
    <link rel="stylesheet" href="style.css">

This is a paragraph.

One selector to rule them all!

One

Two

One

Two


text:
/* General styles */

hr {
  width: 80%;
  margin: 50px auto;
}

/* Important example */

#important #winning {
  background-color: red;
  border: 1px solid black;
}

#important .better {
  background-color: gray;
  border: none !important;
}

#important p {
  color: white;
  background-color: blue;
  padding: 5px;
}

/* Selector weight example */

/* specificity: 0201; */
#weight #outer a {
  background-color: red;
}

/* specificity: 0301; */
#weight #outer #inner a {
  background-color: blue;
}

/* specificity: 0204; */
#weight #outer div ul li a {
  color: yellow;
}

/* specificity: 0213; */
#weight #outer div ul .nav a {
  color: white;
}

/* specificity: 0124; */
#weight div div li:nth-child(2) a:hover {
  border: 10px solid black;
}

/* specificity: 0123; */
#weight div li:nth-child(2) a:hover {
  border: 10px dashed black;
}

/* specificity: 0133; */
#weight div div .nav:nth-child(2) a:hover {
  border: 10px double black;
}

#weight a {
  display: inline-block;
  line-height: 40px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  margin-bottom: 10px;
}

#weight ul {
  padding: 0;
}

#weight li {
  list-style-type: none;
}

/* live sample styling */

#live #outer div ul .nav a {
  background-color: blue;
  padding: 5px;
  display: inline-block;
  margin-bottom: 10px;
}

#live div div li a {
color: yellow;
}

#live #outer #inner a {
  background-color: initial;
  color: red;
}


text:
<!DOCTYPE html>

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

Simple multicol 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 multicol example, break-inside</title>

I am the heading

 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.

I am the heading

 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.

I am the heading

 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.

I am the heading

 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.

I am the heading

 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.

I am the heading

 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.

I am the heading

 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.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple multicol example, column-count</title>

ß

Simple multicol 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>Multicol starting point</title>

Simple multicol 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>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>Tabbed info box</title>

Tab 1

Tab 2

Tab 3

The first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.

The second tab

This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.

The third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!

dui neque eleifend lorem, a auctor libero turpis at sem.

Aliquam ut porttitor urna.

Nulla facilisi


text:
<!DOCTYPE html>

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

Fake content

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

Tab 1

Tab 2

Tab 3

The first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.

The second tab

This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.

The third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!

dui neque eleifend lorem, a auctor libero turpis at sem.

Aliquam ut porttitor urna.

Nulla facilisi


text:
body {
    background-color: #fff;
    color: #333;
    margin: 0;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
  }

  img {
      max-width: 100%;
      display: block;
  }

  .logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
  }

  .grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
  }

  nav {
    background-color: #000;
    padding: .5em;
  }

  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }

  .photos {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .feature {
      width: 200px;
  }


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Layout Task</title>
    <link href="styles.css" rel="stylesheet" type="text/css">

    My exciting website!

        Home

        Blog

        About us

        Our history

        Contacts

        An Exciting Blog Post

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon
        azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
        dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon
        napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.
        Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram
        corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress.
        Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie
        turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki
        bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle
        seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

        Photography


text:
body {
    background-color: #fff;
    color: #333;
    margin: 0;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
  }

  img {
      max-width: 100%;
      display: block;
  }

  .logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
  }

  .grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
  }

  nav {
    background-color: #000;
    padding: .5em;
    top: 0;
    position: sticky;
  }

  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
  }

  nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }

  .photos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr 1fr;
  }

  .feature {
      width: 200px;
      float: left;
      margin: 0 20px 20px 0;
  }


text:
# Marking guide for "Fundamental Layout Comprehension"

The following guide outlines a marking guide for the MDN Learning Area CSS Layout Topic. Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or somethign that isn't clearly cut.

The overall mark awarded is out of 25. Work out their final mark, and then divide by 25 and multiply by 100 to give a percentage mark. For reference, you can find a finished example in this folder that would be awarded top marks.

While the actual amount of code that is required to be added is relatively small, this task is about making the right choices for this layout.

**Display the navigation items in a row, with an equal amount of space between the items.**

Here the student should use flexbox, adding `display: flex` to `nav ul` (2 marks), and `justify-content: space-between` (2 marks) to distribute the additional space between the items.

**The navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it.**

The selector `nav` should have `position: sticky` (2 marks) plus an offset value of `top: 0` (2 marks).

**The image that is inside the article should have text wrapped around it.**

The image should be floated left `float: left` (2 marks) with a right and bottom margin to move the text away from it (3 marks).

**The `<article>` and `<aside>` elements should display as a two column layout. The columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower.**

Here the student would ideally use CSS Grid  `display: grid` (2 marks), with the `fr` unit for the columns `grid-template-columns: 3fr 1fr` (2 marks). It would also be possible to use flexbox, and that would be acceptable too. Percentages would work for the column tracks, but ideally they realise that the fr unit works nicely here. The actual proportions they pick don't really matter. A `grid-gap` or `gap` property should separate the tracks, e.g. `grid-gap: 20px` (2 marks).

**The photographs should display as a two column grid with a 1 pixel gap between the images.**

This should be grid layout, a flex layout would mean the last image would spread out across the two tracks. A grid layout with two 1fr tracks (4 marks) will get the display we want with a `grid-gap` of 1px (2 marks). In supporting browsers the `gap` property rather than `grid-gap` will work.


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Skeleton example</title>
  </head>

  <body>

  </body>
</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid - minmax()</title>

Simple grid example

One
Has
More
Content
And
Is
Taller
Than
100px.

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS tables example rewritten as CSS grid</title>

    <form>

First of all, tell us your name and age.

        First name:
        <input type="text" id="fname">

        Last name:
        <input type="text" id="lname">

        Age:
        <input type="text" id="age">

    </form>


text:
<!DOCTYPE html>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid - tracks in the implicit grid</title>

Simple grid example

One

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid - Repeat Notation</title>

Simple grid example

One

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

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

1

2

3

4

5

6

7

8

9

10

11

12

13some
content

14this
is
more
content

15this
is
less

16


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid - line-based placement starting point</title>

        This is my lovely blog

My article

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.

Other things

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.

        Contact me@mysite.com


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fluid grid with calc()</title>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
<!DOCTYPE html>

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

Simple grid example

One

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fluid grid with offset class</title>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid fixed column tracks</title>

Simple grid example

One

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Grid - line-based placement starting point</title>

      This is my lovely blog

My article

          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.

Other things

          Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
          malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
          facilisis sed est.

      Contact me@mysite.com


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fluid grid with Flexbox</title>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Skeleton example</title>
    <link href="normalize.css" rel="stylesheet">
    <link href="skeleton.css" rel="stylesheet">

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid - the fr unit</title>

Simple grid example

One

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid - minmax()</title>

Simple grid example

One.

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS Grid starting point</title>

Simple grid example

One

Two

Three

Four

Five

Six

Seven


text:
<!DOCTYPE html>

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

DIV #1

position: absolute;

DIV #2

float: left;

DIV #3

float: right;

DIV #4

no positioning

DIV #5

position: absolute;


text:
<!DOCTYPE html>

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

Absolute positioning

I am a basic block level element. My adjacent block level elements sit on new lines below me.

Now I'm absolutely positioned, I'm not playing by the rules any more!

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>

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

Positioning context

I am a basic block level element. My adjacent block level elements sit on new lines below me.

Now I'm absolutely positioned relative to the <body> element, not the <html> element!

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>

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

z-index

I am a basic block level element. My adjacent block level elements sit on new lines below me.

Now I'm absolutely positioned relative to the <body> element, not the <html> element!

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Basic document flow</title>

Basic document flow

I am a basic block level element. My adjacent block level elements sit on new lines below me.

By default we span 100% of the width of our parent element, and our height is as tall as our child content. Our total width and height is our content + padding + border width/height.

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>

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

Sticky positioning

A

Apple

Ant

Altimeter

Airplane

B

Bird

Buzzard

Bee

Banana

Beanstalk

C

Calculator

Cane

Camera

Camel

D

Duck

Dime

Dipstick

Drone

E

Egg

Elephant

Egret


text:
<!DOCTYPE html>

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

Relative positioning

I am a basic block level element. My adjacent block level elements sit on new lines below me.

By default we span 100% of the width of our parent element, and our are as tall as our child content. Our total width and height is our content + padding + border width/height.

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>

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

Fixed positioning

I am a basic block level element. My adjacent block level elements sit on new lines below me.

Now I'm absolutely positioned relative to the <body> element, not the <html> element!

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>

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

Static positioning

I am a basic block level element. My adjacent block level elements sit on new lines below me.

By default we span 100% of the width of our parent element, and our are as tall as our child content. Our total width and height is our content + padding + border width/height.

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox ordering example</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;
      }

      button:first-child {
        order: 1;
      }

      button:last-child {
        order: -1;
      }

    </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>Flexbox wrap 1 — wrapping our content to new rows</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.

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

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

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

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

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

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

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

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

Twelth 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>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox wrap 0 — children overflowing</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.

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

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

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

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

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

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

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

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

Twelfth 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>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox 1 — basic flexbox model chosen</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>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox 2 — flexible sized items</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.