Project Oostende – One Pager

In deze opdracht maak je een eenvoudige maar verzorgde webpagina (*one pager*) die aansluit bij je Project Oostende. We bouwen verder op de basis-HTML en CSS die we samen hebben geschreven.

Structuur van je project

  • index.html – je webpagina.
  • styles/project_oostende.css – je opmaakbestand.
  • images/ – een mapje voor je afbeeldingen.

Zorg ervoor dat je projectmappen correct zijn georganiseerd. De HTML en CSS staan los van elkaar, zoals het hoort bij goede webontwikkeling.

Startcode

Je vertrekt van de basiscode die je hieronder vindt. De code wordt weergegeven met Prism voor betere leesbaarheid.

HTML – index.html

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Oostende</title>
  <link href="styles/project_oostende.css" rel="stylesheet">
</head>
<body>
  <header>
    <nav aria-label="Hoofdnavigatie">
      <ul>
        <li><a href="#menu_item_1">De dijk</a></li>
        <li><a href="#menu_item_2">Cultuur</a></li>
        <li><a href="#menu_item_3">Street Art</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="menu_item_1">
      <h1>De dijk in Oostende</h1>
      <p>...</p>
    </section>

    <section id="menu_item_2">
      <h2>Culturele hotspots</h2>
      <p>...</p>
    </section>

    <section id="menu_item_3">
      <h2>Street Art in Oostende</h2>
      <p>...</p>
    </section>
  </main>

  <footer>
    <p>© 2025 Project Oostende</p>
  </footer>
</body>
</html>

CSS – styles/project_oostende.css

@charset "utf-8";
/* Basisinstellingen */
html {
  font-family: sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  scroll-behavior: smooth; /* Smooth scrolling naar sections */
}

/* Body styling */
body {
  width: 80vw;
  margin: 0 auto;
  background-color: beige;
  border: thin red solid;
  padding: 1rem;
}

/* Navigatie */
nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0 0 2rem 0;
}

nav ul li a {
  text-decoration: none;
  color: white;
  background-color: rgba(60, 1, 156, 1.00);
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: rgba(9, 25, 56, 1.00);
}

/* Secties */
main section {
  margin-bottom: 4rem;
}

h1, h2 {
  color: rgba(9, 25, 56, 1.00);
  margin-bottom: 0.5rem;
}

p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Afbeeldingen */
img {
  max-width: 100%;
  height: auto;
  margin-top: 1rem;
  border-radius: 8px;
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.875rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ccc;
  color: #666;
}

Wat moet je doen?

  • Voeg minstens 3 sections toe met titels, tekst en afbeeldingen.
  • Maak gebruik van ankers: de menu-items moeten linken naar de juiste sections op de pagina.
  • Voeg een footer toe met bijvoorbeeld copyrightinformatie.
  • Gebruik kleuren en typografie uit je stijlhandleiding Project Oostende.
  • Pas de smooth scrolling toe (de code staat al klaar in de CSS!) zodat klikken op het menu een vloeiende overgang geeft.

Specifieke vereisten

  • Projectmappen correct georganiseerd (index.html, styles/, images/).
  • Verzorgde en consistente vormgeving, afgestemd op je spread en stijlhandleiding.
  • Alle menu-links moeten werken en scrollen naar de juiste plaats op de pagina.
  • Je gebruikt de juiste semantische tags: <header>, <nav>, <main>, <section>, <footer>.

Bonus (optioneel)

  • Voeg een subtiele hover-animatie toe op knoppen of afbeeldingen.
  • Experimenteer met extra kleuren of schaduwen die passen bij je stijl.

Evaluatiecriteria

  • Netheid van de code (inspringing, structuur).
  • Correct gebruik van HTML5 en CSS3.
  • Correct gebruik van projectstructuur en mappen.
  • Functionerende navigatie en smooth scrolling.
  • Vormgeving in lijn met de Project Oostende stijl.

Deze one pager vormt het digitale luik van je Project Oostende. Werk netjes en professioneel, zoals een echte webdesigner!