feat: layout

rcavero · Mar 3, 2024 · fbf403a · fbf403a
1 parent 3197d1a
commit fbf403a
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 0 deletions.
diff --git a/layout-01/index.html b/layout-01/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Layout Holy Grail</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="grid">
+        <header>
+            &lt;header&gt;
+        </header>
+        <nav>&lt;nav&gt;</nav>
+        <aside class="sidebar-left">&lt;aside&gt;</aside>
+        <main>&lt;main&gt;</main>
+        <aside class="sidebar-right">&lt;aside&gt;</aside>
+        <footer>&lt;footer&gt;</footer>
+    </div>
+</body>
+
+</html>
diff --git a/layout-01/index_short.html b/layout-01/index_short.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Layout Holy Grail</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- link font -->
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="grid">
+        <header>&lt;header&gt;</header>
+        <nav>&lt;nav&gt;</nav>
+        <aside class="sidebar-left">
+            &lt;aside&gt;
+        </aside>
+        <main>&lt;main&gt;</main>
+        <aside class="sidebar-right">
+            &lt;aside&gt;
+        </aside>
+        <footer>&lt;footer&gt;</footer>
+    </div>
+</body>
+
+</html>
diff --git a/layout-01/style-short.css b/layout-01/style-short.css
@@ -0,0 +1,54 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    font-family: 'Manrope', sans-serif;
+    font-size: 16px;
+}
+
+.grid {
+    display: grid;
+    grid-template-rows: 
+        80px 60px auto 80px;
+    grid-template-columns: 
+        20% auto 20%;
+    height: 100vh;
+}
+
+@media (max-width: 480px) {
+    .grid {
+        grid-template-rows:
+            80px 80px 80px 
+            auto 80px 80px;
+        grid-template-columns: 
+            1fr;
+    }
+
+    aside, main {
+        grid-column: 1 / 4;
+    }
+}
+
+nav, header, footer {
+    grid-column: 1 / 4;
+}
+
+header, footer {
+    background: #F6C356;
+}
+
+nav {
+    background: #AAEC8A;
+}
+
+aside {
+    background: #99C2FE;
+}
+
+main {
+    background: #B881FF;
+}
+
diff --git a/layout-01/style.css b/layout-01/style.css
@@ -0,0 +1,65 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    font-family: 'Manrope', sans-serif;
+    font-size: 16px;
+    height: 100%;
+}
+
+.grid {
+    display: grid;
+    grid-template-rows: 6rem 5rem auto 5rem;
+    grid-template-columns: 20% auto 20%;
+    font-size: 1.5rem;
+    height: 100%;
+}
+
+@media (max-width: 480px) {
+    .grid {
+        grid-template-rows:
+            6rem 6rem 6rem auto 6rem 6rem;
+        grid-template-columns: 1fr;
+    }
+
+    aside,
+    main {
+        grid-column: 1 / 4;
+    }
+}
+
+nav,
+header,
+footer {
+    background: #F6C356;
+    grid-column: 1 / 4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+nav {
+    background: #AAEC8A;
+}
+
+aside,
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+aside {
+    background: #99C2FE;
+}
+
+main {
+    background: #B881FF;
+}