add hamburger menu and change buttons color

3 files changed, 28 insertions, 5 deletions

diff --git a/assets/css/base.css b/assets/css/base.css
index 9656a3a..b651c48 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -34,10 +34,12 @@ h4 {
 
 header {
     background-color: var(--accent);
-    border-bottom: 5px solid var(--pink);
+    border-bottom: 5px solid var(--purple);
+    display: flex;
     font-size: var(--p);
     padding: 1.15rem 1.75rem;
     position: fixed;
+    justify-content: space-between;
     top: 0;
     width: 100%;
     z-index: 999;
diff --git a/assets/css/common.css b/assets/css/common.css
index d7b33b9..e6ae59e 100644
--- a/assets/css/common.css
+++ b/assets/css/common.css
@@ -7,8 +7,8 @@
 }
 
 .btn {
-    background-color: var(--green);
-    border: 1px solid var(--green);
+    background-color: var(--pink);
+    border: 1px solid var(--pink);
     border-radius: 15px;
     color: var(--foreground);
     font-size: var(--p);
@@ -21,5 +21,5 @@
 .btn:hover,
 .btn:active {
     background-color: var(--background);
-    color: var(--green);
+    color: var(--pink);
 }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 0bd68dc..d3e2551 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,3 +1,25 @@
+/* MENU */
+.menu__items {
+    background-color: var(--accent);
+    border-bottom: 5px solid var(--purple);
+    flex-direction: column;
+    height: 70vh;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 100%;
+    width: 100vw;
+}
+
+.menu__items__item {
+    display: block;
+    padding: 0.75rem 1.45rem;
+}
+
+.menu__toggle[open=""] {
+    color: var(--pink);
+}
+
 /* HERO */
 .hero {
     align-items: center;
@@ -24,7 +46,6 @@
 
 .cta {
     display: block;
-    line-height: 1.2;
     text-align: center;
 }