checkout.html

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

  <!-- TOP BAR -->
  <header class="topbar">
    <div class="topbar-inner">
      <!-- Left Logo -->
      <a class="brand" href="#">
        <img src="picture/logo.png" alt="Hobby Hub logo" class="logo-img">
      </a>

      <!-- Center 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>
        <button class="action-btn" aria-label="Cart">
          <img src="icon/cart_icon.png" alt="Cart" class="icon-dark-img">
        </button>
      </div>
    </div>
  </header>
      

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

<title>Checkout Page</title>
  <div class="container">
    <div class="left">
      <h2>Contact</h2>
      <input type="email" placeholder="Email" value="abd@gmail.com">

       <h2>Delivery method</h2>
      <label><input type="radio" name="delivery" checked> Ship</label>
      <label><input type="radio" name="delivery"> Pick up</label>
      
      <h2>Shipping address</h2>
      <select>
        <option>Australia</option>
        <option>New Zealand</option>
        <option>Viet Nam</option>
        <option>Germany</option>
        <option>United State Of America</option>
        <option>United Kingdom</option>
      </select>
      <input type="text" placeholder="First Name" value="Join">
      <input type="text" placeholder="Last Name" value="Smith">
      <input type="text" placeholder="Address" value="124 La Trobe St, Melbourne VIC 3000">
      <input type="text" placeholder="Apartment, suite, etc. (optional)">
      <input type="text" placeholder="City" value="Melbourne">
      <select>
        <option>VIC</option>
        <option>WA</option>
        <option>QLD</option>
        <option>TAS</option>
        <option>SA</option>
      </select>
      <input type="text" placeholder="Postal Code" value="3000">
      <input type="text" placeholder="Phone" value="(03) 9663 3536">
      <a href="creditcardpayment.html" class="btn-red">Continue to Checkout</a>
    </div>

    <!-- RIGHT SECTION -->
    <div class="right-section">
      <div class="order-summary">
        <img src="picture/unicorn.png" alt="RG 1/144 RX-0 Unicorn Gundam" />
        <p><strong>RG 1/144 RX-0 Unicorn Gundam</strong></p>
        <p>$79.99</p>

        <form class="discount-code">
          <input type="text" placeholder="Discount code or gift card" />
           <button>Apply</button>
        </form>

        <div class="summary-item">Subtotal: <span>$79.99</span></div>
        <div class="summary-item">Shipping: <span>$9.99</span></div>
        <div class="total">Total: AUD $89.98</div>
        <p style="font-size: 13px; color: var(--muted); margin-top: 6px;">Including 10% in taxes</p>
      </div>
    </div>
  </div>
  <footer class="site-footer">
  <div class="footer-top">
    <!-- Left branding  -->
    <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>

    <!-- Mid links  -->
    <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>

    <!-- Right contact -->
    <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>