From 8238af286ca226baa47f144a02391e57b5f9407b Mon Sep 17 00:00:00 2001
From: Mahnoor Afteb <mahnoor.afteb@uconn.edu>
Date: Sun, 23 Feb 2020 11:57:07 -0500
Subject: [PATCH] Add files via upload

---
 css/holy-grail.css    | 71 +++++++++++++++++++++++++++++++++++++++++++
 css/practice-grid.css | 42 +++++++++++++++++++++++++
 css/practicegrail.css | 40 ++++++++++++++++++++++++
 index.html            | 22 ++++++++++++++
 4 files changed, 175 insertions(+)
 create mode 100644 css/holy-grail.css
 create mode 100644 css/practice-grid.css
 create mode 100644 css/practicegrail.css
 create mode 100644 index.html

diff --git a/css/holy-grail.css b/css/holy-grail.css
new file mode 100644
index 0000000..2924b25
--- /dev/null
+++ b/css/holy-grail.css
@@ -0,0 +1,71 @@
+html{
+    background-color: black;
+}
+.container {
+    display: grid;
+    grid-template-areas:
+      "header header header"
+      "nav content side"
+      "footer footer footer";
+    grid-template-columns: 200px 1fr 200px;
+    grid-template-rows: 110px 1fr 110px;
+    grid-gap: 10px;
+    height: 100vh;
+    text-transform: uppercase;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bolder;
+    font-size: 45px;
+  }
+
+  header {
+    grid-area: header;
+    background-color: #83caff;
+  }
+  
+  nav {
+    grid-area: nav;
+    margin-left: 0.5rem;
+    background-color: #cc99cc;
+  }
+  
+  main {
+    grid-area: content;
+    background-color: #ffcccc;
+  }
+  
+  aside {
+    grid-area: side;
+    margin-right: 0.5rem;
+    background-color: #cc99cc;
+  }
+  
+  footer {
+    grid-area: footer;
+    background-color: #83caff;
+  }
+
+
+  @media (max-width: 769px) {
+    .container {
+      font-size: 30px;
+      grid-template-areas:
+        "header"
+        "nav"
+        "content"
+        "side"
+        "footer";
+  
+      grid-template-columns: 1fr;
+      grid-template-rows:
+        110px /* Header */
+        75px /* Menu */
+        1fr /* Content */
+        75px /* Sidebar */
+        100px; /* Footer */
+    }
+  
+    nav, aside {
+      margin: 0;
+    }
+  }
\ No newline at end of file
diff --git a/css/practice-grid.css b/css/practice-grid.css
new file mode 100644
index 0000000..510148d
--- /dev/null
+++ b/css/practice-grid.css
@@ -0,0 +1,42 @@
+header, nav, main, footer{
+    border: 1px solid lightblue;
+}
+
+
+
+
+
+@media (min-width: 400px){
+    .grid{
+        display: grid;
+        grid-template-columns: 20% 20% 20% 20% 20%;
+        grid-column-gap: 1px;
+        text-align: center;
+       
+    }
+    header{
+        /*grid-column: 1/6; (same thing than below but shorter code*/
+        grid-column-start: 1;
+        grid-column-end: 6;
+    }
+    nav{
+         /*grid-column: 1/3; (same thing than below but shorter code*/
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+    main{
+         /*grid-column: 3/6; (same thing than below but shorter code*/
+        grid-column-start: auto;
+        grid-column-end: auto;
+    }
+    .ads{
+        grid-column-start: 4;
+        grid-column-end: 6;
+        
+    }
+    footer{
+         /*grid-column: 1/6; (same thing than below but shorter code*/
+        grid-column-start: 1;
+        grid-column-end: 6;
+    }
+}
\ No newline at end of file
diff --git a/css/practicegrail.css b/css/practicegrail.css
new file mode 100644
index 0000000..e57c3b4
--- /dev/null
+++ b/css/practicegrail.css
@@ -0,0 +1,40 @@
+.letter{
+  background-color: lightcoral;
+  font-size: 70px;
+  color: black;
+  font-family: 'hobeaux-rococeaux-background', Helvetica;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  padding: 20px;
+}
+.wrapper{
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr ;
+  grid-column-gap: 1px;
+  grid-row-gap: 1px;
+  
+
+}
+
+
+@media screen and (min-width: 400px) {
+  .wrapper {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr ;
+
+    }
+}
+@media screen and (min-width: 600px) {
+  .wrapper {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr ;
+
+    }
+}
+@media screen and (min-width: 800px) {
+  .wrapper {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f0ad49c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Holy Grail Layout</title>
+    <link href="css/holy-grail.css" type="text/css" rel="stylesheet"/>
+</head>
+<body>
+    <div class="container">
+        <header>Header</header>
+      
+        <nav>Menu</nav>
+      
+        <main>Content</main>
+      
+        <aside> Ads</aside>
+      
+        <footer> Footer</footer>
+      </div>
+</body>
+</html>
\ No newline at end of file