Overerving

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Toneelkring Doek Open</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Doek Open</h1>11      <p class="slogan">Toneelkring uit Geel, sinds 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="actief"><a href="affiche.html">Affiche</a></li>16          <li><a href="lid-worden.html">Lid worden</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="affiche">23        <h2>Op de affiche</h2>24        <article class="stuk">25          <h3>De Vrek</h3>26          <p class="datum">14 tot 16 maart</p>27          <p>Een klucht naar <a href="https://nl.wikipedia.org/wiki/Molière">Molière</a>, over een man die zijn geld liever ziet dan zijn kinderen.</p>28          <blockquote>29            <p>Ik heb in jaren niet zo gelachen.</p>30          </blockquote>31          <a class="knop" href="https://tickets.doekopen.example/vrek">Tickets</a>32        </article>33        <article class="stuk">34          <h3>Moord in de Pastorij</h3>35          <p class="datum">9 tot 11 mei</p>36          <p>Iedereen heeft een alibi, behalve de kat.</p>37          <a class="knop" href="https://tickets.doekopen.example/pastorij">Tickets</a>38        </article>39      </section>40      <section id="speeldata">41        <h2>Speeldata</h2>42        <table>43          <tr>44            <th>Dag</th>45            <th>Uur</th>46          </tr>47          <tr>48            <td>Vrijdag 14 maart</td>49            <td>20 uur</td>50          </tr>51          <tr>52            <td>Zaterdag 15 maart</td>53            <td>20 uur</td>54          </tr>55          <tr>56            <td>Zondag 16 maart</td>57            <td>15 uur</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>Om te lezen</h2>63        <ul>64          <li><a href="programma.pdf">Het programmaboekje</a></li>65          <li><a href="reglement.pdf">Het reglement</a></li>66          <li><a href="https://nl.wikipedia.org/wiki/De_vrek">Over De Vrek</a></li>67          <li><a href="mailto:kassa@doekopen.example">Mail de kassa</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>Zaal De Kroon, Kerkstraat 21, Geel</p>73    </footer>74  </body>75</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fbf6ee;5  color: #2b1d1d;6}7header {8  padding: 20px 16px 14px;9  background: #5c1515;10  color: #f5e6c8;11}12header h1 {13  margin: 0;14}15.slogan {16  margin: 4px 0 12px;17}18#menu ul {19  display: flex;20  flex-wrap: wrap;21  gap: 4px 18px;22  margin: 0;23  padding: 0;24  list-style: none;25}26#menu a {27  color: #f5e6c8;28}29main {30  padding: 8px 16px 24px;31}32h2 {33  color: #7a1c1c;34}35a {36  color: #7a1c1c;37}38.stuk {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.stuk h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.knop {53  display: inline-block;54  padding: 6px 16px;55  border-radius: 999px;56  background-color: #7a1c1c;57  color: #ffffff;58  text-decoration: none;59}60table {61  border-collapse: collapse;62}63th,64td {65  padding: 6px 10px;66  border: 1px solid #e6d3c3;67  text-align: left;68}69footer {70  padding: 12px 16px;71  background: #5c1515;72  color: #f5e6c8;73}