35 lines
1.5 KiB
HTML
35 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Preview: css-box-model</title>
|
|
<style>
|
|
:root {
|
|
--hl: #d63384;
|
|
--dark: #0f0f23;
|
|
--chrome: #1a1a2e;
|
|
--muted: #4a4a6a;
|
|
}
|
|
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
|
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
|
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
|
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
|
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
|
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
|
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="browser">
|
|
<div class="window">
|
|
<div class="chrome">
|
|
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
|
<span class="url">file:///beispiel/box-model.html</span>
|
|
</div>
|
|
<iframe src="./css-box-model.html"></iframe>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|