force the specific branch to overwrite GitHub main
📦 GitHub
✨ The Prompt Phrase
What Git command should you use when you need to forcefully update the remote main branch on origin with your local changes, even if it overwrites the remote history? ~git push --force origin main~
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>force the specific branch to overwrite GitHub main - Interactive Tutorial</title>
<style>
:root {
--bg: #0b1020;
--panel: rgba(17, 24, 39, 0.78);
--panel-2: rgba(15, 23, 42, 0.92);
--text: #e5eefc;
--muted: #a7b4d1;
--purple: #8b5cf6;
--blue: #38bdf8;
--green: #22c55e;
--yellow: #f59e0b;
--red: #fb7185;
--border: rgba(255,255,255,0.12);
--shadow: 0 24px 60px rgba(0,0,0,0.35);
--radius: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: "Segoe UI", system-ui, sans-serif;
background:
radial-gradient(circle at top left, rgba(139,92,246,0.24), transparent 32%),
radial-gradient(circle at top right, rgba(56,189,248,0.18), transparent 28%),
radial-gradient(circle at bottom center, rgba(34,197,94,0.14), transparent 34%),
linear-gradient(180deg, #070b16 0%, #0b1020 100%);
color: var(--text);
line-height: 1.7;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
code {
font-family: Consolas, "Courier New", monospace;
background: rgba(255,255,255,0.06);
padding: 2px 8px;
border-radius: 8px;
}
.orb, .orb-two {
position: fixed;
border-radius: 999px;
filter: blur(36px);
pointer-events: none;
z-index: 0;
opacity: 0.4;
animation: drift 18s ease-in-out infinite alternate;
}
.orb {
width: 230px;
height: 230px;
left: 2%;
top: 6%;
background: linear-gradient(135deg, var(--purple), var(--blue));
}
.orb-two {
width: 280px;
height: 280px;
right: 2%;
bottom: 10%;
background: linear-gradient(135deg, var(--blue), var(--green));
animation-duration: 22s;
}
@keyframes drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(16px, 22px) scale(1.08); }
}
.wrap {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
position: relative;
z-index: 1;
}
.nav {
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(14px);
background: rgba(7, 11, 22, 0.72);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 14px 0;
}
.brand {
font-weight: 800;
letter-spacing: 0.02em;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.nav-links a {
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
background: rgba(255,255,255,0.03);
transition: 0.25s ease;
font-size: 0.93rem;
}
.nav-links a:hover,
.nav-links a:focus {
color: var(--text);
transform: translateY(-2px);
}
.hero {
padding: 74px 0 34px;
}
.hero-card {
background: linear-gradient(135deg, rgba(139,92,246,0.16), rgba(56,189,248,0.14));
border: 1px solid var(--border);
box-shadow: var(--shadow);
border-radius: 32px;
padding: 36px;
animation: rise 0.8s ease;
}
@keyframes rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.07);
font-size: 0.92rem;
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.8rem);
line-height: 1.08;
margin-bottom: 18px;
letter-spacing: -0.03em;
}
.gradient {
background: linear-gradient(90deg, #c4b5fd, #7dd3fc, #86efac);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
max-width: 800px;
color: var(--muted);
font-size: 1.08rem;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.badge {
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.05);
transition: 0.25s ease;
}
.badge:hover { transform: translateY(-2px) scale(1.02); }
.progress {
margin-top: 18px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
padding: 8px;
}
.progress-bar {
height: 12px;
width: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
box-shadow: inset 0 0 18px rgba(255,255,255,0.15);
}
.layout {
display: grid;
gap: 22px;
padding: 18px 0 60px;
}
.section {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
animation: fadeIn 0.9s ease both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section h2 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 1.55rem;
}
.lead {
color: var(--muted);
margin-bottom: 18px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 18px;
transition: 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,0.18);
}
.card h3 {
margin-bottom: 8px;
font-size: 1.04rem;
}
.code-box {
margin-top: 16px;
background: #050b14;
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.08);
padding: 18px 20px;
font-family: Consolas, "Courier New", monospace;
overflow-x: auto;
}
.kw { color: #7dd3fc; }
.cmd { color: #f8fafc; }
.flag { color: #fda4af; }
.target { color: #86efac; }
.branch { color: #c4b5fd; }
.subtle {
margin-top: 12px;
color: var(--muted);
font-size: 0.95rem;
}
details {
margin-top: 12px;
border-radius: 18px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
}
summary {
list-style: none;
cursor: pointer;
padding: 18px 20px;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after {
content: "→";
color: var(--blue);
transition: 0.25s ease;
}
details[open] summary::after {
transform: rotate(90deg);
}
.details-content {
padding: 0 20px 18px;
color: var(--muted);
}
.tooltip {
position: relative;
color: #c4b5fd;
border-bottom: 1px dashed rgba(196,181,253,0.75);
cursor: help;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 145%;
left: 50%;
transform: translateX(-50%);
width: 230px;
background: var(--panel-2);
color: var(--text);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
padding: 10px 12px;
font-size: 0.85rem;
line-height: 1.45;
opacity: 0;
visibility: hidden;
transition: 0.22s ease;
box-shadow: var(--shadow);
}
.tooltip:hover::after,
.tooltip:focus::after {
opacity: 1;
visibility: visible;
}
.tabs {
margin-top: 18px;
}
.tabs input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tab-labels {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.tab-labels label {
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
cursor: pointer;
color: var(--muted);
transition: 0.25s ease;
font-weight: 600;
}
.tab-labels label:hover { transform: translateY(-2px); color: var(--text); }
.panel {
display: none;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 18px;
}
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"] {
background: linear-gradient(135deg, rgba(139,92,246,0.24), rgba(56,189,248,0.18));
color: var(--text);
border-color: rgba(255,255,255,0.18);
}
#tab1:checked ~ .panels .panel1,
#tab2:checked ~ .panels .panel2,
#tab3:checked ~ .panels .panel3 {
display: block;
animation: fadeIn 0.4s ease;
}
.list {
display: grid;
gap: 12px;
margin-top: 12px;
}
.list .item {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.danger {
border-left: 4px solid var(--red);
}
.warning {
border-left: 4px solid var(--yellow);
}
.success {
border-left: 4px solid var(--green);
}
.quiz-box {
margin-top: 16px;
padding: 20px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(34,197,94,0.08));
border: 1px solid rgba(255,255,255,0.1);
}
.quiz-box h3 { margin-bottom: 12px; }
.quiz-group {
display: grid;
gap: 10px;
}
.quiz-group input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quiz-group label {
display: block;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
transition: 0.25s ease;
}
.quiz-group label:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.18);
}
.feedback {
display: none;
margin-top: 12px;
padding: 14px 16px;
border-radius: 14px;
font-weight: 600;
}
.ok {
background: rgba(34,197,94,0.14);
border: 1px solid rgba(34,197,94,0.35);
color: #bbf7d0;
}
.bad {
background: rgba(251,113,133,0.14);
border: 1px solid rgba(251,113,133,0.35);
color: #fecdd3;
}
.celebrate {
display: none;
margin-top: 10px;
}
.celebrate span {
display: inline-block;
margin-right: 8px;
animation: pop 0.8s ease infinite alternate;
}
.celebrate span:nth-child(2) { animation-delay: 0.1s; }
.celebrate span:nth-child(3) { animation-delay: 0.2s; }
.celebrate span:nth-child(4) { animation-delay: 0.3s; }
.celebrate span:nth-child(5) { animation-delay: 0.4s; }
@keyframes pop {
from { transform: translateY(0) rotate(0deg); opacity: 0.75; }
to { transform: translateY(-8px) rotate(8deg); opacity: 1; }
}
#q1a:checked ~ .q1w1,
#q1b:checked ~ .q1c,
#q1c:checked ~ .q1w2,
#q2a:checked ~ .q2w1,
#q2b:checked ~ .q2c,
#q2c:checked ~ .q2w2,
#q3a:checked ~ .q3w1,
#q3b:checked ~ .q3w2,
#q3c:checked ~ .q3c {
display: block;
}
#q1b:checked ~ .celebrate1,
#q2b:checked ~ .celebrate2,
#q3c:checked ~ .celebrate3 {
display: block;
}
.summary-card {
background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(34,197,94,0.14));
}
.footer {
padding: 8px 0 60px;
text-align: center;
color: var(--muted);
}
.footer strong { color: var(--text); }
@media (max-width: 860px) {
.grid-2 { grid-template-columns: 1fr; }
.nav-inner { flex-direction: column; align-items: flex-start; }
.hero-card, .section { padding: 22px; }
}
</style>
</head>
<body>
<div class="orb"></div>
<div class="orb-two"></div>
<nav class="nav" aria-label="Tutorial navigation">
<div class="wrap nav-inner">
<div class="brand">🎓 Git Safety Quest</div>
<div class="nav-links">
<a href="#what">What</a>
<a href="#why">Why</a>
<a href="#how">How</a>
<a href="#demo">Demo</a>
<a href="#quiz">Quiz</a>
<a href="#summary">Summary</a>
</div>
</div>
</nav>
<header class="hero">
<div class="wrap">
<div class="hero-card">
<div class="eyebrow">🚨 Powerful command ahead</div>
<h1>Understand <span class="gradient">git push --force origin main</span></h1>
<p>
This command tells Git to push your local branch history to the remote <code>main</code> branch on <code>origin</code>,
even if that means overwriting what is already there. It is powerful, useful, and dangerous if used carelessly.
Think of it like replacing the official whiteboard in the team room with your own version in one big move. 🧠⚡
</p>
<div class="hero-badges" aria-label="Achievement badges">
<div class="badge">🛡️ Safety First</div>
<div class="badge">🎮 Interactive</div>
<div class="badge">📚 Beginner Friendly</div>
<div class="badge">✨ CSS-Only Fun</div>
</div>
<div class="progress" aria-label="Tutorial progress indicator">
<div class="progress-bar"></div>
</div>
</div>
</div>
</header>
<main class="wrap layout">
<section class="section" id="what">
<h2>📘 What Is It?</h2>
<p class="lead">
<strong>git push --force origin main</strong> is a Git command used to send your local history to the remote
<code>main</code> branch on the remote named <code>origin</code>, while ignoring the normal protection that prevents
you from rewriting remote history.
</p>
<div class="grid-2">
<article class="card">
<h3>🧠 In plain English</h3>
<p>You are saying: “Take my local branch version and make the remote main branch match it, even if the remote currently has different commits.”</p>
</article>
<article class="card">
<h3>⚠️ Why this matters</h3>
<p>This can delete commits from the remote branch history from other people's perspective if those commits are not in your local branch.</p>
</article>
</div>
<div class="code-box" aria-label="Main git command">
<span class="kw">git</span> <span class="cmd">push</span> <span class="flag">--force</span> <span class="target">origin</span> <span class="branch">main</span>
</div>
<p class="subtle">
This is not an everyday beginner command. It is more like a “break the glass carefully” tool. 🧯
</p>
</section>
<section class="section" id="why">
<h2>🌟 Why Use It?</h2>
<p class="lead">There are real use cases for this command, especially when you intentionally rewrote history.</p>
<div class="grid-2">
<article class="card">
<h3>🧹 After rebasing</h3>
<p>If you rebased your branch, commit hashes changed. A normal push may be rejected because your history no longer matches the remote branch.</p>
</article>
<article class="card">
<h3>🪄 After cleaning commits</h3>
<p>If you used interactive rebase to squash, reorder, or edit commits, force push may be required to update the remote branch.</p>
</article>
<article class="card">
<h3>🔁 Replacing mistaken history</h3>
<p>If a branch history was intentionally corrected, force push can make the remote reflect that corrected timeline.</p>
</article>
<article class="card danger">
<h3>🚫 But not for casual use</h3>
<p>It should not be used just because a normal push failed. First understand why the push was rejected.</p>
</article>
</div>
</section>
<section class="section" id="how">
<h2>⚙️ How Does It Work?</h2>
<p class="lead">Here is the step-by-step story of what happens.</p>
<details>
<summary>1. Git checks your local branch history</summary>
<div class="details-content">
Git looks at your local commits and prepares to send them to the remote branch. Normally, it protects the remote branch from being rewritten accidentally.
</div>
</details>
<details>
<summary>2. The <code>push</code> action sends commits to a remote</summary>
<div class="details-content">
<code>push</code> means “update the remote branch with my local branch state.” This is the normal sharing action in Git.
</div>
</details>
<details>
<summary>3. The <code>--force</code> flag removes the safety check</summary>
<div class="details-content">
The <code>--force</code> option tells Git to skip the usual “non-fast-forward” protection. In simple terms, Git stops asking, “Are you sure this won't overwrite remote history?”
</div>
</details>
<details>
<summary>4. <code>origin</code> identifies the remote</summary>
<div class="details-content">
<code>origin</code> is usually the default nickname for the remote repository you cloned from, often GitHub, GitLab, or another Git server.
</div>
</details>
<details>
<summary>5. <code>main</code> identifies the target branch</summary>
<div class="details-content">
This tells Git exactly which branch on the remote should be updated. In this command, the target is the remote <code>main</code> branch.
</div>
</details>
</section>
<section class="section" id="demo">
<h2>🧪 Live Demo / Example</h2>
<p class="lead">Explore three situations using CSS-only tabs.</p>
<div class="tabs">
<input type="radio" name="demo" id="tab1" checked>
<input type="radio" name="demo" id="tab2">
<input type="radio" name="demo" id="tab3">
<div class="tab-labels" role="tablist" aria-label="Example tabs">
<label for="tab1">🔄 Rebase case</label>
<label for="tab2">🛡️ Safer thinking</label>
<label for="tab3">✅ What happens next</label>
</div>
<div class="panels">
<div class="panel panel1">
<p>You rebased your local branch to clean up commit history. Now the remote branch has old commit hashes, while your local branch has new ones.</p>
<div class="code-box">
<span class="kw">git</span> <span class="cmd">push</span> <span class="flag">--force</span> <span class="target">origin</span> <span class="branch">main</span>
</div>
<p class="subtle">Result: the remote <code>main</code> branch is rewritten to match your local history.</p>
</div>
<div class="panel panel2">
<p>
Before using force push, ask yourself:
“Am I the only person working on this branch?”
If not, you may overwrite teammates’ work. This is where a
<span class="tooltip" tabindex="0" data-tip="A force option that is safer because it only pushes if the remote has not changed unexpectedly since your last check.">safer alternative</span>
is often better.
</p>
<p class="subtle">Good Git practice is not only about commands. It is also about communication. 📣</p>
</div>
<div class="panel panel3">
<p>After a force push, collaborators may need to sync carefully because the remote history changed. Old commit paths may no longer exist in the same way.</p>
<p class="subtle">Translation: teammates might need to reset, rebase, or coordinate before continuing work.</p>
</div>
</div>
</div>
</section>
<section class="section">
<h2>🔍 Code Breakdown</h2>
<p class="lead">Let’s split the command into pieces and give each part a job.</p>
<div class="grid-2">
<article class="card">
<h3><span class="kw">git</span></h3>
<p>The version control tool. This is the program receiving your command.</p>
</article>
<article class="card">
<h3><span class="cmd">push</span></h3>
<p>Sends local commits to a remote repository branch.</p>
</article>
<article class="card">
<h3><span class="flag">--force</span></h3>
<p>Overrides Git’s normal protection and allows remote history to be rewritten.</p>
</article>
<article class="card">
<h3><span class="target">origin</span></h3>
<p>The remote name, usually the default alias for the repository you cloned from.</p>
</article>
<article class="card" style="grid-column: 1 / -1;">
<h3><span class="branch">main</span></h3>
<p>The branch on the remote repository that you are targeting and potentially overwriting.</p>
</article>
</div>
</section>
<section class="section">
<h2>🚫 Common Mistakes</h2>
<div class="list">
<div class="item danger"><strong>Force pushing shared work:</strong> If teammates pushed commits to <code>main</code>, your force push may erase their visible history from the branch.</div>
<div class="item warning"><strong>Using force when a normal pull would fix it:</strong> Sometimes a rejected push simply means you need to pull and integrate remote changes first.</div>
<div class="item warning"><strong>Not checking the branch name:</strong> Accidentally force pushing to <code>main</code> instead of a feature branch can be a major mistake.</div>
<div class="item danger"><strong>Assuming it is reversible for everyone:</strong> The old commits may still exist temporarily, but recovery becomes harder and more confusing after history rewriting.</div>
</div>
</section>
<section class="section">
<h2>💡 Pro Tips</h2>
<div class="list">
<div class="item success"><strong>Prefer the safer version:</strong> In many real projects, <code>--force-with-lease</code> is safer than plain <code>--force</code>.</div>
<div class="item success"><strong>Double-check before pushing:</strong> Confirm the remote and branch carefully, especially if the target is <code>main</code>.</div>
<div class="item success"><strong>Communicate with your team:</strong> If you must rewrite shared history, tell teammates first so they are not surprised.</div>
<div class="item success"><strong>Use branch protection:</strong> Many teams protect <code>main</code> on platforms like GitHub to block dangerous pushes.</div>
</div>
</section>
<section class="section" id="quiz">
<h2>🎮 Practice Quiz</h2>
<p class="lead">Pick the best answer and unlock little celebration effects.</p>
<div class="quiz-box">
<h3>Question 1: What does <code>--force</code> do?</h3>
<div class="quiz-group">
<input type="radio" name="q1" id="q1a">
<input type="radio" name="q1" id="q1b">
<input type="radio" name="q1" id="q1c">
<label for="q1a">A. It creates a new remote repository</label>
<label for="q1b">B. It allows Git to overwrite remote history protections</label>
<label for="q1c">C. It deletes your local repository folder</label>
<div class="feedback bad q1w1">Not this one. Force does not create repositories.</div>
<div class="feedback ok q1c">Correct! It allows the push to rewrite the remote branch history. 🎉</div>
<div class="feedback bad q1w2">Nope. Dangerous as force push is, it does not delete your local folder.</div>
<div class="celebrate celebrate1" aria-hidden="true">
<span>🎊</span><span>✨</span><span>🏆</span><span>✨</span><span>🎊</span>
</div>
</div>
</div>
<div class="quiz-box">
<h3>Question 2: What is <code>origin</code> in this command?</h3>
<div class="quiz-group">
<input type="radio" name="q2" id="q2a">
<input type="radio" name="q2" id="q2b">
<input type="radio" name="q2" id="q2c">
<label for="q2a">A. The local branch name</label>
<label for="q2b">B. The remote repository alias</label>
<label for="q2c">C. The Git version number</label>
<div class="feedback bad q2w1">Not quite. <code>origin</code> is usually not the local branch name.</div>
<div class="feedback ok q2c">Exactly! <code>origin</code> is the usual name for the remote repository. ✅</div>
<div class="feedback bad q2w2">Nope. It is a remote alias, not a version number.</div>
<div class="celebrate celebrate2" aria-hidden="true">
<span>🚀</span><span>🎯</span><span>✨</span><span>🎯</span><span>🚀</span>
</div>
</div>
</div>
<div class="quiz-box">
<h3>Question 3: What is the safest attitude toward force pushing to <code>main</code>?</h3>
<div class="quiz-group">
<input type="radio" name="q3" id="q3a">
<input type="radio" name="q3" id="q3b">
<input type="radio" name="q3" id="q3c">
<label for="q3a">A. Use it anytime a push fails</label>
<label for="q3b">B. Use it first, ask questions later</label>
<label for="q3c">C. Use it carefully, only when you understand the consequences</label>
<div class="feedback bad q3w1">Too risky. A failed push does not automatically mean force push is correct.</div>
<div class="feedback bad q3w2">That is the villain path. Let’s not do that. 😄</div>
<div class="feedback ok q3c">Perfect! Force pushing should be deliberate, informed, and often coordinated with others. 🌟</div>
<div class="celebrate celebrate3" aria-hidden="true">
<span>🎉</span><span>🛡️</span><span>✨</span><span>🛡️</span><span>🎉</span>
</div>
</div>
</div>
</section>
<section class="section summary-card" id="summary">
<h2>📝 Summary Card</h2>
<p class="lead">Your quick reference cheat sheet for this powerful command.</p>
<div class="list">
<div class="item"><strong>Command:</strong> <code>git push --force origin main</code></div>
<div class="item"><strong>Meaning:</strong> Push local history to remote <code>main</code> on <code>origin</code>, even if it rewrites remote history.</div>
<div class="item"><strong>Use case:</strong> Often needed after rebasing, squashing, or rewriting commits intentionally.</div>
<div class="item"><strong>Main risk:</strong> Overwriting remote history and disrupting teammates.</div>
<div class="item"><strong>Best habit:</strong> Prefer safer options when possible and double-check before pushing.</div>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap">
<p>Generated by <strong>AI Prompt Dictionary</strong> 💙</p>
<p>Interactive tutorial built with pure HTML and CSS — no JavaScript tags used.</p>
</div>
</footer>
</body>
</html>
Live Preview