Navbar 06

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<nav class="navcenter_component">
  <ul class="navcenter_left">
    <li class="navcenter_item">
      <a class="navcenter_link" href="#explore">Explore</a>
    </li>
    <li class="navcenter_item">
      <a class="navcenter_link" href="#creators">Creators</a>
    </li>
    <li class="navcenter_item">
      <a class="navcenter_link" href="#pricing">Pricing</a>
    </li>
  </ul>
  <a class="navcenter_logo" href="#home">
    <div class="navcenter_mark">
      <p class="navcenter_markletter">b</p>
    </div>
    <p class="navcenter_wordmark">bloom</p>
  </a>
  <div class="navcenter_right">
    <a class="navcenter_link" href="#stories">Stories</a>
    <a class="navcenter_link" href="#login">Log in</a>
    <a class="navcenter_cta" href="#signup">Start free</a>
  </div>
</nav>

<style>
.navcenter_component {
  width:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 32px;
  background:#fdf6ee;
  border-bottom:2px solid #f0e6d6;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.navcenter_left {
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 0;
  list-style:none;
  margin:0;
  padding:0;
}

.navcenter_item {
  list-style:none;
}

.navcenter_link {
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  color:#1a1613;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}

.navcenter_logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}

.navcenter_mark {
  width:38px;
  height:38px;
  border-radius:13px;
  background:#ff5a5f;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-6deg);
  box-shadow:0 6px 16px rgba(255,90,95,.35);
}

.navcenter_markletter {
  color:#fff;
  font-size:20px;
  font-weight:800;
  margin:0;
  transform:rotate(6deg);
  font-family:'Poppins',sans-serif;
}

.navcenter_wordmark {
  color:#1a1613;
  font-size:24px;
  font-weight:800;
  margin:0;
  letter-spacing:-.02em;
  font-family:'Poppins',sans-serif;
}

.navcenter_right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 0;
}

.navcenter_cta {
  display:inline-block;
  padding:11px 22px;
  border-radius:999px;
  background:#ff5a5f;
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(255,90,95,.35);
  transition:transform .18s ease;
  font-family:'Poppins',sans-serif;
}
</style>