ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-28 14:48:20 +02:00
parent 6a665c6e9a
commit ad6782538b
9 changed files with 47 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02_advanced/unterricht/tag16/website-static/assets/css/main.css
+10 -53
View File
@@ -12087,14 +12087,22 @@ blockquote {
.header-main {
width: 100%;
height: 30vh; /* viewport height */
height: 300px;
background-color: #ddd;
height: 400px;
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/assets/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
02_advanced/unterricht/tag16/website-static/assets/img/header-bg.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

02_advanced/unterricht/tag16/website-static/contact.html
+8
View File
@@ -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
+7 -2
View File
@@ -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
+17 -9
View File
@@ -1,10 +1,18 @@
.logo-main figcaption {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
.logo-main {
img,
svg {
width: 320px;
height: auto;
max-width: 320px;
}
figcaption {
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
02_advanced/unterricht/tag16/website-static/dev/scss/main.scss
-56
View File
@@ -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
+2 -2
View File
@@ -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" />
<figcaption>Logo - Slogan</figcaption>
<img src="/assets/img/logo-js.min.svg" alt="Logo" />
<figcaption>JS course</figcaption>
</figure>
</div>
</header>
02_advanced/unterricht/tag16/website-static/package.json
+2 -1
View File
@@ -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",