Compare commits
21 Commits
main
...
feature-ha
| Author | SHA1 | Date | |
|---|---|---|---|
| 6d060ceaac | |||
|
ae6cbd9bc6 | ||
| 090d4f14c6 | |||
| 3599826f4c | |||
| e14f69f45c | |||
| 0298124d01 | |||
|
|
f8d3855e65 | ||
| 0a2eb9b99b | |||
| e8c560ecc7 | |||
| 6ee171fbc6 | |||
| f39b0c6269 | |||
|
|
dd964647fe | ||
|
|
c58a585867 | ||
|
|
bb25347833 | ||
| c14ba3722e | |||
| e6c372b6ea | |||
| 30dceac76e | |||
| 3a15bb3ba5 | |||
|
|
9f8ba1bef3 | ||
| 9dfb016e6b | |||
| 978ab171b7 |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
@ -1,4 +1,3 @@
|
||||
# msc-uxd-fs26-test
|
||||
|
||||
Test-Repository für Unterrichtszwecke
|
||||
Test Marlo
|
||||
Test-Repository für Unterrichtszwecke
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Das ist meine erste Website</h1>
|
||||
</body>
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
Das ist meine persönliche Datei.
|
||||
58
amanda-nielsen.html
Normal file
58
amanda-nielsen.html
Normal file
@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Graubündner Steinböcke</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Graubündner Steinböcke</h1>
|
||||
|
||||
<section id="intro">
|
||||
<h2>Willkommen</h2>
|
||||
<p>Der Graubündner Steinbock ist ein Symbol der Alpen und hat sich perfekt an das raue Gebirgsklima angepasst. Mit seinem beeindruckenden Geweih und der robusten Statur klettert er elegant über steile Felsen.</p>
|
||||
</section>
|
||||
|
||||
<section id="gallery">
|
||||
<h2>Bildergalerie</h2>
|
||||
<div class="gallery">
|
||||
<img src="steinbock1.jpg" alt="Steinbock im Fels" class="gallery-img active">
|
||||
<img src="steinbock2.jpg" alt="Steinbock in den Alpen" class="gallery-img">
|
||||
</div>
|
||||
<button id="nextImage">Nächstes Bild</button>
|
||||
</section>
|
||||
|
||||
<section id="facts">
|
||||
<h2>Interessante Fakten</h2>
|
||||
<button id="toggleFacts">Fakten anzeigen</button>
|
||||
<div id="factBox" class="fact-box">
|
||||
<ul>
|
||||
<li>Steinböcke können bis zu 3.50 Meter hoch springen.</li>
|
||||
<li>Sie erreichen ein Alter von etwa 15–20 Jahren in freier Wildbahn.</li>
|
||||
<li>Ihre Hufe sind speziell geformt, um auf Eis und Fels Halt zu finden.</li>
|
||||
<li>Jedes Jahr im Herbst schiebt der Bock sein Geweih ab und bildet es neu.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Bildwechsler
|
||||
const imgs = document.querySelectorAll('.gallery-img');
|
||||
let idx = 0;
|
||||
document.getElementById('nextImage').addEventListener('click', () => {
|
||||
imgs[idx].classList.remove('active');
|
||||
idx = (idx + 1) % imgs.length;
|
||||
imgs[idx].classList.add('active');
|
||||
});
|
||||
|
||||
// Fakten ein-/ausblenden
|
||||
const toggleBtn = document.getElementById('toggleFacts');
|
||||
const factBox = document.getElementById('factBox');
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
factBox.classList.toggle('show');
|
||||
toggleBtn.textContent = factBox.classList.contains('show') ? 'Fakten verbergen' : 'Fakten anzeigen';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
11
anthony.html
11
anthony.html
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Feature - Anthony</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,2 +0,0 @@
|
||||
Dies ist Laras persönliches File.
|
||||
Ich schreibe mal eine zweite Zeile.
|
||||
65
salih-hasicic-app.css
Normal file
65
salih-hasicic-app.css
Normal file
@ -0,0 +1,65 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #74ebd5, #9face6);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
padding: 40px 30px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
color: #333;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
24
salih-hasicic.html
Normal file
24
salih-hasicic.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meine Webseite</title>
|
||||
<link rel="stylesheet" href="salih-hasicic-app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1 id="main-title">Das ist meine hunderste Webseite</h1>
|
||||
<h2 id="greeting">Schön, dass du da bist!</h2>
|
||||
<h3 id="fun-text">Have fun on here</h3>
|
||||
|
||||
<div class="buttons">
|
||||
<button onclick="changeGreeting()">Begrüssung ändern</button>
|
||||
<button onclick="changeBackground()">Hintergrund ändern</button>
|
||||
<button onclick="toggleText()">Text verstecken / zeigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
script.js
Normal file
34
script.js
Normal file
@ -0,0 +1,34 @@
|
||||
function changeGreeting() {
|
||||
const greeting = document.getElementById("greeting");
|
||||
const hour = new Date().getHours();
|
||||
|
||||
if (hour < 12) {
|
||||
greeting.textContent = "Guten Morgen und willkommen!";
|
||||
} else if (hour < 18) {
|
||||
greeting.textContent = "Guten Tag und schön, dass du da bist!";
|
||||
} else {
|
||||
greeting.textContent = "Guten Abend und viel Spass hier!";
|
||||
}
|
||||
}
|
||||
|
||||
function changeBackground() {
|
||||
const colors = [
|
||||
"linear-gradient(135deg, #74ebd5, #9face6)",
|
||||
"linear-gradient(135deg, #ff9a9e, #fad0c4)",
|
||||
"linear-gradient(135deg, #a18cd1, #fbc2eb)",
|
||||
"linear-gradient(135deg, #f6d365, #fda085)"
|
||||
];
|
||||
|
||||
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
document.body.style.background = randomColor;
|
||||
}
|
||||
|
||||
function toggleText() {
|
||||
const text = document.getElementById("fun-text");
|
||||
|
||||
if (text.style.display === "none") {
|
||||
text.style.display = "block";
|
||||
} else {
|
||||
text.style.display = "none";
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
Das ist meine persönliche Datei.
|
||||
99
styles.css
Normal file
99
styles.css
Normal file
@ -0,0 +1,99 @@
|
||||
/* Basic reset */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
background-color: #3498db;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
/* gallery slider */
|
||||
.gallery {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: opacity 0.6s ease;
|
||||
}
|
||||
|
||||
.gallery-img.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* facts box */
|
||||
.fact-box {
|
||||
max-width: 800px;
|
||||
margin: 1rem auto;
|
||||
padding: 1rem;
|
||||
background: #ecf0f1;
|
||||
border-radius: 6px;
|
||||
display: none;
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
.fact-box.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
Hallo
|
||||
@ -1,71 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Die Leidenschaft für Crêpes</title>
|
||||
<link rel="stylesheet" href="yssa-style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="#leidenschaft">Leidenschaft</a></li>
|
||||
<li><a href="#handwerk">Handwerk</a></li>
|
||||
<li><a href="#franzosisch">Paris</a></li>
|
||||
<li><a href="#rezept">Rezept</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>Crêpes: Leidenschaft, Handwerk und Tradition</h1>
|
||||
<p>Eine Hommage an die französische Küche im Frühling</p>
|
||||
</header>
|
||||
<section class="hero-image">
|
||||
<img src="Nutella-Crepes-500x500.jpg" alt="Frisch gebackene französische Crêpes">
|
||||
</section>
|
||||
<section id="leidenschaft">
|
||||
<h2>Die Leidenschaft für Crêpes</h2>
|
||||
<p>Crêpes sind mehr als nur ein Dessert – sie sind ein Ausdruck von Leidenschaft. In Paris, wo die Straßen nach frisch gebackenen Crêpes duften, wird diese Leidenschaft von Generation zu Generation weitergegeben. Der Moment, wenn der Teig in der Pfanne zischt und der Duft von Butter und Zucker die Luft erfüllt, ist pure Magie.</p>
|
||||
</section>
|
||||
|
||||
<section id="handwerk">
|
||||
<h2>Handwerk und Tradition</h2>
|
||||
<p>Das Handwerk der Crêpes-Herstellung ist eine Kunst, die Präzision und Geduld erfordert. Traditionell werden Crêpes in Frankreich mit einfachen Zutaten zubereitet: Mehl, Eier, Milch und Butter. Die Technik des Schwungs, um den Teig dünn zu verteilen, erfordert Übung und Liebe zum Detail. Diese Tradition verbindet uns mit der französischen Kultur und dem Geist von Paris.</p>
|
||||
</section>
|
||||
|
||||
<section id="franzosisch">
|
||||
<h2>Paris und die französische Seele</h2>
|
||||
<p>Paris im Frühling ist der perfekte Rahmen für Crêpes. Die Stadt erwacht mit blühenden Blumen und milden Temperaturen. Crêpes-Verkäufer säumen die Seine, und der Eiffelturm im Hintergrund symbolisiert die Eleganz Frankreichs. Crêpes sind ein Stück dieser modern-traditionellen Kultur – zeitlos und doch immer frisch.</p>
|
||||
</section>
|
||||
|
||||
<section id="rezept">
|
||||
<h2>Ein einfaches Crêpes-Rezept zum Nachkochen</h2>
|
||||
<h3>Zutaten (für ca. 8 Crêpes):</h3>
|
||||
<ul>
|
||||
<li>200g Mehl</li>
|
||||
<li>2 Eier</li>
|
||||
<li>500ml Milch</li>
|
||||
<li>50g Butter (geschmolzen)</li>
|
||||
<li>1 Prise Salz</li>
|
||||
<li>1 EL Zucker</li>
|
||||
</ul>
|
||||
<h3>Zubereitung:</h3>
|
||||
<ol>
|
||||
<li>Mehl, Salz und Zucker in einer Schüssel vermischen.</li>
|
||||
<li>Eier hinzufügen und verrühren.</li>
|
||||
<li>Langsam die Milch zugießen und rühren, bis ein glatter Teig entsteht.</li>
|
||||
<li>Geschmolzene Butter unterrühren.</li>
|
||||
<li>Teig 30 Minuten ruhen lassen.</li>
|
||||
<li>Eine Pfanne erhitzen, etwas Butter darin schmelzen.</li>
|
||||
<li>Eine Schöpfkelle Teig in die Pfanne geben und schwenken, um einen dünnen Teigfilm zu bilden.</li>
|
||||
<li>1-2 Minuten backen, wenden und weitere Minute backen.</li>
|
||||
<li>Mit Lieblingsbelägen servieren – z.B. Nutella, Obst oder Ahornsirup.</li>
|
||||
</ol>
|
||||
<p>Bon appétit! Genießen Sie Ihre Crêpes im Frühlingssonnenschein.</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Crêpes Leidenschaft. Inspiriert von Paris.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
150
yssa-style.css
150
yssa-style.css
@ -1,150 +0,0 @@
|
||||
/* Grundlayout */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #fff7f9;
|
||||
color: #4a3f3f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #ffd6e0, #ffeef3);
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 10px;
|
||||
color: #c94f7c;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.2rem;
|
||||
color: #7a5a65;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
|
||||
section {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Section Titel */
|
||||
|
||||
section h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: #d45c8c;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
section h3 {
|
||||
margin-top: 25px;
|
||||
color: #b94b76;
|
||||
}
|
||||
|
||||
/* Listen */
|
||||
|
||||
ul, ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Rezeptbereich */
|
||||
|
||||
#rezept {
|
||||
background: #fff0f5;
|
||||
border-left: 6px solid #f6a5c0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
background-color: #ffd6e0;
|
||||
color: #6b4a53;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Hover Effekt für moderne Note */
|
||||
|
||||
section:hover {
|
||||
transform: translateY(-3px);
|
||||
transition: 0.3s ease;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 60px auto;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
height: auto;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.hero-image img:hover {
|
||||
transform: scale(1.02);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
.main-nav {
|
||||
background: white;
|
||||
padding: 15px 0;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.main-nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
text-decoration: none;
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: #c94f7c;
|
||||
font-size: 1.1rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.main-nav a:hover {
|
||||
color: #ff7aa8;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user