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