From fbf403a4f78ae74f047eb022284fcde0fbc1b7f6 Mon Sep 17 00:00:00 2001 From: David Mraz Date: Sun, 3 Mar 2024 12:32:20 +0100 Subject: [PATCH] feat: layout --- layout-01/index.html | 27 ++++++++++++++++ layout-01/index_short.html | 27 ++++++++++++++++ layout-01/style-short.css | 54 +++++++++++++++++++++++++++++++ layout-01/style.css | 65 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 173 insertions(+) create mode 100644 layout-01/index.html create mode 100644 layout-01/index_short.html create mode 100644 layout-01/style-short.css create mode 100644 layout-01/style.css diff --git a/layout-01/index.html b/layout-01/index.html new file mode 100644 index 00000000..4d6da8ce --- /dev/null +++ b/layout-01/index.html @@ -0,0 +1,27 @@ + + + + + + Layout Holy Grail + + + + + + + + +
+
+ <header> +
+ + +
<main>
+ +
<footer>
+
+ + + \ No newline at end of file diff --git a/layout-01/index_short.html b/layout-01/index_short.html new file mode 100644 index 00000000..3ae43f7c --- /dev/null +++ b/layout-01/index_short.html @@ -0,0 +1,27 @@ + + + + + + Layout Holy Grail + + + + + + +
+
<header>
+ + +
<main>
+ + +
+ + + \ No newline at end of file diff --git a/layout-01/style-short.css b/layout-01/style-short.css new file mode 100644 index 00000000..c78a7d94 --- /dev/null +++ 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 new file mode 100644 index 00000000..c1bfc8b1 --- /dev/null +++ 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; +} \ No newline at end of file