First commit

2025-09-10 14:42:57 -04:00
commit 1d12903e4e
65 changed files with 3587 additions and 0 deletions
--- a/6/Screenshots/Fluid
+++ b/6/Screenshots/Fluid
--- a/6/Screenshots/Fluid
+++ b/6/Screenshots/Fluid
--- a/6/Screenshots/Fluid
+++ b/6/Screenshots/Fluid
--- a/6/Screenshots/Holy
+++ b/6/Screenshots/Holy
--- a/6/fluid-columns.css
+++ b/6/fluid-columns.css
@@ -0,0 +1,72 @@
+.wrapper {
+  display: grid;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+  gap: 20px;
+}
+
+.wrapper > * {
+  background-color: #ffec99;
+  border-radius: 5px;
+  border: 1px solid red;
+  padding: 10px;
+}
+
+.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer";
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
--- a/6/fluid-columns.html
+++ b/6/fluid-columns.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fluid Columns</title>
+    <link rel="stylesheet" href="fluid-columns.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Main article area</h1>
+            <p>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi deserunt placeat molestiae vitae
+                voluptates modi distinctio repudiandae, expedita suscipit tenetur nesciunt magnam autem maxime ea libero
+                totam soluta ipsa fuga.
+            </p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+</body>
+
+</html>
--- a/6/holy-grail.css
+++ b/6/holy-grail.css
@@ -0,0 +1,34 @@
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
+}
+
+header,
+footer {
+  background-color: sandybrown;
+}
+
+.middler {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+aside {
+  flex-basis: 150px;
+  background-color: cornsilk;
+}
+
+main {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+main,
+aside,
+header,
+footer {
+  padding: 10px;
+}
--- a/6/holy-grail.html
+++ b/6/holy-grail.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Holy Grail</title>
+    <link rel="stylesheet" href="holy-grail.css" />
+</head>
+
+<body>
+    <header>
+        <h1>header</h1>
+    </header>
+
+    <div class="middler">
+        <aside class="lefter">
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sed, ad voluptas itaque quasi
+                voluptatum ea iure doloremque reprehenderit et illo dolores cum magni odio consequatur id ab ipsa
+                provident!</p>
+        </aside>
+        <main>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sed, ad voluptas itaque quasi
+                voluptatum ea iure doloremque reprehenderit et illo dolores cum magni odio consequatur id ab ipsa
+                provident!</p>
+
+        </main>
+        <aside class="righter">
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sed, ad voluptas itaque quasi
+                voluptatum ea iure doloremque reprehenderit et illo dolores cum magni odio consequatur id ab ipsa
+                provident!</p>
+
+        </aside>
+    </div>
+
+    <footer>
+        <h2>footer</h2>
+    </footer>
+
+</body>
+
+</html>