42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CSS Box-Modell & Abstände</title>
|
|
<style>
|
|
/* 🎯 TEILZIEL 1: Universeller Box-Sizing Reset auf *, *::before, *::after mit box-sizing: border-box */
|
|
|
|
|
|
/* 🎯 TEILZIEL 2: Container .card-container mit max-width (z.B. 600px), horizontaler Zentrierung (margin: 0 auto) und padding stylen */
|
|
|
|
|
|
/* 🎯 TEILZIEL 3: .profile-card mit padding, border (z.B. 1px solid #cbd5e1), border-radius (z.B. 12px) und background-color formatieren */
|
|
|
|
|
|
/* 🎯 TEILZIEL 4: Überschrift h2 und Textabsatz p in der Card mit margin-bottom versehen */
|
|
|
|
|
|
/* 🎯 TEILZIEL 5: .skill-badge mit display: inline-block, padding (z.B. 4px 10px), margin-right (z.B. 6px), background-color und border-radius gestalten */
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card-container">
|
|
<div class="profile-card">
|
|
<h2>Sarah Schneider</h2>
|
|
<p>Senior Frontend & UI-Architektin mit Leidenschaft für barrierefreie Web-Erlebnisse.</p>
|
|
|
|
<div class="skills">
|
|
<span class="skill-badge">HTML5</span>
|
|
<span class="skill-badge">CSS3</span>
|
|
<span class="skill-badge">UI/UX</span>
|
|
<span class="skill-badge">Accessibility</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|