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-07-01 15:45:57 +02:00
parent 894ec73605
commit 19226bfae7
7 changed files with 139 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
02_advanced/unterricht/tag13/04_node-hello.js Normal file
View File

@@ -0,0 +1,2 @@
// console ist aus dem Node core (Standard-library)
console.log('Hello JS from system (node)');

36
02_advanced/unterricht/tag13/05_website/assets/css/main.css Normal file
View File

@@ -0,0 +1,36 @@
.header-main {
width: 100%;
height: 400px;
background-color: #222;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.header-main .content-box figure figcaption {
display: none;
}
.menu-main {
background-color: steelblue;
}
.menu-main ul {
list-style: none;
display: flex;
}
.menu-main ul li {
border-right: 1px solid #333;
}
.menu-main ul li:last-child {
border-right: none;
}
.menu-main ul li a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
display: inline-block;
padding: 0.5rem 1rem;
}
/*# sourceMappingURL=main.css.map */

1
02_advanced/unterricht/tag13/05_website/assets/css/main.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE;;;AAOR;EACE;;AACA;EACE;EACA;;AACA;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"main.css"}

19
02_advanced/unterricht/tag13/05_website/assets/js/main.js Normal file
View File

@@ -0,0 +1,19 @@
'use strict';
(() => {
// === DOM & VARS =======
const DOM = {};
// === INIT =============
const init = () => {
console.log('init...');
};
// === EVENTHANDLER =====
// === XHR/FETCH ========
// === FUNCTIONS ========
init();
})();

43
02_advanced/unterricht/tag13/05_website/assets/scss/main.scss Normal file
View File

@@ -0,0 +1,43 @@
// sass assets/scss/main.scss:assets/css/main.css
// Header Bereich
.header-main {
width: 100%;
height: 400px;
background-color: #222;
color: white;
display: flex;
justify-content: center;
align-items: center;
.content-box {
figure {
figcaption {
display: none;
}
}
}
}
// Menu Main
.menu-main {
background-color: steelblue;
ul {
list-style: none;
display: flex;
li {
border-right: 1px solid #333;
&:last-child {
border-right: none;
}
a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
display: inline-block;
padding: 0.5rem 1rem;
}
}
}
}

38
02_advanced/unterricht/tag13/05_website/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite mit Sass</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js"></script>
</head>
<body>
<header class="header-main">
<div class="content-box">
<figure>
<img src="https://dummyimage.com/160x100" alt="Logo" />
<figcaption>Webseite mit Sass</figcaption>
</figure>
</div>
</header>
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main">
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Webseite mit Sass</h1>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>