Created
July 10, 2026 09:36
-
-
Save stefanpejcic/a8a28114bdd1ebeade27ab3d172b9279 to your computer and use it in GitHub Desktop.
Leave cPanel in under an hour. FB AD
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>OpenPanel FB Ad v2 — Migration — 1080x1350</title> | |
| <style> | |
| :root{ | |
| --ink:#0F1728; | |
| --muted:#667085; | |
| --blue:#2E6BFF; | |
| --green:#12915B; | |
| --red:#D92D20; | |
| --cporange:#FF6C2C; | |
| --bg:#F4F6F9; | |
| --card:#FFFFFF; | |
| --line:#E7EAF0; | |
| } | |
| *{margin:0;padding:0;box-sizing:border-box;} | |
| body{background:#333;display:flex;justify-content:center;padding:20px;} | |
| .ad{ | |
| width:1080px;height:1350px;background:var(--bg); | |
| font-family:-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif; | |
| color:var(--ink);position:relative;overflow:hidden;flex-shrink:0; | |
| } | |
| /* ---------- headline ---------- */ | |
| .hero{padding:96px 90px 0;text-align:center;} | |
| .hero h1{font-size:78px;line-height:1.12;font-weight:800;letter-spacing:-2px;} | |
| .hero h1 .strike{color:var(--cporange);text-decoration:line-through;text-decoration-thickness:6px;text-decoration-color:var(--ink);} | |
| .cta{ | |
| display:inline-block;margin-top:50px;background:var(--ink);color:#fff; | |
| font-size:32px;font-weight:700;padding:26px 64px;border-radius:16px; | |
| } | |
| /* ---------- comparison card ---------- */ | |
| .dash{ | |
| margin:74px auto 0;width:900px;background:var(--card);border-radius:22px; | |
| box-shadow:0 24px 60px rgba(16,23,40,.10);padding:38px 42px;position:relative;z-index:1; | |
| } | |
| .dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;} | |
| .dash-head .srv{font-size:26px;font-weight:800;} | |
| .dash-head .range{font-size:19px;color:var(--muted);} | |
| .compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;} | |
| .col{border:1px solid var(--line);border-radius:16px;padding:26px;} | |
| .col.win{border:2px solid var(--green);background:#F4FBF8;} | |
| .col .name{font-size:23px;font-weight:800;display:flex;align-items:center;gap:10px;} | |
| .col .price{font-size:46px;font-weight:800;margin-top:12px;white-space:nowrap;} | |
| .col .price small{font-size:22px;color:var(--muted);font-weight:600;} | |
| .col.lose{border-color:rgba(255,108,44,.45);background:#FFF8F4;} | |
| .col.lose .name{color:var(--cporange);} | |
| .col.lose .price{color:var(--cporange);} | |
| .col.win .price{color:var(--green);} | |
| .col ul{list-style:none;margin-top:18px;} | |
| .col li{font-size:20px;padding:7px 0;color:#344054;} | |
| .col li::before{content:"✓ ";color:var(--green);font-weight:800;} | |
| .col.lose li::before{content:"• ";color:var(--muted);} | |
| .badge{font-size:16px;font-weight:800;background:var(--green);color:#fff; | |
| padding:5px 14px;border-radius:999px;} | |
| /* migration bar */ | |
| .migrate{margin-top:32px;} | |
| .migrate .m-top{display:flex;justify-content:space-between;font-size:21px;font-weight:700;margin-bottom:12px;} | |
| .migrate .m-top .ok{color:var(--green);} | |
| .bar{height:20px;border-radius:999px;background:#EDF0F4;overflow:hidden;} | |
| .bar .fill{width:100%;height:100%;border-radius:999px; | |
| background:linear-gradient(90deg,var(--blue),var(--green));} | |
| .migrate .m-sub{font-size:18px;color:var(--muted);margin-top:10px;} | |
| /* ---------- chat card ---------- */ | |
| .chat{ | |
| position:absolute;left:70px;bottom:-38px;width:940px;background:#fff; | |
| border-radius:20px;box-shadow:0 30px 80px rgba(16,23,40,.22); | |
| transform:rotate(-3deg);padding:40px 46px 70px;z-index:2; | |
| } | |
| .msg{display:flex;gap:18px;margin-bottom:28px;} | |
| .ava{width:56px;height:56px;border-radius:12px;flex-shrink:0; | |
| display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;} | |
| .ava.u1{background:#7C5CFC;} | |
| .ava.bot{background:#000;} | |
| .m-head{font-size:22px;font-weight:800;} | |
| .m-head .time{font-weight:500;color:var(--muted);font-size:19px;margin-left:10px;} | |
| .m-head .app{font-size:14px;font-weight:700;background:#EEF1F6;color:var(--muted); | |
| padding:3px 8px;border-radius:5px;margin-left:8px;vertical-align:2px;} | |
| .m-body{font-size:23px;line-height:1.42;margin-top:6px;color:#1D2939;} | |
| .m-body .mention{color:var(--blue);font-weight:700;} | |
| /* ---------- footer brand ---------- */ | |
| .brand{ | |
| position:absolute;left:70px;top:1042px;z-index:3;display:flex;align-items:center;gap:16px; | |
| } | |
| .brand .logo{width:64px;height:64px;border-radius:16px;background:#000; | |
| color:#fff;font-weight:900;font-size:34px;display:flex;align-items:center;justify-content:center; | |
| box-shadow:0 10px 24px rgba(0,0,0,.3);} | |
| .brand .t{font-size:30px;font-weight:800;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ad"> | |
| <div class="hero"> | |
| <h1>Leave <span class="strike">cPanel</span><br>in under an hour.</h1> | |
| <div class="cta">Start your 30-day trial →</div> | |
| </div> | |
| <!-- comparison + migration mockup --> | |
| <div class="dash"> | |
| <div class="dash-head"> | |
| <div class="srv">Your hosting bill, after switching</div> | |
| <div class="range">50 accounts / server</div> | |
| </div> | |
| <div class="compare"> | |
| <div class="col lose"> | |
| <div class="name">cPanel</div> | |
| <div class="price">$727<small>/yr</small></div> | |
| <ul> | |
| <li>Price per account</li> | |
| <li>Cost grows as you grow</li> | |
| <li>License audits</li> | |
| </ul> | |
| </div> | |
| <div class="col win"> | |
| <div class="name">OpenPanel <span class="badge">30-DAY TRIAL</span></div> | |
| <div class="price">149.50€<small>/yr</small></div> | |
| <ul> | |
| <li>Unlimited accounts</li> | |
| <li>Docker isolation per user</li> | |
| <li>Import from cPanel built in</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="migrate"> | |
| <div class="m-top"><span>Importing cPanel accounts…</span><span class="ok">42 / 42 done</span></div> | |
| <div class="bar"><div class="fill"></div></div> | |
| <div class="m-sub">Websites, databases, emails, DNS zones and SSL — transferred automatically.</div> | |
| </div> | |
| </div> | |
| <div class="brand"> | |
| <div class="logo"><svg xmlns="http://www.w3.org/2000/svg" width="42" height="46" viewBox="23.3 0.01 465.3 512.15"><path fill="#fff" d="M236 1.5c-9.8 3.3-35.5 16.6-62.4 32.5-13.3 8.1-44.3 25.9-68.5 39.8-51.8 29.4-69.5 44.5-77 66.4-4.3 12.6-4.8 22.1-4.8 115.8 0 119.8 0 119.3 23.7 143 13.8 14.1 31.2 24.7 152 92.9 42.5 23.9 64.4 26.2 96.6 9.3 26.2-13.6 133.9-76.3 153-88.8 19.1-12.6 31.7-28.4 37-46.3 2-7.6 3-40.3 3-112.5 0-99.4-.3-102.2-5.5-116-8.6-21.4-24.7-34.7-79.8-66.4-26.2-14.8-59.7-34.2-74.2-42.8C290.6 5.5 280.3 1.2 259.9.2c-9.6-.5-20.4 0-23.9 1.3m51.6 141.1c16.6 9.6 41.8 23.9 56.1 32l25.7 14.6v65.9c0 65.9 0 66.2-5.5 69.5-3.3 2-13.1 7.8-22.1 12.8-9.1 5.3-31.7 18.1-50.3 28.9l-34 19.6-.8-65.7-.8-65.7-41.8-23.9c-22.9-13.1-47.8-27.4-55.1-31.5-7.6-4.3-13.1-8.6-12.8-9.8.8-2.3 106.7-64.4 110-64.2.7.2 14.8 8 31.4 17.5"/></svg></div> | |
| <div class="t">openpanel.com</div> | |
| </div> | |
| <!-- chat overlay --> | |
| <div class="chat"> | |
| <div class="msg"> | |
| <div class="ava u1">M</div> | |
| <div> | |
| <div class="m-head">Marko <span class="time">2:04 PM</span></div> | |
| <div class="m-body">Renewal notice just came in… cPanel went up <b>again</b>. Options?</div> | |
| </div> | |
| </div> | |
| <div class="msg"> | |
| <div class="ava bot"><svg xmlns="http://www.w3.org/2000/svg" width="34" height="38" viewBox="23.3 0.01 465.3 512.15"><path fill="#fff" d="M236 1.5c-9.8 3.3-35.5 16.6-62.4 32.5-13.3 8.1-44.3 25.9-68.5 39.8-51.8 29.4-69.5 44.5-77 66.4-4.3 12.6-4.8 22.1-4.8 115.8 0 119.8 0 119.3 23.7 143 13.8 14.1 31.2 24.7 152 92.9 42.5 23.9 64.4 26.2 96.6 9.3 26.2-13.6 133.9-76.3 153-88.8 19.1-12.6 31.7-28.4 37-46.3 2-7.6 3-40.3 3-112.5 0-99.4-.3-102.2-5.5-116-8.6-21.4-24.7-34.7-79.8-66.4-26.2-14.8-59.7-34.2-74.2-42.8C290.6 5.5 280.3 1.2 259.9.2c-9.6-.5-20.4 0-23.9 1.3m51.6 141.1c16.6 9.6 41.8 23.9 56.1 32l25.7 14.6v65.9c0 65.9 0 66.2-5.5 69.5-3.3 2-13.1 7.8-22.1 12.8-9.1 5.3-31.7 18.1-50.3 28.9l-34 19.6-.8-65.7-.8-65.7-41.8-23.9c-22.9-13.1-47.8-27.4-55.1-31.5-7.6-4.3-13.1-8.6-12.8-9.8.8-2.3 106.7-64.4 110-64.2.7.2 14.8 8 31.4 17.5"/></svg></div> | |
| <div> | |
| <div class="m-head">OpenPanel <span class="app">APP</span> <span class="time">2:52 PM</span></div> | |
| <div class="m-body">All 42 accounts imported and verified on the new server. | |
| Sites are live, SSL renewed, mail flowing. Total time: <b>48 minutes</b>. 🎉</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment