웹 브루탈리즘

<div class="poster">
  <b class="tag">// NOTICE</b>
  <h1>RAW<span id="cursor">_</span></h1>
  <p>NO GRADIENTS. NO SHADOWS. NO APOLOGIES.</p>
  <a href="#" class="link">read more →</a>
  <button class="btn">SUBMIT</button>
</div>

body{background:#efefe8}
.poster{width:min(90%,340px);background:#efefe8;border:3px solid #111;padding:20px;
  font-family:ui-monospace,"Courier New",monospace;color:#111}
.tag{display:inline-block;background:#111;color:#efefe8;padding:2px 6px;font-size:11px;letter-spacing:.04em}
h1{margin:12px 0 8px;font-size:clamp(26px,7vmin,42px);font-family:Georgia,"Times New Roman",serif;
  font-weight:700;letter-spacing:-.01em}
#cursor{animation:blink 1s steps(1) infinite}
p{margin:0 0 14px;font-size:11px;letter-spacing:.03em;line-height:1.5}
.link{color:#1414ee;text-decoration:underline;font-size:12px}
.btn{display:block;margin-top:14px;background:#111;color:#efefe8;border:0;padding:10px 16px;
  font-family:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer}
.btn:active{background:#ff3b1f}
@keyframes blink{50%{opacity:0}}

const btn = document.querySelector('.btn');
setInterval(() => {
  btn.classList.add('press');
  btn.style.background = '#ff3b1f';
  setTimeout(() => { btn.style.background = '#111'; }, 220);
}, 2200);