diff --git a/restaurant/src/assets/.DS_Store b/restaurant/src/assets/.DS_Store new file mode 100644 index 0000000..e116f1a Binary files /dev/null and b/restaurant/src/assets/.DS_Store differ diff --git a/restaurant/src/assets/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.ttf b/restaurant/src/assets/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.ttf new file mode 100644 index 0000000..15089bf Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf b/restaurant/src/assets/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf new file mode 100644 index 0000000..dea514c Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/MerriweatherSans-VariableFont_wght.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Bold.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Bold.ttf new file mode 100644 index 0000000..ac9971a Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Bold.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-BoldItalic.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-BoldItalic.ttf new file mode 100644 index 0000000..f636401 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-BoldItalic.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-ExtraBold.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-ExtraBold.ttf new file mode 100644 index 0000000..f2f7cff Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-ExtraBold.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-ExtraBoldItalic.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-ExtraBoldItalic.ttf new file mode 100644 index 0000000..64d56e0 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-ExtraBoldItalic.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Italic.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Italic.ttf new file mode 100644 index 0000000..4af77b1 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Italic.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Light.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Light.ttf new file mode 100644 index 0000000..d9eb157 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Light.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-LightItalic.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-LightItalic.ttf new file mode 100644 index 0000000..fcce9c4 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-LightItalic.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Medium.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Medium.ttf new file mode 100644 index 0000000..4849947 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Medium.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-MediumItalic.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-MediumItalic.ttf new file mode 100644 index 0000000..fc77dcd Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-MediumItalic.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Regular.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Regular.ttf new file mode 100644 index 0000000..8e6c3ce Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-Regular.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-SemiBold.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-SemiBold.ttf new file mode 100644 index 0000000..d75e0c4 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-SemiBold.ttf differ diff --git a/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-SemiBoldItalic.ttf b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-SemiBoldItalic.ttf new file mode 100644 index 0000000..2a9de24 Binary files /dev/null and b/restaurant/src/assets/Merriweather_Sans/static/MerriweatherSans-SemiBoldItalic.ttf differ diff --git a/restaurant/src/components/carousel.js b/restaurant/src/components/carousel.js index 6fbf6e0..1c27361 100644 --- a/restaurant/src/components/carousel.js +++ b/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)); diff --git a/restaurant/src/components/navbar.js b/restaurant/src/components/navbar.js index aa44264..87bc368 100644 --- a/restaurant/src/components/navbar.js +++ b/restaurant/src/components/navbar.js @@ -1,8 +1,8 @@ function menuBar() { const items = [ - "home", - "menu", - "contact" + 'HOME', + 'MENU', + 'CONTACT' ]; const navbar = document.createElement('div'); diff --git a/restaurant/src/index.js b/restaurant/src/index.js index 8c77ad1..a26ebde 100644 --- a/restaurant/src/index.js +++ b/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); } diff --git a/restaurant/src/style.css b/restaurant/src/style.css index 792624b..966343f 100644 --- a/restaurant/src/style.css +++ b/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); +} diff --git a/restaurant/webpack.config.js b/restaurant/webpack.config.js index ad5bf2a..706b30e 100644 --- a/restaurant/webpack.config.js +++ b/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', + }, ], }, };