This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
<!--
Template for "myappisnotdead" homepage
- Hero with looping video background (MP4 + WebM)
- Interactive "Who designed your app?" section
- "Pick a salvation package" section
- "Numbers & Testimonials" section
- "Showcase" placeholder
- Footer with CTA, nav and brand line
- Inline CSS & JS for WP native use
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myappisnotdead</title>
<style>
/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; background:#111; color:#fff; line-height:1.4; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; }
section { padding:4rem 1rem; }
h2 { text-align:center; margin-bottom:2rem; font-size:2rem; }
.btn { display:inline-block; padding:0.75rem 1.5rem; border-radius:4px; font-size:1rem; }
.btn-primary { background:#e91e63; color:#fff; }
.btn-secondary { background:#00bcd4; color:#111; }
/* Hero */
.hero { position: relative; height:100vh; overflow:hidden; }
.hero video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-content { position:relative; z-index:1; text-align:center; top:50%; transform:translateY(-50%); padding:1rem; }
.hero-content h1 { font-size:2.5rem; margin-bottom:0.5rem; }
.hero-content p { margin-bottom:1rem; font-size:1.125rem; }
/* Who Designed */
#who-designed .options { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-bottom:2rem; }
.options .option { background:#222; padding:1rem 1.5rem; border:2px solid #444; border-radius:8px; transition: background 0.2s, border-color 0.2s; }
.options .option.active, .options .option:hover { background:#333; border-color:#e91e63; }
.option-content { display:none; margin-top:2rem; text-align:center; }
.option-content.active { display:block; }
.option-content img { max-width:200px; margin-bottom:1rem; }
/* Packages */
#packages .cards { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.card { background:#222; border:2px solid #444; border-radius:8px; padding:1.5rem; width:300px; text-align:center; }
.card h3 { margin-bottom:0.5rem; }
.card p { margin-bottom:1rem; }
/* Numbers & Testimonials */
#numbers { background:#000; }
.metrics { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-bottom:2rem; }
.metric { text-align:center; }
.metric span { display:block; font-size:2rem; font-weight:bold; }
.testimonials { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.testimonial { background:#222; border:2px solid #444; border-radius:8px; padding:1rem; width:300px; }
.testimonial p { font-style:italic; margin-bottom:0.5rem; }
.testimonial cite { display:block; font-size:0.875rem; opacity:0.7; }
/* Showcase */
#showcase { text-align:center; }
#showcase .placeholder { background:#222; border:2px dashed #444; border-radius:8px; padding:4rem; color:#666; font-style:italic; }
/* Footer */
footer { background:#111; padding:4rem 1rem; }
.footer-cta { text-align:center; margin-bottom:2rem; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-bottom:2rem; }
.footer-brand { text-align:center; font-size:0.875rem; opacity:0.6; }
</style>
</head>
<body>
<!-- Hero Section -->
<header class="hero">
<video autoplay muted loop playsinline>
<source src="path/to/hero-video.mp4" type="video/mp4">
<source src="path/to/hero-video.webm" type="video/webm">
<img src="path/to/hero-fallback.jpg" alt="Hero">
</video>
<div class="hero-content">
<h1>We redesign apps that weren’t meant to die</h1>
<p>UX/UI specialists trusted by startups, feared by broken flows.</p>
<button class="btn btn-primary">Get in Touch</button>
</div>
</header>
<!-- Who Designed Section -->
<section id="who-designed">
<h2>Who designed your app?</h2>
<div class="options">
<button class="option" data-key="ai">AI did it for us</button>
<button class="option" data-key="cousin">My cousin owed me a favour</button>
<button class="option" data-key="devs">Our devs just went for it</button>
<button class="option" data-key="designer">A designer, but it still feels off</button>
</div>
<div class="option-content" id="option-content">
<img src="" alt="" id="option-img">
<p id="option-text"></p>
<button class="btn btn-secondary" id="option-cta">Let's fix this UX</button>
</div>
</section>
<!-- Pick a Salvation Package -->
<section id="packages">
<h2>Pick a salvation package</h2>
<div class="cards">
<div class="card">
<h3>Quick UX Checkup</h3>
<p>Results in 48h - We’ll tell you what’s broken, why, and how to fix it.</p>
<button class="btn btn-primary">Let's fix this UX</button>
</div>
<div class="card">
<h3>Checkup + Designs</h3>
<p>5 day delivery - We’ll design the results so you can apply them right away.</p>
<button class="btn btn-primary">Let's fix this UX</button>
</div>
<div class="card">
<h3>Complete Redesign</h3>
<p>15 day delivery - We redesign your key flows with user-centered thinking.</p>
<button class="btn btn-primary">Let's fix this UX</button>
</div>
</div>
</section>
<!-- Numbers & Testimonials -->
<section id="numbers">
<h2>Numbers & Testimonials</h2>
<div class="metrics">
<div class="metric"><span>+666</span>apps saved from hell</div>
<div class="metric"><span>+4200</span>hours of founders’ sleep restored</div>
<div class="metric"><span>+9½</span>lifetimes of panic avoided</div>
</div>
<div class="testimonials">
<div class="testimonial">
<p>“I swore I’d never trust designers again — then I met these UX necromancers. Game-changer.”</p>
<cite>Pat Pending, Founder @NonExistentInc</cite>
</div>
<div class="testimonial">
<p>“Their quick checkup saved our launch. My product lives to see another day.”</p>
<cite>Jane Doe, CEO @StartupHell</cite>
</div>
</div>
</section>
<!-- Showcase -->
<section id="showcase">
<h2>Showcase</h2>
<div class="placeholder">[Insert project screenshots carousel or gallery here]</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-cta">
<img src="path/to/thumbs-up-illustration.png" alt="Thumbs up zombie" style="max-width:100px; margin-bottom:1rem;">
<p>If your app looks like it crawled out of the early 2000s, don’t worry. <strong>We’ve resurrected worse.</strong></p>
<button class="btn btn-primary">Book your UX checkup</button>
</div>
<nav class="footer-nav">
<a href="#">UX Checkup</a>
<a href="#">Quick Fixes</a>
<a href="#">Full Redesigns</a>
<a href="#">Free UX Audit</a>
</nav>
<div class="footer-brand">
myappisnotdead © 2025 — App design experts, specialists in reviving zombie UIs
</div>
</footer>
<!-- Scripts -->
<script>
const optionData = {
ai: { text: "When robots design, they forget about humans. We’ll bring empathy back.", img: "path/to/ai-illustration.png", cta: "Resurrect my UX" },
cousin: { text: "Barbecues are fun, but UX isn’t a side-job. Let’s get pros on it.", img: "path/to/cousin-illustration.png", cta: "Hire the experts" },
devs: { text: "Dev-driven UIs can break workflows. We’ll smooth out the code scars.", img: "path/to/devs-illustration.png", cta: "Patch my UX" },
designer: { text: "Even designers have blind spots. Fresh eyes can save your app.", img: "path/to/designer-illustration.png", cta: "Get a second opinion" }
};
const buttons = document.querySelectorAll('.options .option');
const content = document.getElementById('option-content');
const imgEl = document.getElementById('option-img');
const textEl = document.getElementById('option-text');
const ctaBtn = document.getElementById('option-cta');
buttons.forEach(btn => btn.addEventListener('click', () => {
buttons.forEach(b => b.classList.remove('active')); btn.classList.add('active');
const key = btn.getAttribute('data-key'); const data = optionData[key];
imgEl.src = data.img; imgEl.alt = btn.textContent;
textEl.textContent = data.text; ctaBtn.textContent = data.cta;
content.classList.add('active');
}));
</script>
</body>
</html>