diff --git a/css-showcase-midterm.html b/css-showcase-midterm.html
new file mode 100644
index 0000000..c38368e
--- /dev/null
+++ b/css-showcase-midterm.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I Think
+
+ Is Awesome!
+
+ Jamison Cote
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-showcase-midterm.css b/css/css-showcase-midterm.css
new file mode 100644
index 0000000..04f9c31
--- /dev/null
+++ b/css/css-showcase-midterm.css
@@ -0,0 +1,767 @@
+/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+ html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+ }
+
+ /*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Vendor-prefixed and regular ::selection selectors cannot be combined:
+ * https://stackoverflow.com/a/16982510/7133471
+ *
+ * Customize the background color to match your design.
+ */
+
+ ::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ ::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ /*
+ * A better looking default horizontal rule
+ */
+
+ hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+ }
+
+ /* loader animation */
+ $color: #fd7000;
+$size: 12px;
+$time: 1;
+
+main {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #090707;
+}
+
+.dank-ass-loader {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .row {
+ display: flex;
+ }
+}
+
+.arrow {
+ width: 0;
+ height: 0;
+ margin: 0 (-$size / 2);
+ border-left: $size solid transparent;
+ border-right: $size solid transparent;
+ border-bottom: ($size * 1.8) solid $color;
+ animation: blink $time + s infinite;
+ filter: drop-shadow(0 0 ($size * 1.5) $color);
+
+ &.down {
+ transform: rotate(180deg);
+ }
+
+ @for $i from 1 through 18 {
+ &.outer-#{$i} {
+ animation-delay: -($time / 18) * $i + s;
+ }
+ }
+
+ @for $i from 1 through 6 {
+ &.inner-#{$i} {
+ animation-delay: -($time / 6) * $i + s;
+ }
+ }
+}
+
+@keyframes blink {
+ 0% { opacity: 0.1; }
+ 30% { opacity: 1; }
+ 100% { opacity: 0.1; }
+}
+
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+ audio,
+ canvas,
+ iframe,
+ img,
+ svg,
+ video {
+ vertical-align: middle;
+ }
+
+ /*
+ * Remove default fieldset styles.
+ */
+
+ fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ /*
+ * Allow only vertical resizing of textareas.
+ */
+
+ textarea {
+ resize: vertical;
+ }
+
+ /* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+
+ .browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+ }
+
+ /* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+ * {
+ box-sizing: border-box;
+ }
+ /*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+ }
+
+ /*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Vendor-prefixed and regular ::selection selectors cannot be combined:
+ * https://stackoverflow.com/a/16982510/7133471
+ *
+ * Customize the background color to match your design.
+ */
+
+ ::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ ::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ /*
+ * A better looking default horizontal rule
+ */
+
+ hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+ }
+
+ /*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+ audio,
+ canvas,
+ iframe,
+ img,
+ svg,
+ video {
+ vertical-align: middle;
+ }
+
+ /*
+ * Remove default fieldset styles.
+ */
+
+ fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ /*
+ * Allow only vertical resizing of textareas.
+ */
+
+ textarea {
+ resize: vertical;
+ }
+
+ /* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+
+ .browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+ }
+
+ /* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+ * {
+ box-sizing: border-box;
+ }
+ /* text animation */
+ @import url('https://fonts.googleapis.com/css?family=Roboto:700');
+
+body {
+ margin:0px;
+ font-family:'Roboto';
+ text-align:center;
+ background-color: black;
+}
+
+#container {
+ color:#999;
+ text-transform: uppercase;
+ font-size:36px;
+ font-weight:bold;
+ padding-top:200px;
+ position: absolute;
+ width:100%;
+ bottom:45%;
+ display:block;
+}
+
+#flip {
+ height:50px;
+ overflow:hidden;
+}
+
+#flip > div > div {
+ color:#fff;
+ padding:4px 12px;
+ height:45px;
+ margin-bottom:45px;
+ display:inline-block;
+}
+
+#flip div:first-child {
+ animation: show 5s linear infinite;
+}
+
+#flip div div {
+ background:#000099;
+}
+#flip div:first-child div {
+ background:#42c58a;
+}
+#flip div:last-child div {
+ background:#DC143C;
+}
+
+@keyframes show {
+ 0% {margin-top:-270px;}
+ 5% {margin-top:-180px;}
+ 33% {margin-top:-180px;}
+ 38% {margin-top:-90px;}
+ 66% {margin-top:-90px;}
+ 71% {margin-top:0px;}
+ 99.99% {margin-top:0px;}
+ 100% {margin-top:-270px;}
+}
+
+p {
+ position:fixed;
+ width:100%;
+ bottom:30px;
+ font-size:12px;
+ color:#999;
+ margin-top:200px;
+}
+/* neon text animation */
+body {
+ background: #000000;
+ margin: 0;
+ padding: 0;
+}
+.txt {
+ color: #ffffff;
+ background:#000000;
+ font-size:100px;
+ font-weight: bold;
+ font-family: Arial;
+ text-transform: uppercase;
+}
+.txt::before {
+ content: 'Jamison Cote';
+ position: absolute;
+ mix-blend-mode: difference;
+ filter: blur(3px);
+ font-size: 100px;
+}
+.neon-wrapper {
+ position: absolute;
+ top: 80%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display:inline-flex;
+ filter: brightness(300%);
+ overflow: hidden;
+}
+.gradient{
+ background: linear-gradient(114.5793141156962deg, #ff33cc 4.927083333333334%,#66ff33 97.84374999999999%);
+ position: absolute;
+ top: 0;
+ left:0;
+ width: 100%;
+ height:100%;
+ mix-blend-mode: multiply;
+}
+.dodge {
+ background: radial-gradient(circle,white,black 35%) center / 25% 25%;
+ position: absolute;
+ top:-100%;
+ left:-100%;
+ right:0;
+ bottom:0;
+ mix-blend-mode: color-dodge;
+ animation: dodge-area 3s linear infinite;
+}
+@keyframes dodge-area {
+ to {
+ transform: translate(50%,50%);
+ }
+}
+/* flame animation */
+.red {
+ width: 80px;
+ height: 80px;
+ background: orangered;
+ box-shadow: 0px 0px 10px 5px orangered;
+}
+.orange {
+ left:10px;
+ width: 60px;
+ height: 60px;
+ background: orange;
+ box-shadow: 0px 0px 12px 6px orange;
+}
+.gold {
+ left:18px;
+ width: 45px;
+ height: 45px;
+ background: gold;
+ box-shadow: 0px 0px 9px 4px gold;
+}
+.white {
+ left:22px;
+ width: 35px;
+ height: 35px;
+ background: lightyellow;
+ box-shadow: 0px 0px 9px 4px lightyellow;
+}
+.blue {
+ left:32px;
+ width: 15px;
+ height: 15px;
+ background: darkblue;
+ box-shadow: 0px 0px 15px 10px darkblue;
+}
+.black {
+ left:20px;
+ width: 40px;
+ height: 40px;
+ bottom:-50px;
+ background: black;
+ box-shadow: 0px 0px 15px 10px black;
+}
+.base {
+ border-radius: 50%;
+ position: absolute;
+}
+.flame-wrapper {
+ position: absolute;
+ animation: flicker 3ms ease-in infinite;
+ top: 110%;
+ left: 50%;
+}
+.flame {
+ bottom: 0;
+ position: absolute;
+ border-radius: 50% 0% 50% 50%;
+ transform: rotate(-45deg);
+}
+@keyframes flicker {
+ 0% {transform: rotate(-1deg);}
+ 20% {transform: rotate(2deg) scaleY(1.05);}
+ 40% {transform: rotate(-1deg);}
+ 60% {transform: rotate(1deg);}
+ 80% {transform: rotate(-1deg) scaleY(0.90);}
+ 100% {transform: rotate(1deg);}
+}
+
+
+ /*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+ .sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ /* 1 */
+ }
+
+ /*
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+ .sr-only.focusable:active,
+ .sr-only.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+ }
+
+ /*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+ .invisible {
+ visibility: hidden;
+ }
+
+ /*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+ .clearfix:before,
+ .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+ }
+
+ .clearfix:after {
+ clear: both;
+ }
+
+ /* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+ @media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+ }
+
+ @media print,
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 1.25dppx),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+ }
+
+ /* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ https://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+ @media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+ pre {
+ white-space: pre-wrap !important;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ /*
+ * Printing Tables:
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+ thead {
+ display: table-header-group;
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ }
+ /* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+ /*
+ * Hide visually and from screen readers
+ */
+
+ .hidden {
+ display: none !important;
+ }
+
+ /*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+ .sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ /* 1 */
+ }
+
+ /*
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+ .sr-only.focusable:active,
+ .sr-only.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+ }
+
+ /*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+ .invisible {
+ visibility: hidden;
+ }
+
+ /*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+ .clearfix:before,
+ .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+ }
+
+ .clearfix:after {
+ clear: both;
+ }
+
+ /* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+ @media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+ }
+
+ @media print,
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 1.25dppx),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+ }
+
+ /* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ https://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+ @media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+ pre {
+ white-space: pre-wrap !important;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ /*
+ * Printing Tables:
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+ thead {
+ display: table-header-group;
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ }
\ No newline at end of file
diff --git a/css/holy-grail.css b/css/holy-grail.css
new file mode 100644
index 0000000..51385da
--- /dev/null
+++ b/css/holy-grail.css
@@ -0,0 +1,336 @@
+/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+ html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+ }
+
+ /*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Vendor-prefixed and regular ::selection selectors cannot be combined:
+ * https://stackoverflow.com/a/16982510/7133471
+ *
+ * Customize the background color to match your design.
+ */
+
+ ::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ ::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ /*
+ * A better looking default horizontal rule
+ */
+
+ hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+ }
+
+ /*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+ audio,
+ canvas,
+ iframe,
+ img,
+ svg,
+ video {
+ vertical-align: middle;
+ }
+
+ /*
+ * Remove default fieldset styles.
+ */
+
+ fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ /*
+ * Allow only vertical resizing of textareas.
+ */
+
+ textarea {
+ resize: vertical;
+ }
+
+ /* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+
+ .browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+ }
+
+ /* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+ * {
+ box-sizing: border-box;
+ }
+ .grid {
+ display: grid;
+
+ grid-template-areas:
+ "header header header"
+ "nav content side"
+ "footer footer footer";
+
+ grid-template-columns: 200px 1fr 200px;
+ grid-template-rows: auto 1fr auto;
+ grid-gap: 10px;
+
+ height: 100vh;
+ }
+ header {
+ grid-area: header;
+ background-color: black;
+ }
+
+ nav {
+ grid-area: nav;
+ margin-left: 0.5rem;
+ background-color: darkblue;
+ }
+
+ main {
+ grid-area: content;
+ background-color: white;
+ }
+
+ aside {
+ grid-area: side;
+ margin-right: 0.5rem;
+ background-color: darkblue;
+ }
+
+ footer {
+ grid-area: footer;
+ background-color: black;
+ }
+ @media (max-width: 768px) {
+ .grid {
+ grid-template-areas:
+ "header"
+ "nav"
+ "content"
+ "side"
+ "footer";
+
+ grid-template-columns: 1fr;
+ grid-template-rows:
+ auto /* Header */
+ minmax(75px, auto) /* Nav */
+ 1fr /* Content */
+ minmax(75px, auto) /* Sidebar */
+ auto; /* Footer */
+ }
+
+ nav, aside {
+ margin: 0;
+ }
+ }
+ header {
+ grid-area: header;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ /* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+ /*
+ * Hide visually and from screen readers
+ */
+
+ .hidden {
+ display: none !important;
+ }
+
+ /*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+ .sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ /* 1 */
+ }
+
+ /*
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+ .sr-only.focusable:active,
+ .sr-only.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+ }
+
+ /*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+ .invisible {
+ visibility: hidden;
+ }
+
+ /*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+ .clearfix:before,
+ .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+ }
+
+ .clearfix:after {
+ clear: both;
+ }
+
+ /* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+ @media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+ }
+
+ @media print,
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 1.25dppx),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+ }
+
+ /* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ https://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+ @media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+ pre {
+ white-space: pre-wrap !important;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ /*
+ * Printing Tables:
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+ thead {
+ display: table-header-group;
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ }
\ No newline at end of file
diff --git a/css/mobile-first.css b/css/mobile-first.css
index 8e877ec..e6b601f 100644
--- a/css/mobile-first.css
+++ b/css/mobile-first.css
@@ -186,8 +186,8 @@
width: 20%;
border-top: 2px solid white;
}
- i.fab .fas {
- font-size: 200%;
+ .icons i {
+ font-size: 300%;
color: grey;
}
ul {
@@ -200,6 +200,7 @@
}
.icons {
width: 60%;
+ margin: auto;
}
#bottom {
display: flex;
@@ -210,11 +211,6 @@
position: center;
flex-direction: column;
}
- #b-icons {
- display: flex;
- justify-content: space-around;
- align-items: center;
- }
#section1 {
margin: 50px;
}
@@ -252,9 +248,15 @@
nav {
visibility: hidden;
}
- footer > p {
+ footer p {
color: white;
}
+ footer i {
+ font-size: 150%;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ }
/*Desktop*/
@media (min-width: 768px) {
nav {
diff --git a/holy-grail.html b/holy-grail.html
new file mode 100644
index 0000000..4f54e56
--- /dev/null
+++ b/holy-grail.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main Content
+
+
+
+
+
+