diff --git a/src/background.jpg b/src/background.jpg
new file mode 100644
index 0000000..ba796e1
Binary files /dev/null and b/src/background.jpg differ
diff --git a/src/main.js b/src/main.js
index 9955dfd..f277195 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,2 @@
import "./style.css"
-
-const app = document.querySelector("#app");
-
-let welcome = document.createElement("span");
-welcome.id = "welcome";
-welcome.textContent = "Welcome to the restaurant website";
-
-app.append(welcome);
\ No newline at end of file
+const app = document.querySelector("#app");
\ No newline at end of file
diff --git a/src/reset.css b/src/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 9c19bb3..3511785 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,115 @@
-#welcome {
- font-size: 2rem;
+@import url('./reset.css');
+
+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;
}
\ No newline at end of file
diff --git a/src/template.html b/src/template.html
index 73894d1..08df6b1 100644
--- a/src/template.html
+++ b/src/template.html
@@ -6,6 +6,48 @@
Restaurant
-
+
+
+
+
+
+ Home
+
+
+ Menu
+
+
+ About
+
+
+
+
+
+
+
+ Restaurant
+ 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?
+
+
+ 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?
+
+
+ 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?
+
+
+ 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?
+
+
+ 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?
+
+
+
+
+
+