Untitled

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Green Gardens — Vegetable Seeds and Plants</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background:#fff; /* no dark blue background */
  }
  a { color: inherit; text-decoration: none; }

  /* Container with background image */
  .container {
    max-width: 1120px;
    margin: 28px auto;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    background: url("images/background.jpg") no-repeat center center;
    background-size: cover;
  }

  /* Header */
  header.site-header {
    background: #2f8b3a;
    color: #fff;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header .brand {
    font-size: 48px;
    font-weight: 300;
  }
  header .user-tools {
    text-align: right;
    font-size: 13px;
  }

  /* Navigation */
  nav.main-nav {
    display:flex;
    gap:12px;
    padding:14px 18px;
  }
  nav.main-nav a {
    background: #9ad17f;
    padding:12px 18px;
    border-radius:2px;
    color:#fff;
    font-weight:600;
    font-size:15px;
  }
  nav.main-nav a:hover {
    text-decoration: underline;
    background:#7ab15f;
  }

  /* Layout */
  .content {
    display:flex;
    gap: 24px;
    padding: 20px 28px 28px 28px;
  }

  /* Sidebar */
  .sidebar {
    width:150px;   /* thinner sidebar */
    font-size:15px;
  }
  .sidebar h3{
    color:#2f8b3a;
    margin-bottom:8px;
    font-size:14px;
  }
  .sidebar ul{
    list-style: none;
    padding-left: 0;
  }
  .sidebar li {
    margin:6px 0;
  }
  .sidebar a {
    color:#2f8b3a;       /* green text */
  }
  .sidebar a:hover {
    color:blue;          /* hover turns blue + underline */
    text-decoration: underline;
  }

  /* Main column */
  .main {
    flex: 1;
  }
  .main h1 {
    font-size:36px;
    text-align:center;
    margin-bottom:6px;
    color:#fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  }
  .main h2 {
    text-align:center;
    font-size:18px;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  }
  .main p.lead {
    max-width:820px;
    margin: 0 auto 20px auto;
    text-align:left;
    color:#fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  }

  /* Gallery */
  .gallery {
    display:flex;
    gap:18px;
    justify-content:center;
    margin-top:18px;
  }
  .card {
    width:180px;
    text-align:center;
  }
  .card svg {
    width:100%;
    height:150px;
    border:1px solid #e3e3e3;
    background:#fff;
  }
  .card .caption {
    font-size:13px;
    margin-top:8px;
    color:#000; /* black captions */
  }

</style>
</head>
<body>

<div class="container">

  <header class="site-header">
    <div class="brand">Green Gardens</div>
    <div class="user-tools">REGISTER | SIGN IN</div>
  </header>

  <nav class="main-nav">
    <a href="#">Vegetables</a>
    <a href="#">Flowers</a>
    <a href="#">Perennials</a>
    <a href="#">Herbs</a>
    <a href="#">Fruit</a>
    <a href="#">Organics</a>
    <a href="#">Supplies</a>
    <a href="#">Advice</a>
  </nav>

  <div class="content">
    <aside class="sidebar">
      <h3>Vegetables</h3>
      <ul>
        <li><a href="#">Artichoke</a></li>
        <li><a href="#">Asparagus</a></li>
        <li><a href="#">Beans</a></li>
        <li><a href="#">Beets</a></li>
        <li><a href="#">Broccoli</a></li>
        <li><a href="#">Brussels Sprouts</a></li>
        <li><a href="#">Cantaloupe</a></li>
        <li><a href="#">Carrots</a></li>
        <li><a href="#">Corn</a></li>
        <li><a href="#">Cucumbers</a></li>
        <li><a href="#">Eggplants</a></li>
        <li><a href="#">Garlic</a></li>
      </ul>
    </aside>

    <main class="main">
      <h1>Vegetable Seeds and Plants</h1>
      <h2>Nothing Compares to Home Grown</h2>
      <p class="lead">
        Shop and grow vegetable seeds and plants perfect for your home garden. Prize winning tomatoes, peppers, beans and heirloom vegetables from Green Gardens.
      </p>
      <div class="gallery">
        <div class="card"><svg><rect width="100%" height="100%" fill="#c03a36"/></svg><div class="caption">Exclusive Vegetables</div></div>
        <div class="card"><svg><rect width="100%" height="100%" fill="#2d7d3a"/></svg><div class="caption">Favourite Vegetables</div></div>
        <div class="card"><svg><rect width="100%" height="100%" fill="#2b2230"/></svg><div class="caption">Gourmet Vegetables</div></div>
        <div class="card"><svg><rect width="100%" height="100%" fill="#da5740"/></svg><div class="caption">New Vegetables</div></div>
      </div>
    </main>
  </div>

</div>

</body>
</html>
Editor is loading...