Submit assignment

css/grid.css

@@ -0,0 +1,396 @@
+/*
+  Gridifier || Code released under the UNLICENSE
+  http://gridifier.web-dev.tools/#xs,4,0,0,0;s,4,25,0,0;m,4,38,1,1;l,4,60,1,1
+*/
+
+.grid {
+  margin: 0;
+  padding: 0;
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
+  display: -webkit-flex;
+  -webkit-flex-flow: row wrap;
+  display: -ms-flexbox;
+  -ms-flex-flow: row wrap;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.grid-bottom {
+  -webkit-align-items: flex-end;
+  -ms-align-items: flex-end;
+  align-items: flex-end;
+}
+
+.grid-middle {
+  -webkit-align-items: center;
+  -ms-align-items: center;
+  align-items: center;
+}
+
+.grid-stretch {
+  -webkit-align-items: stretch;
+  -ms-align-items: stretch;
+  align-items: stretch;
+}
+
+.opera-only :-o-prefocus, .grid {
+  word-spacing: -0.43em;
+}
+
+.unit {
+  letter-spacing: normal;
+  text-rendering: auto;
+  vertical-align: top;
+  word-spacing: normal;
+  display: inline-block;
+  visibility: visible;
+}
+
+.grid-bottom .unit {
+  vertical-align: bottom;
+}
+
+.grid-middle .unit {
+  vertical-align: middle;
+}
+
+[class*="unit-push-"],
+[class*="unit-pull-"] {
+  position: relative;
+}
+
+.unit-xs-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.unit-xs-centered {
+  margin: 0 auto;
+}
+
+.unit-xs-1, .xs-1 {
+  display: block;
+  visibility: visible;
+  width: 100%;
+}
+
+.unit-xs-1-2, .xs-1-2 {
+  width: 50.0000%;
+}
+
+.unit-xs-1-3, .xs-1-3 {
+  width: 33.3333%;
+}
+
+.unit-xs-2-3, .xs-2-3 {
+  width: 66.6667%;
+}
+
+.unit-xs-1-4, .xs-1-4 {
+  width: 25.0000%;
+}
+
+.unit-xs-3-4, .xs-3-4 {
+  width: 75.0000%;
+}
+
+.unit-xs-1-2,.xs-1-2,.unit-xs-1-3,.xs-1-3,.unit-xs-2-3,.xs-2-3,.unit-xs-1-4,.xs-1-4,.unit-xs-3-4,.xs-3-4 {
+  display: inline-block;
+  visibility: visible;
+}
+
+@media only screen and (min-width: 25em) {
+
+.unit-s-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.unit-s-centered {
+  margin: 0 auto;
+}
+
+.unit-s-1, .s-1 {
+  display: block;
+  visibility: visible;
+  width: 100%;
+}
+
+.unit-s-1-2, .s-1-2 {
+  width: 50.0000%;
+}
+
+.unit-s-1-3, .s-1-3 {
+  width: 33.3333%;
+}
+
+.unit-s-2-3, .s-2-3 {
+  width: 66.6667%;
+}
+
+.unit-s-1-4, .s-1-4 {
+  width: 25.0000%;
+}
+
+.unit-s-3-4, .s-3-4 {
+  width: 75.0000%;
+}
+
+.unit-s-1-2,.s-1-2,.unit-s-1-3,.s-1-3,.unit-s-2-3,.s-2-3,.unit-s-1-4,.s-1-4,.unit-s-3-4,.s-3-4 {
+  display: inline-block;
+  visibility: visible;
+}
+
+}
+
+@media only screen and (min-width: 38em) {
+
+.unit-m-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.unit-m-centered {
+  margin: 0 auto;
+}
+
+.unit-m-1, .m-1 {
+  display: block;
+  visibility: visible;
+  width: 100%;
+}
+
+.unit-offset-m-0 {
+  margin-left: 0;
+}
+
+.unit-push-m-0,
+.unit-pull-m-0 {
+  left: 0;
+}
+
+.unit-m-1-2, .m-1-2 {
+  width: 50.0000%;
+}
+
+.unit-offset-m-1-2 {
+  margin-left: 50.0000%;
+}
+
+.unit-push-m-1-2 {
+  left: 50.0000%;
+}
+
+.unit-pull-m-1-2 {
+  left: -50.0000%;
+}
+
+.unit-m-1-3, .m-1-3 {
+  width: 33.3333%;
+}
+
+.unit-offset-m-1-3 {
+  margin-left: 33.3333%;
+}
+
+.unit-push-m-1-3 {
+  left: 33.3333%;
+}
+
+.unit-pull-m-1-3 {
+  left: -33.3333%;
+}
+
+.unit-m-2-3, .m-2-3 {
+  width: 66.6667%;
+}
+
+.unit-offset-m-2-3 {
+  margin-left: 66.6667%;
+}
+
+.unit-push-m-2-3 {
+  left: 66.6667%;
+}
+
+.unit-pull-m-2-3 {
+  left: -66.6667%;
+}
+
+.unit-m-1-4, .m-1-4 {
+  width: 25.0000%;
+}
+
+.unit-offset-m-1-4 {
+  margin-left: 25.0000%;
+}
+
+.unit-push-m-1-4 {
+  left: 25.0000%;
+}
+
+.unit-pull-m-1-4 {
+  left: -25.0000%;
+}
+
+.unit-m-3-4, .m-3-4 {
+  width: 75.0000%;
+}
+
+.unit-offset-m-3-4 {
+  margin-left: 75.0000%;
+}
+
+.unit-push-m-3-4 {
+  left: 75.0000%;
+}
+
+.unit-pull-m-3-4 {
+  left: -75.0000%;
+}
+
+.unit-m-1-2,.m-1-2,.unit-m-1-3,.m-1-3,.unit-m-2-3,.m-2-3,.unit-m-1-4,.m-1-4,.unit-m-3-4,.m-3-4 {
+  display: inline-block;
+  visibility: visible;
+}
+
+}
+
+@media only screen and (min-width: 60em) {
+
+.unit-l-hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.unit-l-centered {
+  margin: 0 auto;
+}
+
+.unit-l-1, .l-1 {
+  display: block;
+  visibility: visible;
+  width: 100%;
+}
+
+.unit-offset-l-0 {
+  margin-left: 0;
+}
+
+.unit-push-l-0,
+.unit-pull-l-0 {
+  left: 0;
+}
+
+.unit-l-1-2, .l-1-2 {
+  width: 50.0000%;
+}
+
+.unit-offset-l-1-2 {
+  margin-left: 50.0000%;
+}
+
+.unit-push-l-1-2 {
+  left: 50.0000%;
+}
+
+.unit-pull-l-1-2 {
+  left: -50.0000%;
+}
+
+.unit-l-1-3, .l-1-3 {
+  width: 33.3333%;
+}
+
+.unit-offset-l-1-3 {
+  margin-left: 33.3333%;
+}
+
+.unit-push-l-1-3 {
+  left: 33.3333%;
+}
+
+.unit-pull-l-1-3 {
+  left: -33.3333%;
+}
+
+.unit-l-2-3, .l-2-3 {
+  width: 66.6667%;
+}
+
+.unit-offset-l-2-3 {
+  margin-left: 66.6667%;
+}
+
+.unit-push-l-2-3 {
+  left: 66.6667%;
+}
+
+.unit-pull-l-2-3 {
+  left: -66.6667%;
+}
+
+.unit-l-1-4, .l-1-4 {
+  width: 25.0000%;
+}
+
+.unit-offset-l-1-4 {
+  margin-left: 25.0000%;
+}
+
+.unit-push-l-1-4 {
+  left: 25.0000%;
+}
+
+.unit-pull-l-1-4 {
+  left: -25.0000%;
+}
+
+.unit-l-3-4, .l-3-4 {
+  width: 75.0000%;
+}
+
+.unit-offset-l-3-4 {
+  margin-left: 75.0000%;
+}
+
+.unit-push-l-3-4 {
+  left: 75.0000%;
+}
+
+.unit-pull-l-3-4 {
+  left: -75.0000%;
+}
+
+.unit-l-1-2,.l-1-2,.unit-l-1-3,.l-1-3,.unit-l-2-3,.l-2-3,.unit-l-1-4,.l-1-4,.unit-l-3-4,.l-3-4 {
+  display: inline-block;
+  visibility: visible;
+}
+
+}
+
+.unit-content-distribute {
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.content-fill {
+  -ms-flex-grow: 2;
+  -webkit-flex-grow: 2;
+  flex-grow: 2;
+  max-width: 100%; /* @bugfix: IE 10, 11 */
+}
+
+.content-shrink {
+  -ms-align-self: center;
+  -webkit-align-self: center;
+  align-self: center;
+}