From fc62f5ae0c52e94499ef52c76da601adf1b97dac Mon Sep 17 00:00:00 2001
From: Maria Raykova
Date: Fri, 21 Feb 2020 18:35:33 -0500
Subject: [PATCH] created Holy Grail layout
---
css/wk5.css | 328 ++++++++++++++++++++++++++++++++++++++++++++
index.html | 1 +
wk5_holy-grail.html | 60 ++++++++
3 files changed, 389 insertions(+)
create mode 100644 css/wk5.css
create mode 100644 wk5_holy-grail.html
diff --git a/css/wk5.css b/css/wk5.css
new file mode 100644
index 0000000..0055764
--- /dev/null
+++ b/css/wk5.css
@@ -0,0 +1,328 @@
+/*! 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
+ ========================================================================== */
+
+ .grid {
+ min-height:100vh;
+ display: grid;
+ grid-template-rows: auto auto 1fr auto auto;
+ }
+
+ .grid > * {
+ border: 2px solid black;
+ text-align: center;
+ }
+
+ header {
+ background-color: pink;
+ }
+
+ nav {
+ background-color: yellow;
+ }
+
+ main {
+ background-color: cyan;
+ }
+
+ #ad {
+ background-color: magenta;
+ }
+
+ footer {
+ background-color: chartreuse;
+ }
+
+ @media (min-width:700px) {
+ .grid {
+ grid-template-columns: 200px 1fr 200px;
+ grid-template-rows: auto 1fr auto;
+ grid-gap: 5px;
+ }
+ header {
+ grid-column: 1/4;
+ grid-row:1/2;
+ }
+ nav {
+ grid-column:1/2;
+ grid-row:2/3;
+ }
+ main {
+ grid-column:2/3;
+ grid-row:2/3;
+ }
+ #ad {
+ grid-column: 3/4;
+ grid-row:2/3;
+ }
+ footer {
+ grid-column:1/4;
+ grid-row:3/4;
+ }
+ }
+
+
+
+
+ /* ==========================================================================
+ 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/index.html b/index.html
index bc300a4..c8f13ff 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
Wk 2: About Me
Wk 3: AXIT Layout
Wk 4: Flexbox Practice
+ Wk 5: CSS Grid "Holy Grail"
+
+
+
+
+
+
+ MENU
+
+
+ MAIN SITE CONTENT
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, suscipit, asperiores modi placeat eveniet ex, tenetur minima qui omnis enim corporis? Doloribus suscipit magni tempora magnam fugiat repellendus porro animi.
+
+
+
ADS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wk5_holy-grail.html b/wk5_holy-grail.html
new file mode 100644
index 0000000..05cf850
--- /dev/null
+++ b/wk5_holy-grail.html
@@ -0,0 +1,60 @@
+
+
+
+