initial HTML markup

1 files changed, 97 insertions, 0 deletions

diff --git a/grid.css b/grid.css
new file mode 100644
index 0000000..b59a482
--- /dev/null
+++ b/grid.css
@@ -0,0 +1,97 @@
+:root {
+    --background:           #555ED5;
+    --secondary-background: #102027;
+    --text:                 #FFF;
+    --h1:                   #FFF;
+    --h2:                   #d5dce2;
+    --h3:                   #bbc6ce;
+    --h4:                   #a2afb9;
+    --h5:                   #8a99a3;
+    --h6:                   #73828c;
+    --header-bg:            #555ED5;
+}
+
+h1, h2, h3, h4, h5, h6, div, button {
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    color: var(--h1);
+}
+
+html {
+    font-family: "liberation serif", "times new roman", calibri, carlito, serif;
+    color: var(--text);
+}
+
+body {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr 1fr;
+  gap: 0px 0px;
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+  /* Fix height */
+  height: 100vh;
+  /* grid-template-rows: auto 1fr auto; */
+}
+
+.header {
+  display: grid;
+  grid-template-columns: 0.3fr auto;
+  grid-template-rows: auto auto;
+  gap: 0px 0px;
+  grid-template-areas:
+  "navbar-burger logo-name"
+  "navbar-menu navbar-menu";
+  grid-area: header;
+
+  background: var(--header-bg);
+}
+
+.navbar-menu {
+    grid-area: navbar-menu;
+}
+
+.navbar-menu > ul > li {
+    list-style: none;
+}
+
+
+label[for="navbar-toggle-cbox"] {
+    cursor: pointer;
+}
+
+.navbar-burger {
+    grid-area: navbar-burger;
+    margin: auto;
+
+    display: grid;
+    grid-row-gap: .25rem;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+}
+
+.navbar-burger span {
+    background-color: var(--text);
+    display: block;
+    height: 2px;
+    transform-origin: center;
+    transition-duration: 86ms;
+    transition-property: background-color,opacity,transform;
+    transition-timing-function: ease-out;
+    width: 16px;
+}
+
+.logo-name {
+    grid-area: logo-name;
+    justify-self: center;
+    align-self: center;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.main { grid-area: main; }
+.footer { grid-area: footer; }