visual.html

---
layout: default
---
<main class="container">
  <span class="visual-text">Meet Grin ―<br />
    the private and lightweight mimblewimble blockchain
  </span>
  <section class="visual-logos">
    <div class="visual-box" style="background-color: white;">
      <img src="assets/images/grin_mw_logo.svg" class="grin-logo" alt="Description">
    </div>
    <div class="visual-box" style="background-color: white;">
      <img src="assets/images/grin-mw-logo-inverted.svg" class="grin-logo" alt="Description">
    </div>
    <div class="visual-box" style="background-color: #fef102;">
      <img src="assets/images/grin-logo-eyes.svg" class="grin-logo" alt="Description">
    </div>
    <div class="visual-box" style="background-color: black;">
      <img src="assets/images/grin-logo-inverted-eyes.svg" class="grin-logo" alt="Description">
    </div>
    <div class="visual-box" style="background-color: white;">
      <h1>Grin</h1>
    </div>
  </section>
  <section class="banners">
    <div class="banner" style="background-color: black;">
      <img src="assets/images/grin-logo-inverted-eyes.svg" class="grin-logo" alt="Description">
    </div>
    <div class="banner" style="background-image: url(assets/images/pillars.jpg); background-position: 50% 10%; background-size: cover;">
      <img src="assets/images/grin-logo-inverted-eyes.svg" class="grin-logo" alt="Description">
    </div>
    <div class="banner" style="background-image: url(assets/images/supper.jpg); background-position: 50% 20%; background-size: cover;">
      <img src="assets/images/grin-logo-inverted-eyes.svg" class="grin-logo" alt="Description">
    </div>
  </section>
</main>