Basic website with html+css filled in, fixed typo in webpack dev config Sources => Server

src/main.js

@@ -1,9 +1,2 @@
 import "./style.css"
-
+const app = document.querySelector("#app");
-const app = document.querySelector("#app");
-
-let welcome = document.createElement("span");
-welcome.id = "welcome";
-welcome.textContent = "Welcome to the restaurant website";
-
-app.append(welcome);

src/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/style.css

@@ -1,5 +1,115 @@
-#welcome {
+@import url('./reset.css');
-    font-size: 2rem;
+
+html, body {
+    min-height: 100dvh;
+    background-image: url('background.jpg');
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    color: #611;
+}
+
+#app {
+    min-height: 100dvh;
+    backdrop-filter: blur(10px);
+    background-color: #00000077;
+    display: flex;
+    flex-direction: column;
+}
+
+header nav {
+    display: flex;
+    justify-content: center;
+    ul {
+        display: flex;
+        gap: 10px;
+        width: min-content;
+        padding: 10px;
+        li {
+            display: block;
+            flex: 1;
+            button {
+                display: block;
+                width: 100%;
+                padding: 4px 10px;
+                cursor: pointer;
+                font-size: 1.3rem;
+                background-color: transparent;
+                outline: none;
+                border: none;
+                transition: 0.1s ease-in-out transform, 0.1s ease-in-out text-shadow;
+                &:hover, &:focus {
+                    transform: scale(1.03);
+                    text-shadow: 0 0 0.1rem #f00;
+                }
+                &:active {
+                    transform: scale(0.98);
+                    text-shadow: 0 0 0.08rem #f00;
+                }
+            }
+        }
+    }
+}
+
+#content {
+    flex: 1;
+    section {
+        display: flex;
+        padding: 12px;
+        flex-direction: row;
+        &:not(#start) span {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 10px;
+        }
+        &:not(#start) img {
+            flex: 1;
+            display: block;
+            width: 50%;
+            /* margin: auto; */
+        }
+        h1 {
+            font-size: 4rem;
+            font-weight: bold;
+        }
+        span {
+            font-size: 1.5rem;
+        }
+        &#start {
+            padding-left: 25%;
+            padding-right: 25%;
+            text-align: center;
+            flex-direction: column;
+            gap: 12px;
+            img {
+                border: 1px solid #fff;
+                border-radius: 15px;
+                display: block;
+                width: 70%;
+                margin: auto;
+            }
+        }
+        &:nth-child(odd) {
+            background-color: #0000002f;
+            &:not(#start) span {
+                text-align: left;
+            }
+        }
+        &:nth-child(even) {
+            background-color: #0000003f;
+            &:not(#start) span {
+                text-align: right;
+            }
+        }
+    }
+}
+
+footer {
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 0.9rem;
 }

src/template.html

@@ -6,6 +6,48 @@
     <title>Restaurant</title>
 </head>
 <body>
-    <div id="app"></div>
+    <div id="app">
+        <header>
+            <nav>
+                <ul>
+                    <li>
+                        <button type="button">Home</button>
+                    </li>
+                    <li>
+                        <button type="button">Menu</button>
+                    </li>
+                    <li>
+                        <button type="button">About</button>
+                    </li>
+                </ul>
+            </nav>
+        </header>
+        <div id="content">
+            
+            <section id="start">
+                <img src="background.jpg" alt="">
+                <h1>Restaurant</h1>
+                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus pariatur eum ipsa necessitatibus explicabo sapiente illum! Iusto maxime veniam nihil deserunt quia soluta, doloremque beatae distinctio totam quibusdam quisquam velit?</span>
+            </section>
+            <section class="showcase">
+                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
+                <img src="background.jpg" alt="">
+            </section>
+            <section class="showcase">
+                <img src="background.jpg" alt="">
+                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
+            </section>
+            <section class="showcase">
+                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
+                <img src="background.jpg" alt="">
+            </section>
+            <section class="showcase">
+                <img src="background.jpg" alt="">
+                <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, neque? Aperiam repellat veritatis commodi qui ipsam iusto magni quas tempore incidunt, corrupti, quis reiciendis nam obcaecati praesentium ea laboriosam sunt?</span>
+            </section>
+            <section id="end"></section>
+        </div>
+        <footer>2024, Restaurant</footer>
+    </div>
 </body>
 </html>

webpack.common.js

@@ -16,7 +16,8 @@ module.exports = {
             },
             {
                 test: /\.(jpg|png|gif|jpeg|webp)$/i,
-                use: ['file-loader'],
+                type: "asset/resource",
+                // use: ['file-loader'],
             },
             {
                 test: /\.(woff|woff2|otf|ttf|eot)$/i,

webpack.dev.js

@@ -5,7 +5,7 @@ const common = require('./webpack.common.js');
 module.exports = merge(common, {
     mode: "development",
     devtool: "inline-source-map",
-    devSources: {
+    devServer: {
         static: {
             directory: path.join(__dirname, "src"),
         },