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 11:28:21 +02:00
parent 6d6256eb17
commit d1d7dd3d31
3 changed files with 112 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02_advanced/unterricht/tag16/website-static/MATERIAL.zip
BIN
View File
Binary file not shown.
02_advanced/unterricht/tag16/website-static/contact.html
+110
View File
@@ -0,0 +1,110 @@
<!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" /> -->
<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>
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main">
<ul class="list">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li>
<a href="#">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="#">Project 1</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>
<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>
02_advanced/unterricht/tag16/website-static/index.html
+2 -3
View File
@@ -6,7 +6,7 @@
<title>Webseite mit HTML & CSS (SCSS)</title> <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 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" /> <link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/build.js" defer></script> <script src="assets/js/main.js" defer></script>
</head> </head>
<body> <body>
<!-- header.header-main>.content-box>figure.logo-main>img+figc --> <!-- header.header-main>.content-box>figure.logo-main>img+figc -->
@@ -21,7 +21,7 @@
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} --> <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main"> <nav class="menu-main">
<ul class="list"> <ul class="list">
<li><a href="/">Home</a></li> <li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li> <li><a href="about.html">About</a></li>
<li> <li>
<a href="#">Projects</a> <a href="#">Projects</a>
@@ -38,7 +38,6 @@
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Webseite mit HTML & CSS (SCSS)</h1> <h1>Webseite mit HTML & CSS (SCSS)</h1>
<div class="box"><span>BOX</span></div>
<p> <p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora 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. dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.