PROJEKTARBEIT - Step 3
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pizzeria Albertus</title>
<link rel="stylesheet" href="assets/styles/main.css">
</head>
<body>
<header id="home">
<nav class="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#speisekarte">Speisekarte</a></li>
<li><a href="#order">Bestellung</a></li>
<li><a href="#infos">Informationen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<div class="claim">
<h1>Pizzeria Albertus</h1>
<p><span>hungrig?</span> Pizza geht immer!</p>
</div>
</header>
<main>
<section id="speisekarte" class="main-section">
<h2>Speisekarte</h2>
<p>Lorem ipsum
dolor, sit amet consec
tetur adipisicing elit.<br> Perferendis
neque <strong>aliquid distinctio</strong>, v
elit itaque porro, voluptatem quis, bland
itiis maiores corrupti tempora corporis e
a fugiat quisquam eius? Neque rerum adipi
sci corporis!
</p>
<table class="price-table">
<tr>
<th>Nr.</th>
<th>Pizza</th>
<th>Preis</th>
</tr>
<tr>
<td>1.</td>
<td>Margherita</td>
<td>7,89 €</td>
</tr>
<tr>
<td>2.</td>
<td>Salami</td>
<td>9,99 €</td>
</tr>
<tr>
<td>3.</td>
<td>Funghi</td>
<td>8,99 €</td>
</tr>
</table>
</section>
<section id="order" class="main-section">
<h2>Bestellung</h2>
</section>
<section id="infos" class="main-section">
<h2>Informationen</h2>
<article class="sidebyside">
<img src="https://via.placeholder.com/150x300" alt="Pizza">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit fugit hic, laboriosam dicta voluptas quia cum voluptates suscipit ipsam reiciendis at odio quaerat culpa ad laudantium, placeat cumque laborum officia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit fugit hic, laboriosam dicta voluptas quia cum voluptates suscipit ipsam reiciendis at odio quaerat culpa ad laudantium, placeat cumque laborum officia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit fugit hic, laboriosam dicta voluptas quia cum voluptates suscipit ipsam reiciendis at odio quaerat culpa ad laudantium, placeat cumque laborum officia?</p>
</div>
</article>
</section>
<section id="contact" class="main-section">
<h2>Kontakt</h2>
<form action="form.php" method="post">
<input type="radio" name="anrede" id="anrede-1" value="herr">Herr
<input type="radio" name="anrede" id="anrede-2" value="frau">Frau
<div>
<label for="pizza">Pizza</label>
<select name="pizza" id="pizza">
<option value="margherita">Margherita</option>
<option value="salami">Salami</option>
<option value="funghi">Funghi</option>
</select>
<div>
<label for="quantity">Anzahl</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</div>
</div>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="anschreiben"></label>
<textarea name="anschreiben" id="anschreiben" cols="30" rows="10"></textarea>
</div>
<input type="submit" value="abschicken">
</form>
</section>
</main>
<footer>
<h2>Impressum</h2>
</footer>
<script src="/awb/albertus/assets/scripts/main.js" type="text/javascript"></script>
</body>
</html>
assets/styles/main.css
/* Initialisierung & Reset */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
p {
margin-bottom: 1.1em;
}
table td,
table th {
padding: 0.4em;
text-align: left;
}
/* Struktur */
header#home {
background-color: grey;
min-height: 100vh;
}
section.main-section {
margin-top: 20px;
background-color: #bbbbbb;
min-height: 50vh;
}
.main-section {
padding: 1.3em;
}
.main-section h2 {
margin-bottom: 1.3em;
}
/* Home */
#home {
background-image: url("/awb/albertus/assets/img/blur-blurry-bokeh-close-up-347139.jpg");
background-size: cover;
background-position: center;
padding: 7%;
}
#home .claim {
margin-top: 10%;
}
#home .claim h1 {
font-size: 6em;
}
#home .claim p {
font-size: 3.5em;
margin-left: 25%;
}
#home .claim p span {
font-style: italic;
}
/* Hauptnavigation */
.main-nav ul li {
display: inline;
margin-right: 10px;
font-size: 1.4em;
background-color: rgba(100, 100, 100, 0.5);
padding: 5px;
}
.main-nav ul li:hover {
background-color: rgba(100, 100, 100, 0.8);
}
.main-nav ul li a {
text-decoration: none;
color: black;
}
.main-nav ul li a:hover {
color: rgb(120, 50, 50);
}
/************/
/* Sections */
/************/
/* Speisekarte */
table.price-table td {
border: 1px solid white;
}
/* Helpers */
.sidebyside {
display: flex;
}
.sidebyside img {
margin-right: 20px;
}
footer {
min-height: 100vh;
}
assets/scripts/main.js
var sinn = 42;
const claim = document.querySelector('.claim h1');
if (sinn === 42) {
claim.innerHTML = 'Hallo Kurs';
console.log(claim.innerHTML);
}
const absaetze = document.querySelectorAll('p');
console.log(absaetze);
for (var i = 0; i < absaetze.length; i++) {
console.log(absaetze[i]);
}
for (absatz of absaetze) {
console.log(absatz.innerHTML.length);
}
var greetings = "Kurs";
var basisZahl = 17;
var sinn = 42;
var mehrSinn = 42.3;
var wahr = true;
var geschwindelt = false;
var ergebnis = sinn * 2;
ergebnis = ergebnis - 4;
ergebnis = sinn + 1 - 1;
for (var i = basisZahl; i < sinn * 2; i++) {
console.log(machtDasSinn(i));
}
function machtDasSinn(pruefe) {
var antwort = "Das macht keinen Sinn!";
if (pruefe === 42) {
antwort = 'Das macht Sinn!';
}
return antwort;
}
console.log(multipliziere(6, 7));
function multipliziere(a, b) {
return a * b;
}
form.php
<?php
echo "<h1>Formular</h1>";
echo "<h2>GET:</h2>";
$getParams = $_GET;
echo "<ul>";
foreach ($getParams as $key => $value) {
echo "<li>" . $key . ": " . $value . "</li>";
}
echo "</ul>";
echo "<h2>POST:</h2>";
$postParams = $_POST;
echo "<ul>";
foreach ($postParams as $key => $value) {
echo "<li>" . $key . ": " . $value . "</li>";
}
echo "</ul>";