<!DOCTYPE html>

<html lang="de">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Anton Roos - Filmkomponist</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

header {

background-color: #333;

color: #fff;

text-align: center;

padding: 100px 0;

}

header h1 {

margin: 0;

font-size: 4em;

}

header p {

margin: 10px 0 0;

font-size: 1.5em;

}

section.portfolio {

padding: 50px 20px;

background-color: #fff;

text-align: center;

}

.portfolio h2 {

margin: 0;

font-size: 2.5em;

}

.portfolio-item {

margin: 20px;

display: inline-block;

width: 300px;

background-color: #f4f4f4;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.portfolio-item img {

width: 100%;

height: auto;

}

.portfolio-item h3 {

margin: 0;

padding: 10px;

font-size: 1.2em;

background-color: #333;

color: #fff;

}

.portfolio-item p {

padding: 10px;

font-size: 1em;

color: #333;

}

</style>

</head>

<body>

<header>

<h1>Anton Roos</h1>

<p>Komponist für Film- und Fernsehmusik</p>

</header>

<section class="portfolio">

<h2>Portfolio</h2>

<div class="portfolio-item">

<img src="dein-bild1.jpg" alt="Projekt 1">

<h3>Projekt 1</h3>

<p>Beschreibung des Projekts 1</p>

</div>

<div class="portfolio-item">

<img src="dein-bild2.jpg" alt="Projekt 2">

<h3>Projekt 2</h3>

<p>Beschreibung des Projekts 2</p>

</div>

<div class="portfolio-item">

<img src="dein-bild3.jpg" alt="Projekt 3">

<h3>Projekt 3</h3>

<p>Beschreibung des Projekts 3</p>

</div>

</section>

</body>

</html>