Als ik de website volg dan komt er niks daarnaast wil ik het zonder javascript.
De map moet boven het contactformulier over de gehele breedte.
Kan iemand mij helpen?
** niet relevant linkje verwijderd **
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Roadtrippy</title>
<link rel="stylesheet" href="layout.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script defer src="js/script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=JOUW_API_SLEUTEL&callback=initMap" async defer></script>
</head>
<body>
<header>
<div class="logo">
<img src="Media/Logo.png" alt="Roadtrippy Logo" width="128" height="128">
<h1>Roadtrippy</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="roadtrips.html">Roadtrips</a>
<ul class="submenu">
<li><a href="locaties.html">Locaties</a></li>
<li><a href="tips.html">Tips</a></li>
</ul>
</li>
<li><a href="tips.html">Huren</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
</ul>
</nav>
</header>
<!-- Google Maps API -->
<section class="map-container">
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</section>
<main>
<section class="contact-form">
<h2>Neem contact met ons op</h2>
<form action="https://jkorpela.fi/cgi-bin/echo.cgi" method="post">
<label for="name">Naam *</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail *</label>
<input type="email" id="email" name="email" required>
<label for="phone">Telefoonnummer</label>
<input type="tel" id="phone" name="phone">
<label for="message">Bericht *</label>
<textarea id="message" name="message" required></textarea>
<p id="demo" style="display:none">Bedankt voor je vraag.</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Verstuur</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Roadtrippy. Alle rechten voorbehouden.</p>
</footer>
</body>
</html>
