This commit is contained in:
Philippe Torrel
2026-10-05 12:10:33 +02:00
parent 2a2bdc3c63
commit 6c4bc185b3
10 changed files with 339 additions and 71 deletions
@@ -1,48 +1,51 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<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" /> -->
<meta charset="UTF-8" />
<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="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>
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/build.js" defer></script>
</head>
<body>
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
<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>
</figure>
</div>
</header>
<header class="header-main">
<div class="content-box">
<figure class="logo-main">
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
<figcaption>JS course</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.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</nav>
</li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Kontakt</h1>
@@ -0,0 +1,16 @@
<head>
<meta charset="UTF-8" />
<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>
@@ -0,0 +1,9 @@
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
<header class="header-main">
<div class="content-box">
<figure class="logo-main">
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
<figcaption>JS course</figcaption>
</figure>
</div>
</header>
@@ -0,0 +1,16 @@
<nav class="menu-main">
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
@@ -0,0 +1,80 @@
<!doctype html>
<html lang="de">
@@include('head.html')
<body>
@@include('header-main.html')
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
@@include('menu-main.html')
<main>
<div class="container py-5">
<h1>Kontakt</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
<form class="form-contact">
<div class="row">
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-firstname" class="form-label">First name:</label>
<input
type="text"
name="firstname"
id="input-firstname"
class="form-control input-firstname"
required />
</div>
</div>
<!-- ▲ /col ▲ -->
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-lastname" class="form-label">Last name:</label>
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
</div>
</div>
<!-- ▲ /col ▲ -->
</div>
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-email" class="form-label">E-mail</label>
<input type="email" name="email" id="input-email" class="form-control input-email" required />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-subject" class="form-label">Subject</label>
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
</div>
</div>
</div>
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="textarea-message" class="form-label">Message</label>
<textarea
name="message"
id="textarea-message"
cols="12"
rows="8"
class="form-control textarea-message"></textarea>
</div>
</div>
</div>
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
<div class="row">
<div class="col">
<div class="mb-3">
<button type="submit" class="btn btn-dark button-submit">Send</button>
</div>
</div>
</div>
</form>
</div>
</main>
</body>
</html>
@@ -0,0 +1,28 @@
<!doctype html>
<html lang="de">
@@include('head.html')
<body>
@@include('header-main.html')
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
@@include('menu-main.html')
<main>
<div class="container py-5">
<h1>Webseite mit HTML & CSS (SCSS)</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora
dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.
</p>
<div class="card" style="width: 18rem">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card’s content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</main>
</body>
</html>
@@ -22,6 +22,24 @@ task('reload', (done) => {
done();
});
// HTML ========
import fileInclude from 'gulp-file-include';
task('html', (done) => {
const sourceFiles = ['./dev/html/pages/**/*.html', './dev/html/pages/*.html'];
const targetFolder = './';
src(sourceFiles)
.pipe(
fileInclude({
prefix: '@@',
basepath: './dev/html/includes',
}),
)
.pipe(dest(targetFolder));
done();
});
// JS ===========
// npm install rollup @rollup/stream @rollup/plugin-replace @rollup/plugin-node-resolve @rollup/plugin-commonjs vinyl-source-stream vinyl-buffer -D
@@ -167,10 +185,11 @@ task('css', (done) => {
task('watcher', () => {
watch(['./dev/scss/**/*.+(scss|css)', './dev/scss/*.+(scss|css)'], series('css', 'reload'));
watch(['./dev/scripts/**/*.js', './dev/scripts/*.js'], series('js', 'reload'));
watch(['./dev/html/**/*.html'], series('html', 'reload'));
});
// Main DEV Task ========
task('dev', series('css', 'js', parallel('server', 'watcher')));
task('dev', series('css', 'js', 'html', parallel('server', 'watcher')));
// Test Tasks
@@ -1,48 +1,51 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<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" /> -->
<meta charset="UTF-8" />
<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="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>
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/build.js" defer></script>
</head>
<body>
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
<header class="header-main">
<div class="content-box">
<figure class="logo-main">
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
<figcaption>JS course</figcaption>
</figure>
</div>
</header>
<header class="header-main">
<div class="content-box">
<figure class="logo-main">
<img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
<figcaption>JS course</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.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li>
<a href="#dropdown">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</nav>
</li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Webseite mit HTML & CSS (SCSS)</h1>
@@ -20,6 +20,7 @@
"esbuild": "^0.28.2",
"gulp": "^5.0.1",
"gulp-autoprefixer": "^10.0.0",
"gulp-file-include": "^2.3.0",
"gulp-sass": "^6.0.1",
"gulp-sourcemaps": "^3.0.0",
"npm-run-all": "^4.1.5",
@@ -3860,6 +3861,13 @@
"ieee754": "^1.2.1"
}
},
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"dev": true,
"license": "MIT"
},
"node_modules/bytes": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -4105,6 +4113,22 @@
"dev": true,
"license": "MIT"
},
"node_modules/concat-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
"dev": true,
"engines": [
"node >= 6.0"
],
"license": "MIT",
"dependencies": {
"buffer-from": "^1.0.0",
"inherits": "^2.0.3",
"readable-stream": "^3.0.2",
"typedarray": "^0.0.6"
}
},
"node_modules/connect": {
"version": "3.6.6",
"resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
@@ -5326,6 +5350,13 @@
"node": ">= 10.13.0"
}
},
"node_modules/flatnest": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/flatnest/-/flatnest-1.0.1.tgz",
"integrity": "sha512-fw6V/6LdrkB/q/mW/8M4PfX9sDUo4k5UZ9vlRlTrsbhDrxbe51puGoGHOmfr5hAczTH/33Q4jzuDnOBerGaIlQ==",
"dev": true,
"license": "MIT"
},
"node_modules/flru": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/flru/-/flru-1.0.2.tgz",
@@ -5975,6 +6006,61 @@
"node": ">=10"
}
},
"node_modules/gulp-file-include": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/gulp-file-include/-/gulp-file-include-2.3.0.tgz",
"integrity": "sha512-OoMq5QtXHYz6hu2dZm1OxravcqrPXGeCNvOtz+8/589zFKcdpKGGvFXz/Aw4hx8pKZqaS+oJusgKDVQ4dCzqSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0",
"concat-stream": "^2.0.0",
"extend": "^3.0.2",
"flatnest": "^1.0.0",
"json5": "^2.1.3",
"plugin-error": "^1.0.1",
"through2": "^4.0.2",
"vinyl": "^2.2.1"
}
},
"node_modules/gulp-file-include/node_modules/replace-ext": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
"integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.10"
}
},
"node_modules/gulp-file-include/node_modules/through2": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
"dev": true,
"license": "MIT",
"dependencies": {
"readable-stream": "3"
}
},
"node_modules/gulp-file-include/node_modules/vinyl": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
"integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
"dev": true,
"license": "MIT",
"dependencies": {
"clone": "^2.1.1",
"clone-buffer": "^1.0.0",
"clone-stats": "^1.0.0",
"cloneable-readable": "^1.0.0",
"remove-trailing-separator": "^1.0.1",
"replace-ext": "^1.0.0"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/gulp-plugin-extras": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/gulp-plugin-extras/-/gulp-plugin-extras-1.1.0.tgz",
@@ -9278,6 +9364,13 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
"dev": true,
"license": "MIT"
},
"node_modules/ua-parser-js": {
"version": "1.0.41",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
@@ -24,6 +24,7 @@
"esbuild": "^0.28.2",
"gulp": "^5.0.1",
"gulp-autoprefixer": "^10.0.0",
"gulp-file-include": "^2.3.0",
"gulp-sass": "^6.0.1",
"gulp-sourcemaps": "^3.0.0",
"npm-run-all": "^4.1.5",