l105/PO Informatica P4/specialiteitenslager.php

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { font-family: Arial, sans-serif; background-color: #FFD700; background: url('images/achtergrondslager.jpeg') no-repeat center center fixed; background-size: cover; margin: 0; padding: 0; } .omslag { width: 80%; margin: auto; overflow: hidden; } .balk { display: none; /* gele balk weghalen background: #FFD700; color: #000; padding-top: 30px; min-height: 70px; */ } .balk a { color: #000; text-decoration: none; text-transform: uppercase; font-size: 16px; } #main { padding: 20px; background: #fff; margin-top: 10px; } .specialiteiten{ margin-bottom: 20px; } .specialiteiten-content{ display: flex; align-items: flex-start; font-size: 18px; text-align: left; margin-top: 10px; } .specialiteiten h2 { color: #333; margin-top: 0 } .specialiteiten p { line-height: 1.6; flex: 1; margin: 0 20px; } .specialiteiten img { max-width: 30%; height: auto; } .specialiteiten-onder { text-align: center; color: #000; font-size: 24px; margin: 20px 0; } /* BELANGRIJK! ovreral bij historie en specialiteiten nog menubalk erboven toevoegen.*/ </style> </head> <body> <div class="balk"> <div class="omslag"> </div> </div> <div id="main" class="omslag"> <div class="specialiteiten-onder"> <h1>Specialiteiten - De Keurslager van Ot & Okke</h1> </div> <div id="main" class="omslag"> <?php // deze div id = main kan weg dan moet ik ff extra div doen maar // geen zin nu in want alles werkt.?> <div class="specialiteiten"> <h2>Spareribs</h2> <div> <div class="specialiteiten-content"> <img src="images/Spareribs.jpeg" alt="Spareribs"> <p> Onze spareribs worden langzaam gegaard en gemarineerd met een geheime mix van kruiden en specerijen, waardoor ze heerlijk sappig en vol van smaak zijn. Perfect voor op de barbecue of uit de oven. </p> </div> </div> </div> <div class="specialiteiten"> <h2>Dry Aged Ribeye</h2> <div> <div class="specialiteiten-content"> <img src="images/dry-aged-ribeye-steak.jpg" alt="Dry Aged Ribeye"> <p> Deze ribeye steak is 28 dagen gerijpt voor een intensere smaak en malsheid. Het vlees komt van lokale runderen die op een natuurlijke manier zijn grootgebracht. Een echte delicatesse voor de fijnproever. </p> </div> </div> <div class="specialiteiten"> <h2>Ambachtelijke Worst</h2> <div> <div class="specialiteiten-content"> <img src="images/ambachtelijkeworst.jpeg" alt="Ambachtelijke Worst"> <p> Onze ambachtelijke worst is gemaakt volgens een traditioneel familierecept. Gemaakt van het beste vlees en zorgvuldig geselecteerde kruiden, biedt deze worst een unieke smaakervaring. Heerlijk op een broodje of bij de borrel. </p> </div> </div> <div class="specialiteiten"> <h2>Gerookte Ham</h2> <div> <div class="specialiteiten-content"> <img src="images/gerookte-rauwe-ham.jpg" alt="Gerookte Ham"> <p> Onze gerookte ham is langzaam gerookt op beukenhout, wat zorgt voor een subtiele rooksmaak en een delicate textuur. Perfect voor op brood, bij een salade, of als onderdeel van een feestelijke schotel. </p> </div> </div> </body> </html>

Resultaat

Made by Thijs Aarnoudse