account.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hobby Hub — Account</title>
  <link rel="stylesheet" href="account_style.css">
</head>
<body>

  <!-- TOP BAR  using the same as recent html-->
  <header class="topbar">
    <div class="topbar-inner">
      <!-- Left Logo -->
      <a class="brand" href="forum.html">
        <img src="picture/logo.png" alt="Hobby Hub logo" class="logo-img">
      </a>

      <!-- search -->
      <form class="search" role="search" aria-label="Site search" onsubmit="event.preventDefault();">
        <input type="search" placeholder="Search" aria-label="Search" />
        <button type="submit" aria-label="Search" class="search-btn">Search</button>
      </form>

     
      <div class="actions">
        <a href="account.html" class="action-btn" aria-label="Account">
          <img src="icon/user_icon.png" alt="" class="icon-dark-img">
        </a>
        <a href="shopping.html" class="action-btn" aria-label="Cart">
          <img src="icon/cart_icon.png" alt="" class="icon-dark-img">
        </a>
      </div>
    </div>
  </header>

  <!-- BOTTOM NAV -->
  <nav class="nav" aria-label="Main">
    <div class="nav-inner">
      <a href="#">HOME</a>
      <a href="forum.html">FORUM</a>
      <a href="blog.html">BLOG</a>
      <a href="product_review.html">PRODUCT REVIEW</a>
    </div>
  </nav>

  <!-- PAGE -->
  <main class="page">
    <h1 class="auth-title">Login or Register</h1>

    <div class="auth-grid">
      <!-- Login -->
      <section class="panel">
        <h2 class="panel-head">Login</h2>
        <p class="muted small">Welcome to your account.</p>

        <form class="form" onsubmit="event.preventDefault();">
          <label class="label">Email Address*</label>
          <input class="input" type="email" placeholder="abd@gmail.com" required>

          <label class="label">Password*</label>
          <input class="input" type="password" placeholder="**********" required>

          <button class="btn primary w-160" type="submit">Login</button>

          <p class="hint">
            <a class="link" href="forgot.html">Forgot your password?</a>
            <span class="sep">/</span>
            <a class="link" href="shopping.html">Return to store</a>
          </p>
        </form>
      </section>

      <!-- Register -->
      <section class="panel">
        <h2 class="panel-head">Create A New Account</h2>
        <p class="subhead">Account information</p>

        <form class="form" onsubmit="event.preventDefault();">
          <label class="label">First Name*</label>
          <input class="input" type="text" placeholder="John" required>

          <label class="label">Last Name*</label>
          <input class="input" type="text" placeholder="Smith" required>

          <label class="label">Email Address*</label>
          <input class="input" type="email" placeholder="abd@gmail.com" required>

          <label class="label">Password*</label>
          <input class="input" type="password" placeholder="**********" required>

          <a href="register.html" class="btn primary w-200">Create an account</a>
        </form>
      </section>
    </div>
  </main>

  <!-- FOOTER -->
  <footer class="site-footer">
    <div class="footer-top">
      <div class="col brand-col">
        <div class="brand-row">
          <img src="picture/logo.png" alt="Hobby Hub" class="footer-logo">
          <div class="brand-name">Hobby Hub</div>
        </div>
        <p>Hobby Hub has been proudly servicing our dedicated customers all over Melbourne, Australia.</p>
      </div>

      <div class="col links-col">
        <h4>Quick Links</h4>
        <ul class="footer-list">
          <li>Home</li>
          <li>About Us</li>
          <li>Services</li>
          <li>Contact Us</li>
        </ul>
      </div>

      <div class="col contact-col">
        <h4>Contact &amp; Support</h4>
        <p>650 Lonsdale St, Melbourne VIC 3000,<br>Australia</p>
        <p>(+61) 429 482 916</p>
        <p>support@hobbyhub.com</p>
        <p>Mon–Fri: 9AM–5PM</p>
      </div>
    </div>

    <div class="rule"></div>

    <div class="footer-bottom">
      <div class="copy">© 2025 HobbyHub. All rights reserved.</div>
      <div class="legal">
        <span>Privacy Policy</span>
        <span>Terms of Service</span>
        <span>Cookie Policy</span>
        <span>Accessibility</span>
      </div>
    </div>
  </footer>
</body>
</html>