<div class="alert" role="alert">
  📰 Subscribe to view this entire article
  <button>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>close</title><g fill="none"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75l-10.5 10.5"></path><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75l10.5 10.5"></path></g></svg>
  </button>
</div>

<header class="header">
  <nav aria-label="Main">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Blog</a>        
      </li>
      <li>
        <a href="#">Projects</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<main class="main">
  <h2>Curabitur blandit tempus porttitor.</h2>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  
  <div class="callout">
    <a href="#">Sign in</a> or <a href="#">sign up</a> to view this article.
    </div>
</main>

<footer class="footer">
  <nav aria-label="Main">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Blog</a>        
      </li>
      <li>
        <a href="#">Projects</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</footer>
:root {
  --primary: #2563eb;
  --bg-light: #f1f5f9;
  --bg-alert: #1d4ed8;
  --bg-callout: #dbeafe;
  --border-base: #cbd5e1;
  --text-base: #475569;
}

.alert {
  background: var(--bg-alert);
  padding: 1rem;
  text-align: center;
  color: white;
  position: relative;
  transform: scaleY(1);
  transition: all ease-in-out .3s;
}

.alert button {
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 5px;
}

.alert button:hover {
  background: rgba(255, 255, 255,.35);
}

.alert-hidden {
  opacity: 0;
  padding: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: all ease-in-out .3s;
}

.alert button:focus {
  box-shadow: inset 0 0 0 2px var(--border-base);
}

.header {
  border-bottom: 1px solid var(--border-base);
}

.header,
.footer {
  padding: 1rem;
}

.footer {
  background: var(--bg-light);
  padding: 1rem;
}

.header ul li,
.footer ul li {
  display: inline;
  padding: 0 5px;
}

.main {
  max-width: 767px;
  padding: 1rem;
  margin-left: 2.75rem;
  margin-bottom: 2rem;
}

.callout {
  background: var(--bg-callout);
  padding: 2rem;
  border-radius: 6px;
}

p {
  color: var(--text-base);
  line-height: 1.4;
}

ul {
  list-style: none;
}

a {
  color: var(--primary);
  text-decoration: none;
}
const alert = document.querySelector('.alert');
const dismissAlertButton = document.querySelector('.alert button');

if (localStorage.getItem('hideAlert')) {
  alert.style.display = "none";
}

if (dismissAlertButton) {
  dismissAlertButton.addEventListener('click', event => {
    event.preventDefault();
    alert.classList.add('alert-hidden');
    localStorage.setItem("hideAlert", true);
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.