Template Page
47.sashe-v1.html
AMP Page
13.amp-v3-id.html
47.sashe-v1.html
13.amp-v3-id.html
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contoh Meta Title</title>
<meta name="description" content="Contoh meta description untuk preview generator.">
<link rel="canonical" href="https://example.com/">
<link rel="amphtml" href="https://example.com/amp/">
<link rel="icon" href="https://placehold.co/64x64/png">
<link rel="preload" as="image" href="https://placehold.co/1200x800/png">
<style>
:root{--primary-color:#6d5efc;--secondary-color:#8b5cf6}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#0a0a12;color:#fff}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:56px 0}
.panel{padding:30px;border-radius:26px;background:linear-gradient(180deg,#151522,#0f0f18);border:1px solid rgba(255,255,255,.08)}
.logo{width:64px;height:64px;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.04);padding:6px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}.brand small{color:#94a3b8}
h1{font-size:clamp(34px,5vw,60px);line-height:1.05;margin:0 0 14px}p{color:#cbd5e1}.desc{font-size:18px;margin:0 0 24px}
.btn{display:inline-block;text-decoration:none;color:#fff;padding:14px 24px;border-radius:14px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));font-weight:700}
.heroimg{width:100%;border-radius:22px;aspect-ratio:16/11;object-fit:cover}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="wrap">
<section class="hero">
<div class="panel">
<div class="brand">
<img class="logo" src="https://placehold.co/200x200/png" alt="Brand Name">
<div><strong>Brand Name</strong><br><small>Template custom generator</small></div>
</div>
<h1>Contoh Judul Dalam Body</h1>
<p class="desc">Contoh deskripsi dalam body untuk melihat hasil generate template.</p>
<a class="btn" href="#">Login Sekarang</a>
</div>
<div class="panel">
<img class="heroimg" src="https://placehold.co/1200x800/png" alt="Brand Name">
<p><strong>Contoh Meta Title</strong></p>
<p>Contoh meta description untuk preview generator.</p>
</div>
</section>
</div>
</body>
</html>
<!doctype html>
<html amp lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Contoh Meta Title</title>
<meta name="description" content="Contoh meta description untuk preview generator.">
<link rel="canonical" href="https://example.com/">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
:root{--primary-color:#6d5efc;--secondary-color:#8b5cf6}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#09090f;color:#fff}
.wrap{max-width:860px;margin:0 auto;padding:20px}.card{padding:24px;border-radius:20px;background:#12121d;border:1px solid rgba(255,255,255,.08)}
h1{line-height:1.1}p{color:#cbd5e1}.btn{display:inline-block;text-decoration:none;color:#fff;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));padding:12px 18px;border-radius:12px;font-weight:700}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<h1>Contoh Judul Dalam Body</h1>
<p>Contoh deskripsi dalam body untuk melihat hasil generate template.</p>
<p><strong>Brand Name</strong></p>
<a class="btn" href="#">Login Sekarang</a>
</div>
</div>
</body>
</html>