How to Bypass Proctorio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>EssayPro Style Training Site</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

  <!-- Bootstrap 5 CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />

  <!-- Bootstrap Icons -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
  />

  <style>
    :root {
      --ep-primary: #2563eb;   /* blue */
      --ep-accent:  #f97316;   /* orange */
      --ep-dark:    #0f172a;
      --ep-muted:   #64748b;
      --ep-bg-soft: #f9fafb;
    }

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ep-dark);
      background-color: white;
    }

    .navbar {
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    .navbar-brand span {
      font-weight: 700;
      font-size: 1.25rem;
    }

    .btn-primary {
      background-color: var(--ep-primary);
      border-color: var(--ep-primary);
    }
    .btn-primary:hover {
      background-color: #1d4ed8;
      border-color: #1d4ed8;
    }

    .btn-accent {
      background-color: var(--ep-accent);
      border-color: var(--ep-accent);
      color: #fff;
    }
    .btn-accent:hover {
      background-color: #ea580c;
      border-color: #ea580c;
      color: #fff;
    }

    .hero {
      background: radial-gradient(circle at top left, #e0f2fe 0, transparent 50%),
                  radial-gradient(circle at bottom right, #ffedd5 0, transparent 55%);
      padding-top: 6rem;
      padding-bottom: 4rem;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 999px;
      padding: 0.25rem 0.75rem;
      background-color: rgba(37, 99, 235, 0.06);
      color: var(--ep-primary);
      font-weight: 500;
      font-size: 0.85rem;
    }

    .hero-title {
      font-size: clamp(2.3rem, 3vw + 1rem, 3rem);
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .hero-subtitle {
      color: var(--ep-muted);
      max-width: 34rem;
    }

    .hero-card {
      background-color: #fff;
      border-radius: 1.5rem;
      box-shadow: 0 22px 45px rgba(15, 23, 42, 0.1);
      padding: 1.75rem;
    }

    .stat-chip {
      border-radius: 1rem;
      padding: 0.75rem 1rem;
      background-color: #fff;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .section-title {
      font-weight: 700;
      font-size: 1.9rem;
      letter-spacing: -0.03em;
    }

    .section-subtitle {
      color: var(--ep-muted);
      max-width: 32rem;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.3rem 0.9rem;
      border-radius: 999px;
      font-size: 0.8rem;
      background-color: #eff6ff;
      color: #1d4ed8;
    }

    .writer-card {
      border-radius: 1.25rem;
      border: 1px solid #e2e8f0;
      padding: 1.25rem;
      height: 100%;
      background: #fff;
      transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    }

    .writer-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
      border-color: rgba(37, 99, 235, 0.3);
    }

    .writer-avatar {
      width: 56px;
      height: 56px;
      border-radius: 999px;
      background: linear-gradient(135deg, #2563eb, #f97316);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 600;
      font-size: 1.1rem;
    }

    .how-step {
      border-radius: 1.25rem;
      padding: 1.5rem;
      background-color: #fff;
      border: 1px solid #e2e8f0;
      height: 100%;
    }

    .how-step-number {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background-color: #eff6ff;
      color: var(--ep-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .benefit-icon {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background-color: #eff6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.75rem;
      color: var(--ep-primary);
    }

    .testimonial {
      border-radius: 1.5rem;
      background-color: #0f172a;
      color: #e5e7eb;
      padding: 2rem;
      position: relative;
      overflow: hidden;
    }

    .testimonial::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.08), transparent 60%);
      pointer-events: none;
    }

    .testimonial-quote {
      font-size: 1.05rem;
    }

    .faq-section {
      background-color: var(--ep-bg-soft);
    }

    footer {
      background-color: #020617;
      color: #9ca3af;
      padding: 2.5rem 0 1.5rem;
    }

    footer a {
      color: #e5e7eb;
      text-decoration: none;
      font-size: 0.9rem;
    }
    footer a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg bg-white sticky-top">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center gap-2" href="#">
      <div class="rounded-circle d-flex align-items-center justify-content-center"
           style="width:32px;height:32px;background:linear-gradient(135deg,#2563eb,#f97316);color:#fff;font-weight:700;">
        EP
      </div>
      <span>EssayProLab</span>
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
        <li class="nav-item"><a class="nav-link" href="#how">How it works</a></li>
        <li class="nav-item"><a class="nav-link" href="#writers">Writers</a></li>
        <li class="nav-item"><a class="nav-link" href="#benefits">Benefits</a></li>
        <li class="nav-item me-lg-3"><a class="nav-link" href="#faq">FAQ</a></li>
        <li class="nav-item me-2">
          <a class="btn btn-outline-primary rounded-pill px-3 py-1" href="#">Log in</a>
        </li>
        <li class="nav-item">
          <a class="btn btn-primary rounded-pill px-3 py-1" href="#order">Order now</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-6">
        <div class="hero-badge mb-3">
          <i class="bi bi-stars"></i>
          <span>Training clone • Essay-style UI</span>
        </div>
        <h1 class="hero-title mb-3">
          From idea to A-grade: essay help that feels effortless.
        </h1>
        <p class="hero-subtitle mb-4">
          Practice building a modern essay-service landing page with clean layout,
          powerful CTAs, and conversion-focused UX — inspired by EssayPro’s design.
        </p>

        <div class="d-flex flex-wrap gap-3 mb-4">
          <a href="#order" class="btn btn-primary btn-lg rounded-pill px-4">
            <i class="bi bi-lightning-charge-fill me-1"></i>
            Start your order
          </a>
          <a href="#how" class="btn btn-outline-secondary rounded-pill px-4">
            View how it works
          </a>
        </div>

        <div class="d-flex flex-wrap gap-3">
          <div class="stat-chip">
            <i class="bi bi-star-fill"></i>
            <div>
              <div class="fw-semibold">4.9/5 average rating</div>
              <small class="text-muted">Based on 10,000+ training orders</small>
            </div>
          </div>
          <div class="stat-chip">
            <i class="bi bi-shield-check"></i>
            <div>
              <div class="fw-semibold">100% human-written</div>
              <small class="text-muted">No AI plagiarism, just practice UI</small>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-5 offset-lg-1">
        <div class="hero-card" id="order">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
              <h5 class="mb-1">Quick order preview</h5>
              <small class="text-muted">Simulate the EssayPro style order form.</small>
            </div>
            <span class="badge text-bg-light">
              <i class="bi bi-clock me-1"></i> From 3 hours
            </span>
          </div>

          <form>
            <div class="mb-3">
              <label class="form-label">Paper type</label>
              <select class="form-select">
                <option>Essay (any type)</option>
                <option>Research paper</option>
                <option>Term paper</option>
                <option>Admission essay</option>
              </select>
            </div>
            <div class="row g-3">
              <div class="col-6">
                <label class="form-label">Deadline</label>
                <select class="form-select">
                  <option>14 days</option>
                  <option>7 days</option>
                  <option>3 days</option>
                  <option>24 hours</option>
                  <option>3 hours</option>
                </select>
              </div>
              <div class="col-6">
                <label class="form-label">Pages</label>
                <select class="form-select">
                  <option>1 page / 275 words</option>
                  <option>2 pages</option>
                  <option>3 pages</option>
                  <option>5 pages</option>
                </select>
              </div>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-4 mb-3">
              <div>
                <small class="text-muted">Approx. price</small>
                <div class="fs-4 fw-semibold">$18.00</div>
              </div>
              <button type="submit" class="btn btn-accent rounded-pill px-4">
                Continue &gt;
              </button>
            </div>

            <div class="d-flex align-items-center gap-2">
              <i class="bi bi-lock-fill text-success"></i>
              <small class="text-muted">
                Secure checkout • No real orders here — training only.
              </small>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- WRITERS -->
<section class="py-5" id="writers">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end mb-4 flex-wrap gap-3">
      <div>
        <div class="pill mb-2">
          <i class="bi bi-people-fill"></i>
          <span>Top writers demo</span>
        </div>
        <h2 class="section-title mb-2">Expert writers in every subject.</h2>
        <p class="section-subtitle mb-0">
          Recreate EssayPro’s card-based writer gallery with clear stats,
          badges, and micro-copy that builds trust.
        </p>
      </div>
      <a href="#" class="btn btn-outline-primary rounded-pill">
        Browse all writers
      </a>
    </div>

    <div class="row g-4">
      <!-- Writer 1 -->
      <div class="col-md-6 col-lg-3">
        <article class="writer-card">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="writer-avatar">SM</div>
            <div>
              <div class="fw-semibold">Sarah M.</div>
              <small class="text-muted">Master’s • Business & Management</small>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-3 mb-3">
            <div>
              <small class="text-muted d-block">Rating</small>
              <span class="fw-semibold"><i class="bi bi-star-fill text-warning me-1"></i>4.9</span>
            </div>
            <div>
              <small class="text-muted d-block">Success</small>
              <span class="fw-semibold">99%</span>
            </div>
            <div>
              <small class="text-muted d-block">Repeat hire</small>
              <span class="fw-semibold">42%</span>
            </div>
          </div>
          <p class="small text-muted mb-3">
            Specializes in marketing plans, SWOT analyses, and case studies
            with clear structure and strong references.
          </p>
          <button class="btn btn-outline-secondary btn-sm rounded-pill w-100">
            Hire writer
          </button>
        </article>
      </div>

      <!-- Writer 2 -->
      <div class="col-md-6 col-lg-3">
        <article class="writer-card">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="writer-avatar">DN</div>
            <div>
              <div class="fw-semibold">Daniel N.</div>
              <small class="text-muted">Bachelor’s • Nursing & Healthcare</small>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-3 mb-3">
            <div>
              <small class="text-muted d-block">Rating</small>
              <span class="fw-semibold"><i class="bi bi-star-fill text-warning me-1"></i>5.0</span>
            </div>
            <div>
              <small class="text-muted d-block">Success</small>
              <span class="fw-semibold">98%</span>
            </div>
            <div>
              <small class="text-muted d-block">Repeat hire</small>
              <span class="fw-semibold">38%</span>
            </div>
          </div>
          <p class="small text-muted mb-3">
            Handles evidence-based practice papers, care plans, and pathophysiology essays.
          </p>
          <button class="btn btn-outline-secondary btn-sm rounded-pill w-100">
            Hire writer
          </button>
        </article>
      </div>

      <!-- Writer 3 -->
      <div class="col-md-6 col-lg-3">
        <article class="writer-card">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="writer-avatar">CL</div>
            <div>
              <div class="fw-semibold">Chloe L.</div>
              <small class="text-muted">PhD • Psychology & Education</small>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-3 mb-3">
            <div>
              <small class="text-muted d-block">Rating</small>
              <span class="fw-semibold"><i class="bi bi-star-fill text-warning me-1"></i>4.9</span>
            </div>
            <div>
              <small class="text-muted d-block">Success</small>
              <span class="fw-semibold">97%</span>
            </div>
            <div>
              <small class="text-muted d-block">Repeat hire</small>
              <span class="fw-semibold">45%</span>
            </div>
          </div>
          <p class="small text-muted mb-3">
            Focuses on research proposals, literature reviews, and reflection papers.
          </p>
          <button class="btn btn-outline-secondary btn-sm rounded-pill w-100">
            Hire writer
          </button>
        </article>
      </div>

      <!-- Writer 4 -->
      <div class="col-md-6 col-lg-3">
        <article class="writer-card">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="writer-avatar">AK</div>
            <div>
              <div class="fw-semibold">Alex K.</div>
              <small class="text-muted">Master’s • Computer Science</small>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-3 mb-3">
            <div>
              <small class="text-muted d-block">Rating</small>
              <span class="fw-semibold"><i class="bi bi-star-fill text-warning me-1"></i>4.8</span>
            </div>
            <div>
              <small class="text-muted d-block">Success</small>
              <span class="fw-semibold">96%</span>
            </div>
            <div>
              <small class="text-muted d-block">Repeat hire</small>
              <span class="fw-semibold">34%</span>
            </div>
          </div>
          <p class="small text-muted mb-3">
            Great for coding assignments, technical reports, and documentation.
          </p>
          <button class="btn btn-outline-secondary btn-sm rounded-pill w-100">
            Hire writer
          </button>
        </article>
      </div>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="py-5" id="how">
  <div class="container">
    <div class="text-center mb-4">
      <div class="pill mx-auto mb-2">
        <i class="bi bi-diagram-3-fill"></i>
        <span>How it works</span>
      </div>
      <h2 class="section-title mb-2">Order in three simple steps.</h2>
      <p class="section-subtitle mx-auto">
        This section mirrors the classic “1–2–3” pattern EssayPro uses:
        clear, short steps with supporting text and a calm layout.
      </p>
    </div>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="how-step">
          <div class="how-step-number">1</div>
          <h5>Share your assignment</h5>
          <p class="text-muted small mb-0">
            Describe your topic, academic level, and deadline. The more detail you add,
            the better your match with a writer.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="how-step">
          <div class="how-step-number">2</div>
          <h5>Choose your expert</h5>
          <p class="text-muted small mb-0">
            Compare ratings, subject expertise, and customer feedback.
            Pick the writer whose style fits your needs.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="how-step">
          <div class="how-step-number">3</div>
          <h5>Track & download</h5>
          <p class="text-muted small mb-0">
            Chat with your writer, request tweaks, and download the final paper
            once you’re happy with every paragraph.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- BENEFITS -->
<section class="py-5" id="benefits">
  <div class="container">
    <div class="row g-4 align-items-start">
      <div class="col-lg-5">
        <h2 class="section-title mb-3">Why students choose this style of service.</h2>
        <p class="section-subtitle mb-3">
          Use this block to practise designing benefit cards. Focus on short,
          scannable headings plus one-sentence descriptions.
        </p>
        <ul class="list-unstyled text-muted small">
          <li class="mb-2"><i class="bi bi-check-circle text-success me-1"></i>Clear typography and strong hierarchy.</li>
          <li class="mb-2"><i class="bi bi-check-circle text-success me-1"></i>Plenty of white space for a calm feel.</li>
          <li class="mb-2"><i class="bi bi-check-circle text-success me-1"></i>Primary CTA always visible in the viewport.</li>
        </ul>
      </div>
      <div class="col-lg-7">
        <div class="row g-4">
          <div class="col-md-6">
            <div class="h-100">
              <div class="benefit-icon">
                <i class="bi bi-clock-history"></i>
              </div>
              <h6>Deadlines from 3 hours</h6>
              <p class="small text-muted">
                Highlight fast turnarounds with a short, confident sentence.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="h-100">
              <div class="benefit-icon">
                <i class="bi bi-shield-lock"></i>
              </div>
              <h6>Private & secure</h6>
              <p class="small text-muted">
                Emphasize encrypted payments and anonymous communication.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="h-100">
              <div class="benefit-icon">
                <i class="bi bi-robot"></i>
              </div>
              <h6>AI & plagiarism checks</h6>
              <p class="small text-muted">
                Mention built-in tools that keep content original and human-like.
              </p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="h-100">
              <div class="benefit-icon">
                <i class="bi bi-headset"></i>
              </div>
              <h6>24/7 support</h6>
              <p class="small text-muted">
                Add a reassurance point: real people ready to help at any time.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIAL -->
<section class="py-5">
  <div class="container">
    <div class="testimonial">
      <div class="row g-4 align-items-center">
        <div class="col-lg-8">
          <p class="testimonial-quote mb-3">
            “I built this training site to understand how high-converting
            landing pages work. Cloning the EssayPro layout taught me more
            about spacing, visual hierarchy, and CTAs than any course.”
          </p>
          <div class="d-flex align-items-center gap-3">
            <div class="rounded-circle bg-white d-flex align-items-center justify-content-center"
                 style="width:40px;height:40px;">
              <i class="bi bi-person-fill text-dark"></i>
            </div>
            <div>
              <div class="fw-semibold">Samson • Student & Developer</div>
              <small class="text-secondary">Practising UI/UX and front-end dev</small>
            </div>
          </div>
        </div>
        <div class="col-lg-4 text-lg-end">
          <div class="bg-black bg-opacity-25 border border-white border-opacity-10 rounded-4 p-3 d-inline-block">
            <div class="small text-secondary mb-1">Avg. satisfaction</div>
            <div class="h4 mb-0">4.9 <i class="bi bi-star-fill text-warning"></i></div>
            <small class="text-secondary">Based on internal training feedback.</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="py-5 faq-section" id="faq">
  <div class="container">
    <div class="text-center mb-4">
      <h2 class="section-title mb-2">Frequently asked questions</h2>
      <p class="section-subtitle mx-auto">
        Use an accordion for FAQs — it keeps things compact while letting users
        scan questions quickly.
      </p>
    </div>

    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="accordion" id="faqAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header" id="q1">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#a1">
                Is this a real essay service?
              </button>
            </h2>
            <div id="a1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
              <div class="accordion-body">
                No — this site is a <strong>training clone</strong> built to
                practise UI/UX and front-end development. You can adapt the copy
                later if you decide to launch a real project.
              </div>
            </div>
          </div>

          <div class="accordion-item">
            <h2 class="accordion-header" id="q2">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#a2">
                Can I reuse this layout for my own brand?
              </button>
            </h2>
            <div id="a2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
              <div class="accordion-body">
                Yes — just replace the colors, logo, and text so it feels like
                your own brand rather than a copy of another site.
              </div>
            </div>
          </div>

          <div class="accordion-item">
            <h2 class="accordion-header" id="q3">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#a3">
                What tech stack is this built with?
              </button>
            </h2>
            <div id="a3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
              <div class="accordion-body">
                Pure HTML + Bootstrap 5 + a bit of custom CSS. You can later
                port it into React, Next.js, Laravel, or WordPress if you want.
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="container">
    <div class="row gy-4">
      <div class="col-md-4">
        <div class="d-flex align-items-center gap-2 mb-2">
          <div class="rounded-circle d-flex align-items-center justify-content-center"
               style="width:32px;height:32px;background:linear-gradient(135deg,#2563eb,#f97316);color:#fff;font-weight:700;">
            EP
          </div>
          <span class="fw-semibold text-light">EssayProLab</span>
        </div>
        <p class="small">
          Training project inspired by modern essay-service design. Built for
          practising layout, components, and conversions.
        </p>
      </div>
      <div class="col-md-4">
        <h6 class="text-light mb-2">Resources</h6>
        <ul class="list-unstyled small mb-0">
          <li><a href="#">Blog</a></li>
          <li><a href="#">Sample essays</a></li>
          <li><a href="#">Citation guides</a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <h6 class="text-light mb-2">Legal</h6>
        <ul class="list-unstyled small mb-0">
          <li><a href="#">Terms &amp; conditions</a></li>
          <li><a href="#">Privacy policy</a></li>
        </ul>
      </div>
    </div>

    <hr class="border-secondary my-3" />
    <div class="d-flex justify-content-between small flex-wrap gap-2">
      <span>© <span id="year"></span> EssayProLab. For training &amp; educational use only.</span>
      <span>Made with Bootstrap 5.</span>
    </div>
  </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>