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;
  }
  a { color: inherit; text-decoration: none; }

  /* Container */
  .container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    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: 40px;
    font-weight: 300;
  }
  header .user-tools {
    font-size: 13px;
  }

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

  /* Banner */
  .banner {
    width: 100%;
    background: #ccc; /* fallback color */
  }
  .banner img {
    display: block;
    width: 100%;
    height: auto;   /* keep proportions */
  }

  /* Search Row */
  .search-row {
    background: #e9f0eb;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .search-row input[type="search"] {
    padding: 6px 8px;
    border: 1px solid #cbd9c7;
    border-radius: 4px;
    width: 220px;
  }
  .search-row button {
    padding: 6px 10px;
    background: #d5e6cf;
    border: 1px solid #b8d29e;
    border-radius: 4px;
    cursor: pointer;
  }

  /* Layout (sidebars + main) */
  .content-wrapper {
    flex: 1;
    display: flex;
  }

  /* Thin vertical sidebars */
  .sidebar-left,
  .sidebar-right {
    width: 40px;
    background: #9ad17f;
  }

  /* Main Content */
  .main {
    flex: 1;
    padding: 20px;
  }
  .main h1 {
    font-size: 32px;
    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;
    margin-bottom: 14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  }
  .main p.lead {
    max-width: 800px;
    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;
  }

  /* Footer */
  footer.site-footer {
    background: #9ad17f;
    padding: 10px 14px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
  }
  .footer-left { display: flex; gap: 12px; }
  .footer-left a { color: #01310b; text-decoration: none; }
  .subscribe { display: flex; gap: 8px; }
  .subscribe input { padding: 6px 8px; }
  .subscribe button { padding: 6px 10px; cursor: pointer; }

</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>

  <!-- Banner image -->
  <div class="banner">
    <img src="images/banner.jpg" alt="Banner">
  </div>

  <div class="search-row">
    <form>
      <input type="search" placeholder="Search..." />
      <button type="submit">Search</button>
    </form>
  </div>

  <div class="content-wrapper">
    <div class="sidebar-left"></div>

    <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 class="sidebar-right"></div>
  </div>

  <footer class="site-footer">
    <div class="footer-left">
      <a href="#">JOIN OUR COMMUNITIES</a>
      <a href="#">GARDEN TIME</a>
      <a href="#">Request a Catalog</a>
      <a href="#">Buy a Gift Card</a>
    </div>
    <div class="subscribe">
      <span>JOIN OUR EMAIL LIST</span>
      <input type="email" placeholder="Email" />
      <button type="button">Send</button>
    </div>
  </footer>

</div>

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