Archived
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Florian Otto
@@ -0,0 +1,280 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/*
|
||||||
|
/*
|
||||||
|
* HTML5 ✰ Boilerplate
|
||||||
|
*
|
||||||
|
* Das Folgende ist das Ergebnis umfangreicher Nachforschungen zum browserunabhängigen Webdesign.
|
||||||
|
* Verweise auf die Urheber finden Sie in den Codekommentaren, außerdem ein herzliches Dankeschön an Nicolas Gallagher, Jonathan Neal,
|
||||||
|
* Kroc Camen und die H5BP-Entwicklergemeinde und das H5BP-Team.
|
||||||
|
*
|
||||||
|
* Ausführliche Informationen über diesen CSS-Code gibt's unter h5bp.com/css
|
||||||
|
*
|
||||||
|
* Dreamweaver-Modifikationen:
|
||||||
|
* 1. Auswahlmarkierung auskommentiert
|
||||||
|
* 2. Abschnitt über Medienabfrage entfernt (wir definieren unsere eigene Medienabfrage in einer gesonderten Datei)
|
||||||
|
*
|
||||||
|
* ==|== Normalisieren ======================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
HTML5-Anzeigedefinitionen
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
||||||
|
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
|
||||||
|
audio:not([controls]) { display: none; }
|
||||||
|
[hidden] { display: none; }
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Basis
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Die Anpassung der Textgröße führt in IE6/7 zu merkwürdigen Resultaten, wenn die Schriftgröße des Bodytexts in em-Einheiten angegeben ist
|
||||||
|
* 2. Erzwingen einer vertikalen Bildlaufleiste in Nicht-IE-Browsern
|
||||||
|
* 3. Verhindern der iOS-Textgrößenanpassung beim Ändern der Geräteausrichtung ohne den Benutzerzoom zu deaktivieren: h5bp.com/g
|
||||||
|
*/
|
||||||
|
|
||||||
|
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||||
|
|
||||||
|
body { margin: 0; font-size: medium; line-height: 1.231; }
|
||||||
|
|
||||||
|
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Textschatten in der Auswahlmarkierung entfernen: h5bp.com/i
|
||||||
|
* Die folgenden Auswahldeklarationen müssen getrennt voneinander erfolgen
|
||||||
|
* Außerdem: leuchtendes Pink! (Die Hintergrundfarbe kann auch an das Design angepasst werden.)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Dreamweaver: die folgenden Codestellen auskommentieren, wenn die Auswahlmarkierung angepasst werden soll
|
||||||
|
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||||
|
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Hyperlinks
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
a { color: #222; }
|
||||||
|
a:visited { color: #000; }
|
||||||
|
a:hover { color: #eb3526; }
|
||||||
|
a:focus { outline: thin dotted; }
|
||||||
|
|
||||||
|
/* Verbessert in allen Browsern die Lesbarkeit von Hyperlinks, die über die Tabulatortaste fokussiert werden (focus) und von Hyperlinks, auf die der Mauszeiger gerichtet ist (hover): h5bp.com/h */
|
||||||
|
a:hover, a:active { outline: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Typografie
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
abbr[title] { border-bottom: 1px dotted; }
|
||||||
|
|
||||||
|
b, strong { font-weight: bold; }
|
||||||
|
|
||||||
|
blockquote { margin: 1em 40px; }
|
||||||
|
|
||||||
|
dfn { font-style: italic; }
|
||||||
|
|
||||||
|
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
||||||
|
|
||||||
|
ins { background: #ff9; color: #000; text-decoration: none; }
|
||||||
|
|
||||||
|
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
|
||||||
|
|
||||||
|
/* Nichtproportionale Schriftfamilie neu deklarieren: h5bp.com/j */
|
||||||
|
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
|
||||||
|
|
||||||
|
/* In allen Browsern die Lesbarkeit von vorformatiertem Text verbessern */
|
||||||
|
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
|
||||||
|
|
||||||
|
q { quotes: none; }
|
||||||
|
q:before, q:after { content: ""; content: none; }
|
||||||
|
|
||||||
|
small { font-size: 85%; }
|
||||||
|
|
||||||
|
/* Text höher oder tiefer stellen ohne die Zeilenhöhe zu beeinflussen: h5bp.com/k */
|
||||||
|
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||||||
|
sup { top: -0.5em; }
|
||||||
|
sub { bottom: -0.25em; }
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Listen
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
|
||||||
|
dd { margin: 0 0 0 40px; }
|
||||||
|
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Eingebetteter Inhalt
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Verbessern der Bildqualität beim Skalieren in IE7: h5bp.com/d
|
||||||
|
* 2. Entfernen der Lücke zwischen Bildern und Rahmen in Bildcontainern: h5bp.com/e
|
||||||
|
*/
|
||||||
|
|
||||||
|
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Korrekter Überlauf in IE9 nicht verborgen
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) { overflow: hidden; }
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Abbildungen
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
figure { margin: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Formulare
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
form { margin: 0; }
|
||||||
|
fieldset { border: 0; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
/* Festlegen, dass 'label' den Fokus auf das betreffende Forularelement setzt */
|
||||||
|
label { cursor: pointer; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Korrekte Farbe wird in IE6/7/8/9 nicht vererbt
|
||||||
|
* 2. Korrekte Ausrichtung wird in IE6/7 merkwürdig angezeigt
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend { border: 0; *margin-left: -7px; padding: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Korrekte Schriftgröße wird in keinem der Browser vererbt
|
||||||
|
* 2. Entfernen von Rändern in FF3/4 S5 Chrome
|
||||||
|
* 3. Definieren konsistenter vertikaler Ausrichtung für alle Browser
|
||||||
|
*/
|
||||||
|
|
||||||
|
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Für eine Übereinstimmung mit FF3/4 die Zeilenhöhe als normal definieren (im UA-Stylesheet '!important' verwenden)
|
||||||
|
* 2. Korrekter innerer Abstand wird in IE6/7 merkwürdig angezeigt
|
||||||
|
*/
|
||||||
|
|
||||||
|
button, input { line-height: normal; *overflow: visible; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* In 'table' inneren Abstand wieder einführen, um Überlappungen zu vermeiden und IE6/7-Probleme mit Leerraum zu vermeiden.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table button, table input { *overflow: auto; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Anzeigen des Handcursors bei klickbaren Formularelementen
|
||||||
|
* 2. Gestaltung klickbarer Formularelemente in iOS ermöglichen
|
||||||
|
*/
|
||||||
|
|
||||||
|
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Konsistente Größe und Darstellung von Feldern
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
|
||||||
|
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
|
||||||
|
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* In FF3/4 innere Auffüllung und Rahmen entfernen: h5bp.com/l
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. In IE6/7/8/9 vertikale Standardbildlaufleiste entfernen
|
||||||
|
* 2. Größenänderung nur in der Vertikale zulassen
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea { overflow: auto; vertical-align: top; resize: vertical; }
|
||||||
|
|
||||||
|
/* Farben für die Formularüberprüfung */
|
||||||
|
input:valid, textarea:valid { }
|
||||||
|
input:invalid, textarea:invalid { background-color: #f0dddd; }
|
||||||
|
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
Tabellen
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
table { border-collapse: collapse; border-spacing: 0; }
|
||||||
|
td { vertical-align: top; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ==|== Primärstile ========================================================
|
||||||
|
Autor:
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ==|== nichtsemantische Helferklassen ========================================
|
||||||
|
Definieren Sie Ihre Stile vor dieser Auswahl
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Für den Austausch von Bildern */
|
||||||
|
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
|
||||||
|
.ir br { display: none; }
|
||||||
|
|
||||||
|
/* Vor Bildschirmleseprogrammen und Browsern verbergen: h5bp.com/u */
|
||||||
|
.hidden { display: none !important; visibility: hidden; }
|
||||||
|
|
||||||
|
/* Nur visuell verbergen, aber für Bildschirmleseprogramme bereithalten: h5bp.com/v */
|
||||||
|
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
||||||
|
|
||||||
|
/* Erweitert die Klasse ".visuallyhidden" so, dass das Element bei der Tastaturnavigation den Fokus erhält: h5bp.com/p */
|
||||||
|
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
|
||||||
|
|
||||||
|
/* Visuell und vor Bildschirmleseprogrammen verbergen, aber das Layout beibehalten */
|
||||||
|
.invisible { visibility: hidden; }
|
||||||
|
|
||||||
|
/* Floats beinhalten: h5bp.com/q */
|
||||||
|
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||||
|
.clearfix:after { clear: both; }
|
||||||
|
.clearfix { zoom: 1; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ==|== Druckstile ==========================================================
|
||||||
|
Druckstile.
|
||||||
|
Innen, um die erforderliche HTTP-Verbindung zu vermeiden: h5bp.com/r
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Schwarz druckt schneller: h5bp.com/s */
|
||||||
|
a, a:visited { text-decoration: underline; }
|
||||||
|
a[href]:after { content: " (" attr(href) ")"; }
|
||||||
|
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||||
|
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Keine Bildverweise anzeigen und keine javascript/internal- Hyperlinks */
|
||||||
|
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
||||||
|
thead { display: table-header-group; } /* h5bp.com/t */
|
||||||
|
tr, img { page-break-inside: avoid; }
|
||||||
|
img { max-width: 100% !important; }
|
||||||
|
@page { margin: 0.5cm; }
|
||||||
|
p, h2, h3 { orphans: 3; widows: 3; }
|
||||||
|
h2, h3 { page-break-after: avoid; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Basic HTML Page</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background-color: #7a381e;
|
||||||
|
color: #333;
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etikett {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 809px;
|
||||||
|
height: 776px;
|
||||||
|
background-image: url('data:image/svg+xml,<svg width="809px" height="776px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-45.984221,-27.910785)"><g transform="matrix(0.481893,0,0,0.481893,-154.520299,-91.445084)"><path d="M1589.216,391.728C1607.444,417.316 1636.92,432.509 1668.337,432.509C1750.341,432.521 1891.324,432.521 1891.324,432.521C1997.956,432.521 2084.528,519.093 2084.528,625.725L2084.528,1655.427C2084.528,1762.059 1997.956,1848.631 1891.324,1848.631L617.613,1848.631C510.981,1848.631 424.41,1762.059 424.41,1655.427L424.41,625.725C424.41,519.093 510.981,432.521 617.613,432.521L840.601,432.521C872.021,432.521 901.501,417.326 919.731,391.735C976.466,311.833 1105.066,256.014 1254.469,256.014C1403.872,256.014 1532.471,311.833 1589.216,391.728Z" style="fill:white;stroke:%23512717;stroke-width:16.67px;" /></g><g transform="matrix(1.09499,0,0,1.09499,-31.67058,-10.50163)"><path d="M420.762,122.374C401.388,108.228 404.796,89.046 413.697,81.751C419.644,76.877 428.043,77.309 433.737,88.093L433.767,88.151C457.895,70.697 474.397,112.278 420.762,122.374Z" style="fill:%23B67552;stroke:%23512717;stroke-width:3.32px;" /><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M425.963,160.799C426.698,156.554 432.005,132.702 439.288,126.938" style="fill:none;stroke:%23512717;stroke-width:2.05px;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M418.898,120.176C415.841,116.806 419.38,102.644 429.47,100.355C429.991,100.236 431.091,100.583 431.193,100.718C433.444,103.723 429.734,109.731 429.55,110.465C429.728,109.931 430.024,109.291 430.352,108.589C432.859,104.28 439.468,100.322 441.191,102.402C442.798,104.342 440.406,111.42 440.155,112.164C438.538,116.185 436.257,120.029 435.391,121.411C430.106,115.764 423.702,116.239 418.898,120.176Z" style="fill:%239CB751;stroke:%23512717;stroke-width:1.9px;stroke-miterlimit:5;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M454.479,110.032C453.404,111.58 452.768,112.546 452.768,112.546C452.768,112.546 453.518,111.635 454.479,110.032C460.173,101.833 476.409,86.263 478.066,89.219C481.04,94.525 462.686,116.738 462.076,116.379C462.83,115.78 471.499,108.896 471.499,108.896C483.568,101.179 474.141,123.565 461.044,130.053C458.675,122.625 449.556,118.917 438.968,126.576L438.938,126.518C437.843,124.445 436.649,122.755 435.391,121.411C436.476,119.678 437.945,114.745 446.198,103.541C455.369,91.091 457.483,92.918 458.101,93.972C458.96,95.437 458.455,103.402 454.479,110.032Z" style="fill:%239CB751;stroke:%23512717;stroke-width:2.21px;stroke-miterlimit:5;" /></g></g></g></svg>');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="etikett">
|
||||||
|
<h1><span style="color: black;">nutella</span><span style="color: #eb3526;">rechner</span></h1>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+120
@@ -0,0 +1,120 @@
|
|||||||
|
<?php
|
||||||
|
// Unser "Wörterbuch" für den zweiten Slider (Position => Echter Wert)
|
||||||
|
$werteMap = [
|
||||||
|
1 => 8,
|
||||||
|
2 => 15,
|
||||||
|
3 => 20,
|
||||||
|
4 => 30,
|
||||||
|
5 => 40
|
||||||
|
];
|
||||||
|
|
||||||
|
// Initialisierung der Variablen
|
||||||
|
$ergebnis = null;
|
||||||
|
$wert1 = 2; // Standardwert für Slider 1
|
||||||
|
$wert2_position = 3; // Standard-Position für Slider 2 (entspricht hier der 20)
|
||||||
|
$echter_wert2 = $werteMap[$wert2_position];
|
||||||
|
|
||||||
|
// Prüfen, ob das Formular abgeschickt wurde
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
|
$wert1 = filter_input(INPUT_POST, 'slider1', FILTER_VALIDATE_INT) ?: 1;
|
||||||
|
|
||||||
|
// Wir lesen die Position (1-5) des Sliders aus
|
||||||
|
$wert2_position = filter_input(INPUT_POST, 'slider2', FILTER_VALIDATE_INT) ?: 1;
|
||||||
|
|
||||||
|
// Zur Sicherheit prüfen, ob die Position in unserem Array existiert
|
||||||
|
if (array_key_exists($wert2_position, $werteMap)) {
|
||||||
|
$echter_wert2 = $werteMap[$wert2_position];
|
||||||
|
} else {
|
||||||
|
$echter_wert2 = $werteMap[1]; // Fallback auf den ersten Wert
|
||||||
|
}
|
||||||
|
|
||||||
|
// Die beiden echten Werte multiplizieren
|
||||||
|
$ergebnis = $wert1 * $echter_wert2;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>nutellarechner</title>
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1><span class="span-dark">nutella</span><span class="span-red">rechner</span></h1>
|
||||||
|
<p class="slogan">Für jede Nuss-Nougat-Creme geeignet.</p>
|
||||||
|
|
||||||
|
<form method="POST" action="">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="slider1">
|
||||||
|
Brötchenhälften: <span id="display1"
|
||||||
|
class="value-display"><?= htmlspecialchars((string) $wert1) ?></span>
|
||||||
|
</label>
|
||||||
|
<input type="range" id="slider1" name="slider1" min="1" max="100" step="1"
|
||||||
|
value="<?= htmlspecialchars((string) $wert1) ?>"
|
||||||
|
oninput="document.getElementById('display1').innerText = this.value">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="slider2">
|
||||||
|
So dick wird geschmiert: <span id="display2" class="value-display"></span>
|
||||||
|
</label>
|
||||||
|
<input type="range" id="slider2" name="slider2" min="1" max="5" step="1"
|
||||||
|
value="<?= htmlspecialchars((string) $wert2_position) ?>" oninput="updateSlider2(this.value)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="button-calc" role="button" type="submit">Rechnen</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<?php if ($ergebnis !== null): ?>
|
||||||
|
<div class="result">
|
||||||
|
<strong>Ergebnis:</strong> Du brauchst
|
||||||
|
<strong><?= htmlspecialchars((string) $ergebnis) ?></strong> Gramm Nutella.
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<p class="werbung-title">Ich möchte lieber:</p>
|
||||||
|
<div class="werbung-buttons">
|
||||||
|
<button class="button-nudeln" role="button" onclick="window.location.href='https://nudelrechner.de';">Nudeln</button> <button class="button-mett" role="button" onclick="window.location.href='https://mettcalc.de';">Mettbrötchen</button> <button class="button-burger" role="button" onclick="window.location.href='https://burgerrechner.de';">Burger</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Ein Objekt, das die Positionen (1-5) mit Texten UND deinen eigenen Zahlen verknüpft
|
||||||
|
const sliderDaten = {
|
||||||
|
1: { text: "sehr dünn", wert: 8 },
|
||||||
|
2: { text: "dünn", wert: 15 },
|
||||||
|
3: { text: "normal", wert: 20 },
|
||||||
|
4: { text: "dick", wert: 30 },
|
||||||
|
5: { text: "sehr dick", wert: 40 }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Funktion, um Text und die echten Zahlen anzuzeigen
|
||||||
|
function updateSlider2(position) {
|
||||||
|
const daten = sliderDaten[position];
|
||||||
|
document.getElementById('display2').innerText = daten.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Startwert beim Laden setzen
|
||||||
|
window.onload = function () {
|
||||||
|
const startPosition = document.getElementById('slider2').value;
|
||||||
|
updateSlider2(startPosition);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<nav>
|
||||||
|
<p>
|
||||||
|
<a href="impressum.php">Impressum</a>
|
||||||
|
</p>
|
||||||
|
<p class="disclaimer">Disclaimer: <span class="span-dark">nutella</span><span class="span-red">rechner</span> ist ein privat betriebenes Projekt ohne kommerzielle Absichten und steht in keiner Beziehung zum Unternehmen Ferrero oder der Marke Nutella.</p>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Vendored
+2
@@ -0,0 +1,2 @@
|
|||||||
|
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
|
||||||
|
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
|
||||||
+430
@@ -0,0 +1,430 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
1. CSS Variablen (Custom Properties)
|
||||||
|
========================================================================== */
|
||||||
|
:root {
|
||||||
|
/* Farben */
|
||||||
|
--color-primary: #222222;
|
||||||
|
--color-secondary: #eb3526;
|
||||||
|
--color-tertiary: #f7c66d;
|
||||||
|
--color-background: #7a381e;
|
||||||
|
--color-text: #333333;
|
||||||
|
--color-text-light: #666666;
|
||||||
|
--color-text-white: #ffffff;
|
||||||
|
|
||||||
|
/* Typografie */
|
||||||
|
--font-family-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--font-size-base: 16px;
|
||||||
|
--font-size-title: 54px;
|
||||||
|
--line-height-base: 1.5;
|
||||||
|
|
||||||
|
/* Abstände (Spacing) */
|
||||||
|
--spacing-sm: 0.5rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 2rem;
|
||||||
|
|
||||||
|
/* Radien */
|
||||||
|
--border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
2. Basis Reset & Normierung
|
||||||
|
========================================================================== */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box; /* Verhindert, dass Padding/Border die Breite verändern */
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family-base);
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
line-height: var(--line-height-base);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsives Verhalten für Medien */
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
3. Grundlegende Typografie
|
||||||
|
========================================================================== */
|
||||||
|
h1 {
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-align: center;
|
||||||
|
font-size: var(--font-size-title);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-dark {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-red {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slogan {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.disclaimer {
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-display {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.werbung-title {
|
||||||
|
width: 90%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.werbung-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
margin-top: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
4. Layout Buttons, Forms & Slider
|
||||||
|
========================================================================== */
|
||||||
|
.button-calc {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
font-size: large;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-calc:before {
|
||||||
|
content: "";
|
||||||
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
var(--color-background),
|
||||||
|
var(--color-secondary),
|
||||||
|
var(--color-tertiary),
|
||||||
|
var(--color-text-white)
|
||||||
|
);
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -2px;
|
||||||
|
background-size: 400%;
|
||||||
|
z-index: -1;
|
||||||
|
-webkit-filter: blur(5px);
|
||||||
|
filter: blur(5px);
|
||||||
|
width: calc(100% + 4px);
|
||||||
|
height: calc(100% + 4px);
|
||||||
|
animation: glowing-button-calc 20s linear infinite;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glowing-button-calc {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 400% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-calc:after {
|
||||||
|
z-index: -1;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-calc:hover {
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border: 1px solid var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-mett {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: #fffae8;
|
||||||
|
background: #cd7569;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-mett:hover {
|
||||||
|
color: #cd7569;
|
||||||
|
background-color: #fffae8;
|
||||||
|
border: 1px solid #fffae8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-nudeln {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: #fdbf5b;
|
||||||
|
background: #182132;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-nudeln:hover {
|
||||||
|
color: #182132;
|
||||||
|
background-color: #fdbf5b;
|
||||||
|
border: 1px solid #182132;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-burger {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: orange;
|
||||||
|
background: #221600;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-burger:hover {
|
||||||
|
color: #221600;
|
||||||
|
background-color: orange;
|
||||||
|
border: 1px solid #221600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
margin: 0 5%;
|
||||||
|
width: 90%;
|
||||||
|
accent-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
5. Layout Listen
|
||||||
|
========================================================================== */
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul,
|
||||||
|
nav ol {
|
||||||
|
list-style: none;
|
||||||
|
list-style-image: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
6. Layout Container
|
||||||
|
========================================================================== */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 776px;
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-top: var(--spacing-md);
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: url('data:image/svg+xml,<svg width="809px" height="776px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-45.984221,-27.910785)"><g transform="matrix(0.481893,0,0,0.481893,-154.520299,-91.445084)"><path d="M1589.216,391.728C1607.444,417.316 1636.92,432.509 1668.337,432.509C1750.341,432.521 1891.324,432.521 1891.324,432.521C1997.956,432.521 2084.528,519.093 2084.528,625.725L2084.528,1655.427C2084.528,1762.059 1997.956,1848.631 1891.324,1848.631L617.613,1848.631C510.981,1848.631 424.41,1762.059 424.41,1655.427L424.41,625.725C424.41,519.093 510.981,432.521 617.613,432.521L840.601,432.521C872.021,432.521 901.501,417.326 919.731,391.735C976.466,311.833 1105.066,256.014 1254.469,256.014C1403.872,256.014 1532.471,311.833 1589.216,391.728Z" style="fill:white;stroke:%23512717;stroke-width:16.67px;" /></g><g transform="matrix(1.09499,0,0,1.09499,-31.67058,-10.50163)"><path d="M420.762,122.374C401.388,108.228 404.796,89.046 413.697,81.751C419.644,76.877 428.043,77.309 433.737,88.093L433.767,88.151C457.895,70.697 474.397,112.278 420.762,122.374Z" style="fill:%23B67552;stroke:%23512717;stroke-width:3.32px;" /><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M425.963,160.799C426.698,156.554 432.005,132.702 439.288,126.938" style="fill:none;stroke:%23512717;stroke-width:2.05px;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M418.898,120.176C415.841,116.806 419.38,102.644 429.47,100.355C429.991,100.236 431.091,100.583 431.193,100.718C433.444,103.723 429.734,109.731 429.55,110.465C429.728,109.931 430.024,109.291 430.352,108.589C432.859,104.28 439.468,100.322 441.191,102.402C442.798,104.342 440.406,111.42 440.155,112.164C438.538,116.185 436.257,120.029 435.391,121.411C430.106,115.764 423.702,116.239 418.898,120.176Z" style="fill:%239CB751;stroke:%23512717;stroke-width:1.9px;stroke-miterlimit:5;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M454.479,110.032C453.404,111.58 452.768,112.546 452.768,112.546C452.768,112.546 453.518,111.635 454.479,110.032C460.173,101.833 476.409,86.263 478.066,89.219C481.04,94.525 462.686,116.738 462.076,116.379C462.83,115.78 471.499,108.896 471.499,108.896C483.568,101.179 474.141,123.565 461.044,130.053C458.675,122.625 449.556,118.917 438.968,126.576L438.938,126.518C437.843,124.445 436.649,122.755 435.391,121.411C436.476,119.678 437.945,114.745 446.198,103.541C455.369,91.091 457.483,92.918 458.101,93.972C458.96,95.437 458.455,103.402 454.479,110.032Z" style="fill:%239CB751;stroke:%23512717;stroke-width:2.21px;stroke-miterlimit:5;" /></g></g></g></svg>');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid-Beispiel (Flexbox) */
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: -15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1 0 100%; /* Nimmt auf Mobilgeräten die volle Breite ein */
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
7. Media Queries (Mobile First)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* --- Kleine Geräte (Smartphones im Querformat, ab 576px) --- */
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Mittlere Geräte (Tablets, ab 768px) --- */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Beispiel: Spalten stehen nebeneinander ab Tablet-Größe */
|
||||||
|
.col {
|
||||||
|
flex: 1 0 50%; /* Zwei Spalten nebeneinander */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Große Geräte (Desktops, ab 992px) --- */
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1; /* Alle Spalten verteilen sich gleichmäßig */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Sehr große Geräte (Große Desktops, ab 1200px) --- */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Extra große Geräte (Ultrawide, ab 1400px) --- */
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user