commit 3da5a448812e92ea424867dcd7084bfb40c27300 Author: Zed A. Shaw Date: Sun Sep 18 20:54:31 2022 -0400 Add the equal height holy grail code. diff --git a/17-equal-height-holy-grail-layout-in-modern-css/README.md b/17-equal-height-holy-grail-layout-in-modern-css/README.md new file mode 100644 index 0000000..198e7ea --- /dev/null +++ b/17-equal-height-holy-grail-layout-in-modern-css/README.md @@ -0,0 +1 @@ +These files come from the [Equal Height Holy Grail Layout in Modern CSS](https://learnjsthehardway.com/blog/17-equal-height-holy-grail-layout-in-modern-css/) blog post. The first layout described is in the file `basic.html`. The two-tone layout is in `twotone.html`. The quick simple mobile layout is in `mobile.html` and should probably the be actual one you use as the basis for your own study or design. diff --git a/17-equal-height-holy-grail-layout-in-modern-css/basic.html b/17-equal-height-holy-grail-layout-in-modern-css/basic.html new file mode 100644 index 0000000..41456e7 --- /dev/null +++ b/17-equal-height-holy-grail-layout-in-modern-css/basic.html @@ -0,0 +1,101 @@ + + + + + + + + + Holy Grail Starter + + + + + +
+

Header

+
+ +
+ + +

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+
+ + +

Right

+

Right

+

Right

+

Right

+
+
+
+ + + + diff --git a/17-equal-height-holy-grail-layout-in-modern-css/mobile.html b/17-equal-height-holy-grail-layout-in-modern-css/mobile.html new file mode 100644 index 0000000..eabfe8a --- /dev/null +++ b/17-equal-height-holy-grail-layout-in-modern-css/mobile.html @@ -0,0 +1,107 @@ + + + + + + + + + Holy Grail Starter + + + + + +
+

Header

+
+ +
+ + +

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+
+ + +

Right

+

Right

+

Right

+

Right

+
+
+
+ + + + diff --git a/17-equal-height-holy-grail-layout-in-modern-css/twotone.html b/17-equal-height-holy-grail-layout-in-modern-css/twotone.html new file mode 100644 index 0000000..e614522 --- /dev/null +++ b/17-equal-height-holy-grail-layout-in-modern-css/twotone.html @@ -0,0 +1,117 @@ + + + + + + + + + Holy Grail Starter + + + + + +
+

Header

+
+ +
+ + + +

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+

Left

+
+
+ + + +

Right

+

Right

+

Right

+

Right

+
+
+
+
+ + + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..856da03 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +A simple repository that holds the full code mentioned in blog posts on [learnjsthehardway.com](https://learnjsthehardway.com). The repository is only "semi-open" in that you can't check it out, but you can browse and grab files via the raw view.