Appearance
Kapitel 27: Umfassende Projekte
🚀 Lernziel: Wenden Sie das Gelernte in umfassenden Praxisprojekten an.
27.1 Persönliche Blog-Startseite
💡 Projektziel
Erstellen Sie eine persönliche Blog-Startseite mit Header, Blogartikeln und Footer.
🎯 Verwendete CSS-Kenntnisse
- Flexbox/Grid-Layout
- Responsive Design
- Animations
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Persönlicher Blog</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 20px;
text-align: center;
}
/* Blog-Artikel */
.blog-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
.blog-karte {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.blog-karte:hover {
transform: translateY(-10px);
}
.blog-bild {
width: 100%;
height: 200px;
object-fit: cover;
}
.blog-inhalt {
padding: 20px;
}
.blog-titel {
font-size: 20px;
margin-bottom: 10px;
}
/* Footer */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<h1>Mein Persönlicher Blog</h1>
<p>Willkommen auf meiner Webseite!</p>
</header>
<div class="blog-container">
<div class="blog-karte">
<img src="bild1.jpg" alt="Blogbild" class="blog-bild">
<div class="blog-inhalt">
<h3 class="blog-titel">Blogartikel 1</h3>
<p>Dies ist eine Kurzbeschreibung des Blogartikels...</p>
</div>
</div>
<div class="blog-karte">
<img src="bild2.jpg" alt="Blogbild" class="blog-bild">
<div class="blog-inhalt">
<h3 class="blog-titel">Blogartikel 2</h3>
<p>Dies ist eine Kurzbeschreibung des Blogartikels...</p>
</div>
</div>
</div>
<footer>
<p>© 2023 Meín Persönlicher Blog</p>
</footer>
</body>
</html>27.2 Produktanzeigeseite
💡 Projektziel
Erstellen Sie eine Produktanzeigeseite mit Produktkarten.
🎯 Verwendete CSS-Kenntnisse
- Kartenlayout
- Responsive Design
- Icon-Fonts
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Produktanzeige</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.produkt-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
.produkt-karte {
width: 250px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
overflow: hidden;
}
.produkt-bild {
width: 100%;
height: 200px;
object-fit: cover;
}
.produkt-info {
padding: 20px;
}
.produkt-titel {
font-size: 18px;
margin-bottom: 10px;
}
.produkt-preis {
color: #4CAF50;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
.produkt-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
.produkt-button i {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="produkt-container">
<div class="produkt-karte">
<img src="produkt1.jpg" alt="Produkt" class="produkt-bild">
<div class="produkt-info">
<h3 class="produkt-titel">Produktname 1</h3>
<div class="produkt-preis">€29,99</div>
<button class="produkt-button">
<i class="fas fa-shopping-cart"></i> In den Warenkorb
</button>
</div>
</div>
<div class="produkt-karte">
<img src="produkt2.jpg" alt="Produkt" class="produkt-bild">
<div class="produkt-info">
<h3 class="produkt-titel">Produktname 2</h3>
<div class="produkt-preis">€39,99</div>
<button class="produkt-button">
<i class="fas fa-shopping-cart"></i> In den Warenkorb
</button>
</div>
</div>
</div>
</body>
</html>27.3 Login/Registrierungsseite
💡 Projektziel
Erstellen Sie eine Login/Registrierungsseite mit Formular.
🎯 Verwendete CSS-Kenntnisse
- Formularverschönerung
- Zentrierung
- Verlaufshintergrund
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Login/Registrierung</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
width: 350px;
padding: 40px;
background-color: white;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.form-container h2 {
text-align: center;
margin-bottom: 30px;
}
.form-input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.form-input:focus {
border-color: #667eea;
outline: none;
}
.submit-button {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
.form-link {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Login</h2>
<form>
<input type="text" class="form-input" placeholder="Benutzername" required>
<input type="password" class="form-input" placeholder="Passwort" required>
<button type="submit" class="submit-button">Einloggen</button>
</form>
<div class="form-link">
Noch kein Konto? <a href="#">Hier registrieren</a>
</div>
</div>
</body>
</html>27.4 Responsive Navigationsleiste
💡 Projektziel
Erstellen Sie eine responsive Navigationsleiste, die auf Mobilgeräten eingeklappt wird.
🎯 Verwendete CSS-Kenntnisse
- Media Queries
- Flexbox-Layout
- Hamburger-Menü
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigationsleiste</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #333;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: white;
font-size: 24px;
font-weight: bold;
}
.nav-links {
list-style-type: none;
display: flex;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
padding: 8px 16px;
}
.nav-links a:hover {
background-color: #575757;
border-radius: 4px;
}
.hamburger {
display: none;
color: white;
font-size: 24px;
cursor: pointer;
}
/* Media Query für Mobilgeräte */
@media screen and (max-width: 768px) {
.nav-links {
display: none;
width: 100%;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
background-color: #333;
}
.nav-links.active {
display: flex;
}
.nav-links li {
margin: 0;
text-align: center;
}
.nav-links a {
padding: 15px;
display: block;
}
.hamburger {
display: block;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">Meine Webseite</div>
<ul class="nav-links" id="navLinks">
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Dienstleistungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<div class="hamburger" id="hamburger">
☰
</div>
</nav>
<script>
document.getElementById('hamburger').addEventListener('click', function() {
document.getElementById('navLinks').classList.toggle('active');
});
</script>
</body>
</html>27.5 Einfache Portfolio-Seite
💡 Projektziel
Erstellen Sie eine einfache Portfolio-Seite mit Grid-Layout und Animationen.
🎯 Verwendete CSS-Kenntnisse
- Grid-Layout
- Animationen
- Filter-Effekte
📝 Vollständiger Code
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 60px 20px;
}
.portfolio-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.portfolio-bild {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-bild {
transform: scale(1.1);
filter: brightness(0.7);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
</style>
</head>
<body>
<header>
<h1>Mein Portfolio</h1>
<p>Einige meiner Arbeiten</p>
</header>
<div class="portfolio-container">
<div class="portfolio-item">
<img src="projekt1.jpg" alt="Projekt" class="portfolio-bild">
<div class="portfolio-overlay">
<h3>Projekt 1</h3>
<p>Webdesign</p>
</div>
</div>
<div class="portfolio-item">
<img src="projekt2.jpg" alt="Projekt" class="portfolio-bild">
<div class="portfolio-overlay">
<h3>Projekt 2</h3>
<p>Webentwicklung</p>
</div>
</div>
</div>
</body>
</html>✅ Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Persönliche Blog-Startseite - Flexbox/Grid, Responsive, Animationen
- ✅ Produktanzeigeseite - Kartenlayout, Responsive, Icon-Fonts
- ✅ Login/Registrierungsseite - Formular, Zentrierung, Verlauf
- ✅ Responsive Navigationsleiste - Media Queries, Flexbox, Hamburger-Menü
- ✅ Einfache Portfolio-Seite - Grid, Animationen, Filter
🎯 Übung
Übung 1: Erstellen Sie eine persönliche Blog-Startseite.
Übung 2: Erstellen Sie eine Produktanzeigeseite.
Übung 3: Erstellen Sie eine responsive Navigationsleiste.
📚 Nächstes Kapitel
Im nächsten Kapitel lernen wir CSS+JS-Kombination (CSS+JS Kombination), um interaktive Effekte zu erstellen.
[Weiter zu Kapitel 28: CSS+JS Kombination →]