Compare commits
20 Commits
main
...
feature-am
| Author | SHA1 | Date | |
|---|---|---|---|
|
ae6cbd9bc6 | ||
| 090d4f14c6 | |||
| 3599826f4c | |||
| e14f69f45c | |||
| 0298124d01 | |||
|
|
f8d3855e65 | ||
| 0a2eb9b99b | |||
| e8c560ecc7 | |||
| 6ee171fbc6 | |||
| f39b0c6269 | |||
|
|
dd964647fe | ||
|
|
c58a585867 | ||
|
|
bb25347833 | ||
| c14ba3722e | |||
| e6c372b6ea | |||
| 30dceac76e | |||
| 3a15bb3ba5 | |||
|
|
9f8ba1bef3 | ||
| 9dfb016e6b | |||
| 978ab171b7 |
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>
|
||||||
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";
|
||||||
|
}
|
||||||
|
}
|
||||||
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; }
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user