Bulma Components

<section class="section py-20">
  <div class="container">
    <div class="columns -mb-6">
      <div class="column is-4 mb-6">
        <div class="box p-4 p-8-desktop has-background-light">
          <span class="is-flex is-align-items-center is-justify-content-center mb-8 mb-12-desktop has-background-white box has-text-grey-dark" style="width: 64px; height: 64px; border-radius: 100%;">
            <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98457 19.606C8.98457 19.606 16.6566 17.283 16.6566 10.879C16.6566 4.474 16.9346 3.974 16.3196 3.358C15.7036 2.742 9.99057 0.75 8.98457 0.75C7.97857 0.75 2.26557 2.742 1.65057 3.358C1.03457 3.974 1.31257 4.474 1.31257 10.879C1.31257 17.283 8.98457 19.606 8.98457 19.606Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38599 9.87463L8.27799 11.7696L12.176 7.86963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h4 class="mb-4 title is-4">Security in saving</h4>
            <p class="has-text-grey-dark">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-4 mb-6">
        <div class="box p-4 p-8-desktop">
          <span class="is-flex is-align-items-center is-justify-content-center mb-8 mb-12-desktop mr-4 has-background-info has-text-white" style="width: 64px; height: 64px; border-radius: 100%;">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.750122C15.108 0.750122 19.25 4.89112 19.25 10.0001C19.25 15.1081 15.108 19.2501 10 19.2501C4.891 19.2501 0.75 15.1081 0.75 10.0001C0.75 4.89112 4.891 0.750122 10 0.750122Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.99512 6.20422V10.6232" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.995 13.7961H10.005" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="is-relative py-20">
  <div class="is-absolute is-top-0 is-right-0 is-bottom-0 is-hidden-touch column is-5 p-0 has-background-danger is-flex is-justify-content-center is-align-items-center">
    <img class="image mx-auto is-cover" src="zeus-assets/images/z-sign-pink.png" alt="">
  </div>
  <div class="section py-0">
    <div class="container">
      <div class="columns">
        <div class="column is-12 is-5-desktop">
          <div class="has-mw-md mx-auto mx-0-desktop has-text-centered">
            <form action="#">
              <span class="has-text-info has-text-weight-semibold">Sign In</span>
              <h3 class="mt-3 mb-12 is-size-3 has-text-weight-semibold">Join our community</h3>
              <div class="is-relative mb-6">
                <input class="input py-6" type="email" placeholder="e.g hello@shuffle.dev">
                <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 px-1 has-background-white has-text-grey-dark" style="font-size: 12px;">Your email address</span>
              </div>
              <div class="is-relative mb-6">
                <input class="input py-6" type="password" placeholder="******">
                <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 px-1 has-background-white has-text-grey-dark" style="font-size: 12px;">Password</span>
              </div>
              <button class="button is-primary is-fullwidth mb-4">Get Started</button>
              <small><a class="has-text-dark" href="#">Forgot password?</a></small>
              <div class="border-top pt-6 mt-8" style="border-top: 1px solid #DADFE9;">
                <a class="button is-dark is-fullwidth mb-4" href="#">

<section class="section py-20">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <h3 class="mb-4 is-size-3 has-text-weight-semibold">Decisions To Consider Before Wireframing</h3>
      <ul>
        <li class="py-5">
          <a class="px-1 pb-10 is-flex has-text-left" style="width: 100%; border-top: none; border-left: 0; border-right:0; border-radius: 0;">
            <span class="is-size-5 has-text-weight-bold mr-auto">Creating Content Wireframes For Responsive Design</span>
            <svg class="is-flex-shrink-0" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="is-hidden pr-4 mt-3 is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="py-5">
          <a class="px-1 pb-10 is-flex has-text-left" style="width: 100%; border-top: none; border-left: 0; border-right:0; border-radius: 0;">
            <span class="is-size-5 has-text-weight-bold mr-auto">The Skeptic&rsquo;s Guide To Low-Fidelity Prototyping</span>
            <svg class="is-flex-shrink-0" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 10C19.25 4.892 15.109 0.75 10 0.75C4.892 0.75 0.75 4.892 0.75 10C0.75 15.108 4.892 19.25 10 19.25C15.109 19.25 19.25 15.108 19.25 10Z" stroke="#45C1FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M13.4712 11.4423L10.0002 7.95626L6.52919 11.4423" stroke="#45C1FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <p class="pr-4 mt-3 is-size-5 has-text-grey-dark">Low-fidelity prototypes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process. Throughout this article, we will look at some of the features that make low-fidelity prototyping a unique tool to radically improve your work and to build an environment in which users&rsquo; needs can be truly realized.</p>

<section class="section py-20">
  <div class="container">
    <h2 class="mb-10 has-text-grey-dark has-text-centered title is-6">Trusted by brand all over the world</h2>
    <div class="columns is-multiline -mb-4">
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/amazon-gray.svg" alt="">
        </div>
      </div>

<section class="section py-20">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6 mb-12 mb-0-desktop">
        <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
        <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="mb-12 is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="button is-primary" href="#">Activate Demo</a>
      </div>
      <div class="column is-6">
        <div class="has-background-light px-5 px-10-desktop is-rounded">
          <div class="py-8" style="border-bottom: 1px solid #DADFE9;">
            <div class="is-flex is-align-items-start">
              <span class="mr-6 is-flex-shrink-0 is-flex is-justify-content-center is-align-items-center has-background-info has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">1</span>
              <div>
                <p class="mb-4 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
              </div>
            </div>
          </div>
          <div class="py-8" style="border-bottom: 1px solid #DADFE9;">
            <div class="is-flex is-align-items-start">
              <span class="mr-6 is-flex-shrink-0 is-flex is-justify-content-center is-align-items-center has-background-warning has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">2</span>
              <p class="has-text-grey-dark">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>

<section>
  <nav class="navbar py-5">
    <div class="container is-fluid">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="navbar-item" href="#">About</a></li>
            <li><a class="navbar-item" href="#">Company</a></li>
            <li><a class="navbar-item" href="#">Services</a></li>
            <li><a class="navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>

<section class="section py-20">
  <div class="container">
    <div class="columns is-vcentered mb-16">
      <div class="column is-12-tablet is-5-desktop">
        <div class="pr-10-desktop">
          <div class="is-hidden-desktop mb-8" style="height: 384px;">
            <img class="image is-fullwidth is-cover is-rounded" style="height: 100%;" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
          </div>
          <small class="tag is-info">Development</small>
          <h2 class="mt-3 mb-4 is-size-3 has-text-weight-semibold">Lorem ipsum dolor</h2>
          <span class="is-inline-block mb-6 has-text-grey-dark">10 Jun 2021 19:40</span>
          <p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="column is-7-desktop is-hidden-mobile">
        <div style="height: 384px;">
          <img class="image is-fullwidth is-cover is-rounded" style="height: 100%;" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
        </div>
      </div>
    </div>
    <div class="columns is-multiline is-vcentered mb-16">
      <div class="column is-12-tablet is-7-desktop">
        <div style="height: 384px;">
          <img class="image is-fullwidth is-cover is-rounded" style="height: 100%;" src="https://images.unsplash.com/photo-1557804506-d8017c1e4856?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1001&amp;q=80" alt="">

<section class="is-relative section py-20" style="overflow: hidden;">
  <img class="is-absolute is-left-0 is-top-0 mt-24 is-hidden-touch" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-right-0 is-top-0 mt-52 is-hidden-touch" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-20 has-text-centered">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="columns is-multiline mb-16">
      <div class="column is-4">
        <div class="box">
          <div class="is-relative mb-6" style="height: 216px;">
            <small class="is-absolute is-top-o is-right-0 mt-4 mr-4 tag is-dark" style="z-index: 10;">DEVELOPMENT</small>
            <img class="image is-fullwidth is-cover is-rounded" style="height: 100%;" src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <span class="is-inline-block mb-4 has-text-grey-dark">10 Jun 2021 19:40</span>
          <h2 class="mb-4 is-size-4 has-text-weight-semibold">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="mb-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <a class="is-size-6" href="#">Read more</a>
        </div>
      </div>
      <div class="column is-4">
        <div class="box">

<section class="is-relative section pt-20 pb-40 mb-52 has-background-info-light">
  <img class="is-absolute is-left-0 is-top-0 mt-24 is-hidden-touch" src="zeus-assets/icons/dots/red-dot-left-blue-line.svg" alt="">
  <img class="is-absolute is-right-0 is-top-0 mt-52 is-hidden-touch" src="zeus-assets/icons/dots/green-dot-right-blue-line.svg" alt="">
  <div class="is-relative container">
    <div class="has-mw-3xl mx-auto mb-12 mb-20-desktop has-text-centered">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="is-size-5 has-text-grey-dark">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="is-relative has-mw-4xl mx-auto">
      <img class="image is-rounded -mb-80" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
  </div>
</section>

<section class="section py-20">
  <div class="container">
    <div class="columns -mb-6">
      <div class="column is-4 mb-6">
        <div class="p-4 p-8-desktop">
          <span class="is-flex is-align-items-center is-justify-content-center mb-8 mb-12-desktop has-background-warning" style="width: 64px; height: 64px; border-radius: 100%;">
            <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98457 19.606C8.98457 19.606 16.6566 17.283 16.6566 10.879C16.6566 4.474 16.9346 3.974 16.3196 3.358C15.7036 2.742 9.99057 0.75 8.98457 0.75C7.97857 0.75 2.26557 2.742 1.65057 3.358C1.03457 3.974 1.31257 4.474 1.31257 10.879C1.31257 17.283 8.98457 19.606 8.98457 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38599 9.87463L8.27799 11.7696L12.176 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h4 class="mb-4 title is-4">Security in saving</h4>
            <p class="has-text-grey-dark">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-4 mb-6">
        <div class="p-4 p-8-desktop">
          <span class="is-flex is-align-items-center is-justify-content-center mb-8 mb-12-desktop has-background-info" style="width: 64px; height: 64px; border-radius: 100%;">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.750122C15.108 0.750122 19.25 4.89112 19.25 10.0001C19.25 15.1081 15.108 19.2501 10 19.2501C4.891 19.2501 0.75 15.1081 0.75 10.0001C0.75 4.89112 4.891 0.750122 10 0.750122Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.99512 6.20422V10.6232" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.995 13.7961H10.005" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="is-relative section py-20">
  <img class="is-absolute is-left-0 is-top-0 mt-16 is-hidden-mobile" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-right-0 is-bottom-0 mb-16 is-hidden-mobile" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="box has-mw-md mx-auto p-6 px-10-desktop py-12-desktop has-background-white has-text-centered">
      <form action="#">
        <span class="has-text-info has-text-weight-semibold">Sign Up</span>
        <h3 class="mt-4 mb-12 title is-3">Create new account</h3>
        <div class="columns is-vcentered">
          <div class="column is-6">
            <div class="is-relative">
              <input class="input py-6" type="text" placeholder="John">
              <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 px-1 has-background-white has-text-grey-dark" style="font-size: 12px;">First name</span>
            </div>
          </div>
          <div class="column is-6">
            <div class="is-relative">
              <input class="input py-6" type="text" placeholder="Smith">
              <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 px-1 has-background-white has-text-grey-dark" style="font-size: 12px;">Last name</span>
            </div>
          </div>
        </div>
        <div class="is-relative mb-6">
          <input class="input py-6" type="email" placeholder="e.g hello@shuffle.dev">

<section class="section py-20">
  <div class="container">
    <div class="has-mw-3xl mx-auto mb-16 has-text-centered">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="columns is-multiline -mb-4">
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-light py-12 is-rounded">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-light py-12 is-rounded">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="has-background-light py-12 is-rounded">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">

<section>
  <nav class="navbar py-5 has-background-dark">
    <div class="container px-8-mobile">
      <div class="navbar-brand">
        <a class="navbar-item pl-3-desktop" href="#">
          <span class="navbar-item px-0 title is-5 has-text-white">
            <img src="zeus-assets/logo/logo-zeus-white.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger has-text-light" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <ul class="navbar-item">
            <li><a class="navbar-item has-text-light" href="#">About</a></li>
            <li><a class="navbar-item has-text-light" href="#">Company</a></li>
            <li><a class="navbar-item has-text-light" href="#">Services</a></li>
            <li><a class="navbar-item has-text-light" href="#">Testimonials</a></li>
          </ul>
          <div class="navbar-item is-hidden-mobile pr-3-desktop"><a class="button is-primary" href="#">Contact Us</a></div>

<section class="section py-20">
  <div class="container">
    <div class="has-mw-3xl mx-auto">
      <div class="py-10 py-24-desktop px-8 px-24-desktop mb-6 has-background-light is-rounded">
        <span class="is-inline-block mb-5">
          <svg width="48" height="36" viewbox="0 0 48 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26 23.45C26 13.3858 33.4577 2.86747 45.2297 0.164427C45.6793 0.0611986 46.1364 0.294669 46.3301 0.713275L47.5161 3.27572C47.7602 3.80299 47.5031 4.42383 46.9877 4.69196C43.3044 6.60799 40.1644 11.1966 39.3647 14.8059C39.2493 15.3268 39.6241 15.8042 40.1413 15.9351C44.6581 17.0784 48 21.1681 48 26.042C48 32.406 42.832 36 37.602 36C31.572 36 26 31.39 26 23.45ZM0 23.45C0 13.3858 7.45772 2.86747 19.2297 0.164427C19.6793 0.0611986 20.1364 0.294669 20.3301 0.713274L21.5161 3.27572C21.7602 3.80299 21.5031 4.42383 20.9877 4.69196C17.3044 6.60799 14.1644 11.1966 13.3647 14.8059C13.2493 15.3268 13.6241 15.8042 14.1413 15.9351C18.6581 17.0784 22 21.1681 22 26.042C22 32.406 16.832 36 11.602 36C5.572 36 0 31.39 0 23.45Z" fill="#FF4564"></path>
          </svg>
        </span>
        <p class="is-size-5">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new. There&rsquo;s just &ldquo;so much to get done&rdquo; before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
      </div>
      <p class="has-text-grey-dark has-text-centered">Danny Bailey, CEO &amp; Founder at Wireframes</p>
    </div>
  </div>
</section>

<section class="section py-20">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-16 has-text-centered">
      <span class="is-size-7"><small class="has-text-info has-text-weight-semibold">What&apos;s new at Shuffle</small></span>
      <h2 class="mt-8 mb-10 title is-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="is-size-5 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="columns is-multiline -mb-4">
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/slack-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/dropbox-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">
        <div class="py-4">
          <img class="is-block mx-auto" style="height: 24px;" src="zeus-assets/logo/spotify-gray.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-desktop p-4">

<section class="is-relative section pt-20 pb-40 mb-52 has-background-danger-light">
  <img class="is-absolute is-left-0 is-top-0 mt-24 is-hidden-touch" src="zeus-assets/icons/dots/blue-dot-left-red-line.svg" alt="">
  <img class="is-absolute is-right-0 is-top-0 mt-52 is-hidden-touch" src="zeus-assets/icons/dots/red-dot-right-shield.svg" alt="">
  <div class="is-relative container">
    <div class="has-mw-3xl mx-auto mb-12 mb-20-desktop has-text-centered">
      <span class="has-text-danger has-text-weight-semibold">What&apos;s new at Shuffle</span>
      <h2 class="mt-8 mb-10 title is-2">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="is-size-5 has-text-grey-dark">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="has-mw-4xl mx-auto">
      <img class="image is-rounded -mb-80" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
  </div>
</section>

<section class="is-relative section py-20">
  <img class="is-absolute is-left-0 is-top-0 mt-16 is-hidden-mobile" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-right-0 is-bottom-0 mb-16 is-hidden-mobile" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="box has-mw-md mx-auto p-6 px-10-desktop py-12-desktop has-background-white has-text-centered">
      <form action="#">
        <span class="has-text-info has-text-weight-semibold">Sign In</span>
        <h3 class="mt-4 mb-12 title is-3">Join our community</h3>
        <div class="is-relative mb-6">
          <input class="input py-6" type="email" placeholder="e.g hello@shuffle.dev">
          <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 px-1 has-background-white has-text-grey-dark" style="font-size: 12px;">Your email address</span>
        </div>
        <div class="is-relative mb-6">
          <input class="input py-6" type="password" placeholder="******">
          <span class="is-absolute is-top-0 is-left-0 -mt-2 ml-3 px-1 has-background-white has-text-grey-dark" style="font-size: 12px;">Password</span>
        </div>
        <button class="button is-primary is-fullwidth mb-4">Get Started</button>
        <small><a class="has-text-dark" href="#">Forgot password?</a></small>
        <div class="pt-6 mt-8" style="border-top: 1px solid #DADFE9;">
          <a class="button is-dark is-fullwidth mb-4" href="#">
            <span class="is-inline-block mr-2">
              <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0898 11.8182V6.51074H5.90537L6.17776 4.4417H4.0898V3.12092C4.0898 2.52207 4.25864 2.11397 5.13515 2.11397L6.25125 2.11352V0.262891C6.05824 0.238289 5.39569 0.181885 4.62456 0.181885C3.01431 0.181885 1.9119 1.14594 1.9119 2.91601V4.4417H0.0908203V6.51074H1.9119V11.8182H4.0898Z" fill="white"></path>
              </svg>

<section>
  <nav class="navbar py-5 has-background-dark">
    <div class="container px-8-mobile">
      <div class="navbar-brand">
        <a class="navbar-item pl-3-desktop" href="#">
          <span class="navbar-item px-0 title is-5 has-text-white">
            <img src="zeus-assets/logo/logo-zeus-white.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger has-text-light" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="navbar-item has-text-light" href="#">About</a></li>
            <li><a class="navbar-item has-text-light" href="#">Company</a></li>
            <li><a class="navbar-item has-text-light" href="#">Services</a></li>
            <li><a class="navbar-item has-text-light" href="#">Testimonials</a></li>
          </ul>
        </div>

<section class="section py-20">
  <div class="container">
    <div class="columns is-multiline mb-16">
      <div class="column is-4">
        <div class="box">
          <div class="box-content">
            <div class="is-relative mb-6" style="height: 216px;">
              <small class="is-absolute is-top-o is-right-0 mt-4 mr-4 tag is-dark" style="z-index: 10;">DEVELOPMENT</small>
              <img class="image is-fullwidth is-cover is-rounded" style="height: 100%;" src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            </div>
            <span class="is-inline-block mb-4 has-text-grey-dark">10 Jun 2021 19:40</span>
            <h2 class="mb-4 is-size-4 has-text-weight-semibold">Lorem ipsum dolor sit amet consectutar</h2>
            <p class="mb-4 has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <a class="is-size-6" href="#">Read more</a>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="box">
          <div class="is-relative mb-6" style="height: 216px;">
            <small class="is-absolute is-top-o is-right-0 mt-4 mr-4 tag is-dark" style="z-index: 10;">DEVELOPMENT</small>
            <img class="image is-fullwidth is-cover is-rounded" style="height: 100%;" src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <span class="is-inline-block mb-4 has-text-grey-dark">10 Jun 2021 19:40</span>

<section class="is-relative section py-20">
  <img class="is-absolute is-left-0 is-top-0 mt-24 is-hidden-touch" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="is-absolute is-right-0 is-top-0 mt-52 is-hidden-touch" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container">
    <div class="is-relative has-mw-2xl mx-auto">
      <div class="is-absolute" style="top: -40px; left: -80px;">
        <svg width="552" height="414" viewbox="0 0 552 414" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M299 269.675C299 151.65 388.187 28.1937 528.224 0.154258C528.676 0.0636969 529.136 0.294669 529.33 0.713275L551.18 47.9217C551.424 48.449 551.174 49.0702 550.633 49.2812C500.445 68.8437 456.451 134.368 450.998 180.121C450.935 180.651 451.309 181.121 451.836 181.208C508.665 190.617 552 239.966 552 299.483C552 372.669 492.568 414 432.423 414C363.078 414 299 360.985 299 269.675ZM0 269.675C0 151.65 89.1865 28.1937 229.224 0.154258C229.676 0.0636969 230.136 0.294669 230.33 0.713274L252.18 47.9217C252.424 48.449 252.174 49.0702 251.633 49.2812C201.445 68.8437 157.451 134.368 151.998 180.121C151.935 180.651 152.309 181.121 152.836 181.208C209.665 190.617 253 239.966 253 299.483C253 372.669 193.568 414 133.423 414C64.078 414 0 360.985 0 269.675Z" fill="url(#paint0_linear)"></path>
          <defs><lineargradient id="paint0_linear" x1="648" y1="-418.5" x2="107.461" y2="354.11" gradientunits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0"><stop offset="1" stop-color="#F2F5FA"></lineargradient></defs>
        </svg>
      </div>
      <div class="is-relative py-32">
        <p class="mb-20 is-size-5">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new. There&rsquo;s just &ldquo;so much to get done&rdquo; before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
        <p class="has-text-grey-dark has-text-centered">Danny Bailey, CEO &amp; Founder at Wireframes</p>
      </div>
    </div>
  </div>
</section>