02_advanced/unterricht/tag16/website-static/assets/css/main.css

@@ -12087,14 +12087,22 @@ blockquote {
 .header-main {
   width: 100%;
   height: 30vh; /* viewport height */
-  height: 300px;
+  height: 400px;
-  background-color: #ddd;
+  background: black url("../img/header-bg.webp") center no-repeat border-box;
+  background-size: cover;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  border: 20px solid rgba(255, 255, 255, 0.25);
 }
 
+.logo-main img,
+.logo-main svg {
+  width: 320px;
+  height: auto;
+  max-width: 320px;
+}
 .logo-main figcaption {
   width: 1px;
   height: 1px;
@@ -12147,55 +12155,4 @@ blockquote {
   display: block;
 }
 
-.box {
-  width: 100px;
-  height: 100px;
-  border: 0.5rem solid #333;
-  background-color: salmon;
-  padding: 1rem;
-}
-
-.header-main {
-  width: 100%;
-  height: 30vh; /* viewport height */
-  height: 300px;
-  background-color: #ddd;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo-main figcaption {
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.menu-main {
-  margin: 0;
-  padding: 0;
-}
-.menu-main ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.menu-main ul.list {
-  display: flex;
-}
-.menu-main ul.list li a {
-  display: inline-block;
-  color: #333;
-  background-color: salmon;
-  padding: 0.5rem 1rem;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
 /*# sourceMappingURL=main.css.map */

02_advanced/unterricht/tag16/website-static/contact.html

@@ -5,6 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Webseite mit HTML & CSS (SCSS)</title>
     <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
+
+    <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="JS Course" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+
     <link rel="stylesheet" href="assets/css/main.css" />
     <script src="assets/js/build.js" defer></script>
   </head>

02_advanced/unterricht/tag16/website-static/dev/scss/05_modules/_header-main.scss

@@ -1,11 +1,16 @@
 .header-main {
   width: 100%;
   height: 30vh; /* viewport height */
-  height: 300px;
+  height: 400px;
+
+  background: black url('../img/header-bg.webp') center no-repeat border-box;
+
+  background-size: cover;
 
-  background-color: #ddd;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
+  border: 20px solid rgba(white, 0.25);
 }

02_advanced/unterricht/tag16/website-static/dev/scss/05_modules/_logo-main.scss

@@ -1,4 +1,11 @@
-.logo-main figcaption {
+.logo-main {
+  img,
+  svg {
+    width: 320px;
+    height: auto;
+    max-width: 320px;
+  }
+  figcaption {
     width: 1px;
     height: 1px;
     padding: 0;
@@ -8,3 +15,4 @@
     white-space: nowrap;
     border: 0;
   }
+}

02_advanced/unterricht/tag16/website-static/dev/scss/main.scss

@@ -10,59 +10,3 @@
 @import '04_plugins/index';
 // 05 Modules
 @import '05_modules/index';
-
-.box {
-  width: 100px;
-  height: 100px;
-  border: 0.5rem solid #333;
-  background-color: salmon;
-  padding: 1rem;
-}
-
-.header-main {
-  width: 100%;
-  height: 30vh; /* viewport height */
-  height: 300px;
-
-  background-color: #ddd;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo-main figcaption {
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.menu-main {
-  margin: 0;
-  padding: 0;
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  ul.list {
-    display: flex;
-    li {
-      a {
-        display: inline-block;
-        color: #333;
-        background-color: salmon;
-        padding: 0.5rem 1rem;
-        text-decoration: none;
-        text-transform: uppercase;
-      }
-    }
-  }
-}

02_advanced/unterricht/tag16/website-static/index.html

@@ -21,8 +21,8 @@
     <header class="header-main">
       <div class="content-box">
         <figure class="logo-main">
-          <img src="https://dummyimage.com/280x160/555/000.jpg" alt="Logo" />
+          <img src="/assets/img/logo-js.min.svg" alt="Logo" />
-          <figcaption>Logo - Slogan</figcaption>
+          <figcaption>JS course</figcaption>
         </figure>
       </div>
     </header>

02_advanced/unterricht/tag16/website-static/package.json

@@ -8,9 +8,10 @@
   "type": "module",
   "main": "index.js",
   "scripts": {
+    "server": "npx http-server -p 3000 -c-1",
     "css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
     "js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
-    "dev": "run-p css js"
+    "dev": "run-p css js server"
   },
   "devDependencies": {
     "esbuild": "^0.28.2",