0.9.136
·
4 commits
to master
since this release
What's Changed
- Sales Collateral Builder Feature by @restarone-solutions in #1707
Sales Collateral Builder
Use HTML and CSS to create and export social media posts!
attaching assets
Google Drive User? Ensure link sharing is enabled and public for the image and copy its ID to link it in the markup with the google CDN URL:
https://lh3.googleusercontent.com/d/FILE_ID_HEREreference it in your markup:
<img src="https://lh3.googleusercontent.com/d/FILE_ID_HERE" alt="Restarone logo">example
inline HTML and CSS. Remember when it used to be this easy?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Restarone Solutions — Instagram Post (1080×1080)</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
:root{
--bg1:#0f1724; /* deep navy */
--bg2:#0b3b5a; /* teal-ish */
--accent:#7ee7c4; /* mint */
--muted:#9aa6b2;
--card-size:1080px;
--radius:28px;
--glass: rgba(255,255,255,0.04);
--font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
html,body{height:100%;margin:0;font-family:var(--font);background:linear-gradient(180deg,var(--bg1) 0%, #071728 100%);display:flex;align-items:center;justify-content:center;padding:30px}
/* container sized as Instagram square — open in a browser and scale to 1080px to export */
.post{
width:var(--card-size);
height:var(--card-size);
border-radius:20px;
box-shadow:0 20px 60px rgba(2,6,23,0.6);
overflow:hidden;
position:relative;
background:linear-gradient(135deg,var(--bg2),#04263a);
display:flex;
align-items:flex-start;
justify-content:center;
color:white;
}
/* subtle pattern */
.post::before{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at 15% 20%, rgba(255,255,255,0.03), transparent 8%),
radial-gradient(circle at 85% 80%, rgba(0,0,0,0.08), transparent 10%);
pointer-events:none;
}
.inner{width:86%;max-width:920px;margin-top:70px;display:grid;grid-template-columns:120px 1fr;gap:36px;align-items:start;}
/* logo */
.logo-wrap{display:flex;flex-direction:column;align-items:center}
.logo{width:120px;height:120px;border-radius:26px;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(4px)}
.logo img{width:76px;height:76px;object-fit:contain}
.brand{margin-top:12px;font-weight:700;letter-spacing:0.6px;font-size:14px;color:var(--accent)}
/* content */
.content h1{margin:0;font-size:56px;line-height:1.02;font-weight:800;letter-spacing:-1px}
.content p.lead{margin:18px 0 22px;color:var(--muted);font-size:18px;max-width:640px}
/* features */
.features{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.chip{background:var(--glass);padding:10px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--accent);border:1px solid rgba(255,255,255,0.04)}
.cta-row{display:flex;gap:18px;align-items:center}
.btn{background:linear-gradient(90deg,var(--accent),#3ae3c1);color:#052027;padding:14px 22px;border-radius:14px;font-weight:700;border:none;font-size:16px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,0.35);text-decoration:none}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted);padding:12px 18px;border-radius:12px}
/* small footer */
.footer{position:absolute;left:36px;bottom:26px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center}
.dot{width:8px;height:8px;border-radius:99px;background:var(--accent);box-shadow:0 0 18px rgba(126,231,196,0.18)}
/* decorative right-side panel */
.right-panel{position:absolute;right:36px;top:72px;width:220px;padding:18px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(4px)}
.stat{font-weight:800;font-size:26px}
.stat small{display:block;color:var(--muted);font-weight:600;font-size:12px;margin-top:6px}
/* responsive for smaller preview windows */
@media (max-width:1200px){
:root{--card-size:720px}
.post{width:720px;height:720px}
.inner{width:86%;gap:20px}
.content h1{font-size:40px}
}
@media (max-width:760px){
:root{--card-size:540px}
.post{width:540px;height:540px;border-radius:16px}
.inner{grid-template-columns:90px 1fr}
.content h1{font-size:30px}
.right-panel{display:none}
}
</style>
</head>
<body>
<div class="post" role="img" aria-label="Restarone Solutions — product and services spotlight">
<div class="inner">
<div class="logo-wrap">
<div class="logo">
<!-- Replace src with your Restarone logo file (png/svg) -->
<img src="https://lh3.googleusercontent.com/d/ID" alt="Restarone logo">
</div>
<div class="brand">Restarone Solutions</div>
</div>
<div class="content">
<h1>Build faster. Ship safer. Scale smarter.</h1>
<p class="lead">Restarone Cloud + Violet Rails — enterprise-grade monitoring, automated ops, and talent-backed engineering to accelerate your product roadmap.</p>
<div class="features">
<div class="chip">24/7 Monitoring</div>
<div class="chip">Automated Alerts</div>
<div class="chip">Dev Talent Network</div>
</div>
<div class="cta-row">
<a class="btn" href="#">Request a Demo</a>
<a class="btn secondary" href="#">Learn More</a>
</div>
</div>
</div>
<div class="footer"><span class="dot"></span><span>restarone.com</span><span>•</span><span>@restarone</span></div>
</div>
</body>
</html>Full Changelog: 0.9.135...0.9.136
Contributors
restarone-solutions