feat: styling complete

restaurant/src/components/carousel.js

@@ -57,20 +57,20 @@ class Items {
 
 let carouselItems = [
     {
-        "heading": "Specialty Baked Goods",
+        "heading": "Specialty Baked Goods and coffee",
         "desc": "Exclusively delicious baked goods, homemade and all that",
         "link": "Order Now!"
     },
-    {
-        "heading": "Subscribe and Save today!",
-        "desc": "We offer flexible subscription plans to meet your needs",
-        "link": "Get started"
-    },
-    {
-        "heading": "Explore our blog",
-        "desc": "This Wondrous Life teaches you how to dream, inspire, and embrace life",
-        "link": "Embrace this"
-    }
+    // {
+    //     "heading": "Subscribe and Save today!",
+    //     "desc": "We offer flexible subscription plans to meet your needs",
+    //     "link": "Get started"
+    // },
+    // {
+    //     "heading": "Explore our blog",
+    //     "desc": "This Wondrous Life teaches you how to dream, inspire, and embrace life",
+    //     "link": "Embrace this"
+    // }
 ]
 
 let items = carouselItems.map(e => new Items(e.heading, e.desc, e.link));

restaurant/src/components/navbar.js

@@ -1,8 +1,8 @@
 function menuBar() {
     const items = [
-        "home",
-        "menu",
-        "contact"
+        'HOME',
+        'MENU',
+        'CONTACT'
     ];
 
     const navbar = document.createElement('div');

restaurant/src/index.js

@@ -37,7 +37,7 @@ function loadPage(page='home') {
     let contact = contactComponent();
     let contentData;
 
-    switch(page){
+    switch(page.toLowerCase()){
         case 'menu':
             contentData = content(menu);
             break;
@@ -49,14 +49,12 @@ function loadPage(page='home') {
             break;
         
     }        
-    console.log(contentData);
     document.body.appendChild(contentData);
 }
 
 function content(data) {
     const old = document.querySelector('.content');
     if (old) {
-        console.log(old);
         old.textContent = '';
         document.body.removeChild(old);
     }

restaurant/src/style.css

@@ -1,27 +1,52 @@
 :root {
     --font-size: 18px;
     --light-color: #E8E8E8;
+    --dark-color: #495464;
+    --rgb-dark-color: 73, 84, 100;
+    --rgb-light-color: 232, 232, 232;
+}
+
+@font-face {
+    font-family: 'Merriweather Sans';
+    src: url('./assets/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.ttf') format('truetype');
+    src: url('./assets/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
 }
 
 
-body, html {
+body,
+html {
     margin: 0;
     padding: 0;
     font-size: var(--font-size);
     background: url('./background.jpg');
     background-size: cover;
+    font-family: 'Merriweather Sans';
+    color: rgb(var(--rgb-dark-color));
 }
 
 header {
     min-height: 71px;
+    background-color: rgb(var(--rgb-light-color), 0.7);
+    color: var(--dark-color);
 }
 
 header>h1 {
     margin: 0;
     padding: 0;
     margin-bottom: 5px;
+    font-weight: 800;
+    font-size: rem;
 }
 
+a {
+    text-decoration: none;
+    color: var(--light-color);
+}
+
+a:hover {
+    text-decoration: none;
+    font-weight: 800;
+}
 
 .container {
     display: flex;
@@ -44,7 +69,8 @@ header>h1 {
 
 .navbar li {
     list-style-type: none;
-    font-size: 1.3rem;
+    font-size: 1rem;
+    cursor: pointer;
 }
 
 .content {
@@ -54,19 +80,39 @@ header>h1 {
     margin-top: 150px;
 }
 
-/* .carousel-item { */
-/*     margin-top: 100px; */
-/*     display: flex; */
-/*     flex-direction: column; */
-/*     min-height: 80vh; */
-/*     width: 100%; */
-/* } */
+.carousel {
+    height: 80%;
+    gap: 20px;
+    padding: 100px;
+    background: rgb(var(--rgb-dark-color), 0.7);
+    border: 1px solid var(--dark-color);
+    color: var(--light-color);
+}
+
+.carousel-item>h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+}
+
+.carousel-item>p {
+    font-size: 0.9rem;
+    font-weight: 200;
+}
 
 .cards {
     display: flex;
     flex-direction: column;
     align-items: center;
+    height: 80%;
     gap: 20px;
+    padding: 100px;
+    background: rgb(var(--rgb-dark-color), 0.7);
+    border: 1px solid var(--dark-color);
+}
+
+.cards>.drinks-container>h2,
+.cards>.snacks-container>h2 {
+    color: var(--light-color);
 }
 
 .card {
@@ -86,6 +132,10 @@ header>h1 {
     margin: 0;
 }
 
+.card>p {
+    font-weight: 300;
+}
+
 .drinks-container {
     display: grid;
     grid-template-columns: repeat(3, 300px);
@@ -113,3 +163,12 @@ header>h1 {
 .carousel .slide-hidden {
     display: none;
 }
+
+.contact {
+    height: 80%;
+    gap: 20px;
+    padding: 100px;
+    background: rgb(var(--rgb-dark-color), 0.7);
+    border: 1px solid var(--dark-color);
+    color: var(--light-color);
+}

restaurant/webpack.config.js

@@ -29,7 +29,11 @@ module.exports = {
             {
                 test:  /\.(png|svg|jpg|jpeg|gif)$/i,
                 type: 'asset/resource',
-            }
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                type: 'asset/resource',
+            },
         ],
     },
 };