~tieong/mdn-playground

45928b2bf4d5c5c47d3ac9cfe996ebc7e35c80a9 — Thomas Ieong 1 year, 6 days ago 1fbf11e master
Added exercises
A css-playground/flex-layout/flex-layout3.html => css-playground/flex-layout/flex-layout3.html +44 -0
@@ 0,0 1,44 @@
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Flexbox: Task 3</title>

    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      .parent {
        display: flex;
        align-items: center;
	justify-content: center;
        border: 2px solid #77a6b6;
        border-radius: 0.5em;
        width: 400px;
        height: 300px;
      }

      .child {
	display: flex;
        align-items: center;
	justify-content: center;
        background-color: #4d7298;
        color: #fff;
        padding: 0.5em;
        width: 150px;
      }
    </style>
  </head>

  <body>
    <div class="parent">
      <div class="child">Center me.</div>
    </div>
  </body>
</html>

A css-playground/flex-layout/flex-layout4.html => css-playground/flex-layout/flex-layout4.html +60 -0
@@ 0,0 1,60 @@
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Flexbox: Task 4</title>


    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        ul {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
          width: 450px;
          list-style:none;
          padding: 0;
          margin: 0;
        }

        li {
          background-color: #4D7298;
          border: 2px solid #77A6B6;
          border-radius: .5em;
          color: #fff;
          padding: .5em;
          margin: .5em;
        }
    </style>



</head>

<body>

  <ul>
    <li>Turnip</li>
    <li>greens</li>
    <li>yarrow</li>
    <li>ricebean</li>
    <li>rutabaga</li>
    <li>endive</li>
    <li>cauliflower</li>
    <li>sea lettuce</li>
    <li>kohlrabi</li>
    <li>amaranth</li>
  </ul>

</body>

</html>

A css-playground/flex-layout/style.css => css-playground/flex-layout/style.css +31 -0
@@ 0,0 1,31 @@
/* Ex1 */
/* See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills */

/* <nav> */
/*   <ul> */
/*     <li><a href="/">Home</a></li> */
/*     <li><a href="/about">About Us</a></li> */
/*     <li><a href="/products">Our Products</a></li> */
/*     <li><a href="/contact">Contact Us</a></li> */
/*   </ul> */
/* </nav> */


nav ul {
  display: flex;
  justify-content: space-between;
}

/* ex2 */

ul {
  display:flex;
}

li {
flex: 1;
}

li:nth-of-type(1) {
  flex: 2;
}

A css-playground/fundamental-layout/images/balloon-sq1.jpg => css-playground/fundamental-layout/images/balloon-sq1.jpg +0 -0
A css-playground/fundamental-layout/images/balloon-sq2.jpg => css-playground/fundamental-layout/images/balloon-sq2.jpg +0 -0
A css-playground/fundamental-layout/images/balloon-sq3.jpg => css-playground/fundamental-layout/images/balloon-sq3.jpg +0 -0
A css-playground/fundamental-layout/images/balloon-sq4.jpg => css-playground/fundamental-layout/images/balloon-sq4.jpg +0 -0
A css-playground/fundamental-layout/images/balloon-sq5.jpg => css-playground/fundamental-layout/images/balloon-sq5.jpg +0 -0
A css-playground/fundamental-layout/images/balloon-sq6.jpg => css-playground/fundamental-layout/images/balloon-sq6.jpg +0 -0
A css-playground/fundamental-layout/index.html => css-playground/fundamental-layout/index.html +98 -0
@@ 0,0 1,98 @@
<!DOCTYPE html>
<html>
  <head>
    <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" />
  </head>

  <body>
    <div class="logo">My exciting website!</div>

    <nav>
      <ul>
        <li>
          <a href="">Home</a>
        </li>
        <li>
          <a href="">Blog</a>
        </li>
        <li>
          <a href="">About us</a>
        </li>
        <li>
          <a href="">Our history</a>
        </li>
        <li>
          <a href="">Contacts</a>
        </li>
      </ul>
    </nav>

    <main class="grid">
      <article>
        <h1>An Exciting Blog Post</h1>
        <img src="images/balloon-sq6.jpg" alt="placeholder" class="feature" />
        <p>
          Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
          onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
        </p>

        <p>
          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.
        </p>

        <p>
          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.
        </p>

        <p>
          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.
        </p>

        <p>
          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.
        </p>
      </article>

      <aside>
        <h2>Photography</h2>
        <ul class="photos">
          <li>
            <img src="images/balloon-sq1.jpg" alt="placeholder" />
          </li>
          <li>
            <img src="images/balloon-sq2.jpg" alt="placeholder" />
          </li>
          <li>
            <img src="images/balloon-sq3.jpg" alt="placeholder" />
          </li>
          <li>
            <img src="images/balloon-sq4.jpg" alt="placeholder" />
          </li>
          <li>
            <img src="images/balloon-sq5.jpg" alt="placeholder" />
          </li>
        </ul>
      </aside>
    </main>
  </body>
</html>

A css-playground/fundamental-layout/styles.css => css-playground/fundamental-layout/styles.css +91 -0
@@ 0,0 1,91 @@
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: 0.5em;
}

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

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

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

.feature {
  width: 200px;
}

nav > ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

nav {
  position: sticky;
  top: 0;
}

.feature {
  float: inline-start;
  margin-right: 15px;
}


.grid {
       display: grid;
       grid-template-columns: repeat(4, 2fr);
       grid-template-areas: 
         "article article article aside"
         ". . . aside";
       gap: 10px;
}

article {
  grid-area: article;
}

aside {
  grid-area: aside;
}

.photos {
  display: grid;
  grid-template-columns: repeat(2, 0.4fr);
  gap: 1px;
}

A css-playground/get-started/biog-download.html => css-playground/get-started/biog-download.html +79 -0
@@ 0,0 1,79 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Formatting a biography</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font-family: Arial, Helvetica, sans-serif;
        padding: 1em;
        margin: 0;
      }

      h1 {
        color: hotpink;
        font-size: 2em;
        font-family: Georgia, "Times New Roman", Times, serif;
        border-bottom: 10px dotted purple;
      }

      h2 {
          font-size: 1.5em;
	  font-style: italic;
      }

      .job-title {
        color: #999999;
        font-weight: bold;
      }

      a:link,
      a:visited {
        color: #fb6542;
      }

      a:hover {
          text-decoration: none;
	  color: green;
      }

      ul {
	  background-color: #eeeeee;
	  border: 5px solid purple;
          padding: 30px;
      }
    </style>
  </head>

  <body>
    <h1>Jane Doe</h1>
    <div class="job-title">Web Developer</div>
    <p>
      Far far away, behind the word mountains, far from the countries Vokalia
      and Consonantia, there live the blind texts. Separated they live in
      Bookmarksgrove right at the coast of the Semantics, a large language
      ocean.
    </p>

    <p>
      A small river named Duden flows by their place and supplies it with the
      necessary regelialia. It is a paradisematic country, in which roasted
      parts of sentences fly into your mouth.
    </p>

    <h2>Contact information</h2>
    <ul>
      <li>
        Email:
        <a href="mailto:jane@example.com">jane@example.com</a>
      </li>
      <li>
        Web:
        <a href="http://example.com">http://example.com</a>
      </li>
      <li>Tel: 123 45678</li>
    </ul>
  </body>
</html>

A css-playground/grid-layout/balloons1.jpg => css-playground/grid-layout/balloons1.jpg +0 -0
A css-playground/grid-layout/balloons2.jpg => css-playground/grid-layout/balloons2.jpg +0 -0
A css-playground/grid-layout/balloons3.jpg => css-playground/grid-layout/balloons3.jpg +0 -0
A css-playground/grid-layout/balloons4.jpg => css-playground/grid-layout/balloons4.jpg +0 -0
A css-playground/grid-layout/grid-layout1.html => css-playground/grid-layout/grid-layout1.html +49 -0
@@ 0,0 1,49 @@
<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Grid: task 1</title>

    <link rel="stylesheet" href="../styles.css">

    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      .grid > * {
        background-color: #4D7298;
        border: 2px solid #77A6B6;
        border-radius: 0.5em;
        color: #fff;
        padding: 0.5em;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
      }
    </style>

  </head>

  <body>

    <div class="grid">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
    </div>

  </body>

</html>

A css-playground/grid-layout/grid-layout2.html => css-playground/grid-layout/grid-layout2.html +87 -0
@@ 0,0 1,87 @@
<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Grid: task 2</title>

    <link rel="stylesheet" href="../styles.css">

    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      .grid > * {
        border-radius: .5em;
        color: #fff;
        padding: .5em;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 100px 100px 100px;
        gap: 10px;
      }

      .item1 {
        background-color: rgba(74,102,112,.7);
        border: 5px solid rgba(74,102,112,1);
      }

      .item2 {
        background-color: rgba(214,162,173,.7);
        border: 5px solid rgba(214,162,173,1);
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 100px 100px 100px;
        gap: 10px;
        grid-template-areas:
            "item1 item1 item1 ."
            "item1 item1 item1 ."
            "item2 item2 item2 item2"
            "item2 item2 item2 item2";
      }
      
      .item1 {
        grid-area: item1;
      }
      
      .item2 {
        grid-area: item2;
      }

      .item1 {
        display: grid;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
      }
      
      .item2 {
        grid-column: 2 / 5;
        grid-row: 2 / 4;
      }
    </style>

  </head>

  <body>

    <div class="grid">
      <div class="item1">One</div>
      <div class="item2">Two</div>
    </div>

  </body>

</html>

A css-playground/grid-layout/grid-layout3.html => css-playground/grid-layout/grid-layout3.html +74 -0
@@ 0,0 1,74 @@
<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Grid: task 3</title>

    <link rel="stylesheet" href="../styles.css">

    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      .grid > * {
        background-color: #4D7298;
        border: 2px solid #77A6B6;
        border-radius: .5em;
        color: #fff;
        padding: .5em;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas: 
          "one one"
          "two three"
          ". four";
        gap: 10px;
      }
    
      .one {
        grid-area: one;
      }
      
      .two {
        grid-area: two;
      }
      
      .three {
        grid-area: three;
      }
      
      .four {
        grid-area: four;
      }
    </style>

  </head>

  <body>

    <div class="grid">
      <div class="one">One</div>
      <div class="two">Two</div>
      <div class="three">Three</div>
      <div class="four">Four</div>
    </div>

  </body>

</html>

A css-playground/grid-layout/grid-layout4.html => css-playground/grid-layout/grid-layout4.html +105 -0
@@ 0,0 1,105 @@
<!doctype html>

<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>Grid and Flex: task 4</title>

    <style>

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

      .card {
        display: grid;
        grid-template-rows: 200px min-content;
      }

      .card > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

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

      .tags > * {
        background-color: #999;
        color: #fff;
        padding: 0.2em 0.8em;
        border-radius: 0.2em;
        font-size: 80%;
        margin: 5px;
      }
      .container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
      }
      
      .tags {
        display: flex;
        flex-flow: row wrap;
        justify-content:center;
      }
    </style>

  </head>

  <body>

    <div class="container">
      <div class="card">
        <img src="balloons1.jpg" alt="a single red balloon">
        <ul class="tags">
          <li>balloon</li>
          <li>red</li>
          <li>sky</li>
          <li>blue</li>
          <li>Hot air balloon</li>
        </ul>
      </div>
      <div class="card">
        <img src="balloons2.jpg" alt="balloons over some houses">
        <ul class="tags">
          <li>balloons</li>
          <li>houses</li>
          <li>train</li>
          <li>harborside</li>
        </ul>
      </div>
      <div class="card">
        <img src="balloons3.jpg" alt="close-up of balloons inflating">
        <ul class="tags">
          <li>balloons</li>
          <li>inflating</li>
          <li>green</li>
          <li>blue</li>
        </ul>
      </div>
      <div class="card">
        <img src="balloons4.jpg" alt="a balloon in the sun">
        <ul class="tags">
          <li>balloon</li>
          <li>sun</li>
          <li>sky</li>
          <li>summer</li>
          <li>bright</li>
        </ul>
      </div>
    </div>

  </body>

</html>

A html-playground/letter-markup => html-playground/letter-markup +1 -0
@@ 0,0 1,1 @@
Subproject commit fbaf714f16a61097f743b196768e5a0b9e593215

A html-playground/responsive-images => html-playground/responsive-images +1 -0
@@ 0,0 1,1 @@
Subproject commit e638e3d2ee90d3ed123d4331ebcc9763cc6512ba

A html-playground/tables-nasa => html-playground/tables-nasa +1 -0
@@ 0,0 1,1 @@
Subproject commit 17b622b6b3c6f741f7b2014fdb143b3a369ecc74

A html-playground/website-structure => html-playground/website-structure +1 -0
@@ 0,0 1,1 @@
Subproject commit 487d71c8a25fad081a706647f8c395e5d0d3e670