<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aysha's Webmaps</title>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
/* Reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #111; background: #fff; }

/* Navbar */
.topnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4vw;
  background: white;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.brand { font-weight: 700; color: #111; letter-spacing: 0.2px; }
.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-actions a {
  text-decoration: none;
  background: #5aa9ff;
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.nav-actions a:hover { opacity: 0.92; }

/* Hero */
.hero {
  background-color: #e9ffe9; /* light green */
  padding: 80px 20px;
  text-align: center;
}
.hero h1 { font-size: clamp(36px,6vw,72px); font-weight: 700; margin-bottom: 8px; color: #111; }
.hero p { font-size: clamp(16px,2.4vw,22px); color: #333; font-weight: 500; }

/* Cards */
.card {
  width: min(1100px, 92vw);
  margin: 28px auto;
  padding: clamp(18px,3vw,26px);
  background-color: #d0e7ff; /* light blue */
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  text-align: center;
}

/* Feature blocks */
.feature {
  width: min(1200px, 92vw);
  margin: 38px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px,3vw,36px);
  align-items: center;
  padding: clamp(16px,2vw,22px);
  background-color: #d0e7ff; /* light blue */
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.feature:nth-of-type(even) .feature-media { order: 2; }
.feature:nth-of-type(even) .feature-text { order: 1; }
.feature-media img { width: 100%; height: clamp(220px,30vw,380px); object-fit: cover; border-radius: 12px; }
.feature h2 { text-align: center; margin-bottom: 10px; }
.feature p { text-align: left; }

/* Footer */
.site-footer {
  margin-top: 48px;
  padding: 28px 4vw 34px;
  background: #f7faf7;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.site-footer h3 { margin-bottom: 6px; }
.site-footer a { color: #5aa9ff; text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature:nth-of-type(even) .feature-media,
  .feature:nth-of-type(even) .feature-text { order: unset; }
  .site-footer { grid-template-columns: 1fr; }
  .nav-actions { flex-direction: column; gap: 8px; }
}
</style>

</head>
<body>

<!-- Navbar -->
<nav class="topnav">
  <a class="brand" href="#">Aysha's Maps</a>
  <div class="nav-actions">
    <a href="#">Home</a>
    <a href="#">Map 1</a>
    <a href="#">Map 2</a>
    <a href="#">Map 3</a>
    <a href="#">Map 4</a>
  </div>
</nav>

<!-- Hero -->
<header class="hero">
  <h1>Aysha's Webmaps</h1>
  <p>View different webmaps.</p>
</header>

<main>
  <!-- Intro Card -->
  <section class="card">
    <h2>Webmaps</h2>
    <p>This site will show you different maps that might be useful or interesting for you to use in the future.</p>
  </section>

  <!-- Example Feature -->
  <section class="feature">
    <div class="feature-text">
      <h2>Feature 1</h2>
      <p>Description for the first feature of the webmaps site.</p>
    </div>
    <div class="feature-media">
      <img src="https://via.placeholder.com/400x250" alt="Feature 1 image">
    </div>
  </section>
</main>

<!-- Footer -->
<footer class="site-footer">
  <div>
    <h3>Contact Me</h3>
    <p>Email: <a href="mailto:GOO472830@atu.ie">GOO472830@atu.ie</a></p>
  </div>
  <div>
    <h3>About</h3>
    <p>This site was created by Aysha to display useful webmaps.</p>
  </div>
</footer>

</body>
</html>

