Bulma Components

<section class="section" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="is-max-w-md mx-auto mb-6 has-text-centered">
      <img src="metis-assets/icons/quote.svg" alt="">
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded is-object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div>
              <h3 class="title is-size-5">John Bailey</h3>
              <p class="subtitle has-text-info">CEO</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded is-object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">

<section class="section">
  <div class="container">
    <div class="is-max-w-lg mx-auto has-text-centered">
      <span class="tag is-info is-rounded">Lorem ipsum</span>
      <h2 class="mt-5 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      <div class="mt-5"><a class="button is-primary mr-2" href="#">Check now</a><a class="button is-light" href="#">Learn more</a></div>
    </div>
  </div>
</section>

<div class="is-fullwidth is-fixed is-bottom px-4 mb-5">
  <div class="container has-background-grey-darker is-radius p-5">
    <h2 class="title is-spaced mb-4 is-size-4 has-text-white">Cookie Policy</h2>
    <p class="subtitle">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our. Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
    <div class="buttons"><a class="button is-primary" href="#">Accept Cookies</a><a class="button is-light is-outlined" href="#">Refuse Cookies</a></div>
  </div>
</div>

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 is-3-desktop">
        <div class="is-flex">
          <div class="mr-4 has-background-light p-5 is-radius">
            <svg class="image is-32x32 has-text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <div>
            <span class="is-size-4 has-text-weight-bold">250 324</span>
            <p class="subtitle">Followers</p>
          </div>
        </div>
      </div>
      <div class="column is-6 is-3-desktop">
        <div class="is-flex">
          <div class="mr-4 has-background-light p-5 is-radius">
            <svg class="image is-32x32 has-text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path>
            </svg>
          </div>
          <div>

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto has-text-centered">
      <img class="mb-5 is-fullwidth p-4" src="metis-assets/illustrations/error1.png" alt="">
      <span class="title has-text-primary">Whoops!</span>
      <h2 class="title is-spaced">Something went wrong!</h2>
      <p class="subtitle">Sorry, but we are unable to open this page.</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button is-light" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-justify-content-space-between">
      <div class="column is-2">
        <a href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="column is-3">
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
      </div>
      <div class="column is-2 is-offset-1">
        <h3 class="title is-size-5 is-spaced mb-3">Office</h3>
        <p class="subtitle">359 Hidden Valley Road, NY</p>
      </div>
      <div class="column is-2">
        <h3 class="title is-size-5 is-spaced mb-3">Contacts</h3>
        <p class="subtitle">hello@gmail.com</p>
      </div>
    </div>
    <div class="mt-5 is-flex is-justify-content-space-between">
      <p class="subtitle is-size-7">&copy; 2020. All rights reserved.</p>
      <div>
        <a href="#">

<section class="section">
  <div class="container">
    <div class="is-max-w-lg mx-auto has-text-centered">
      <h2 class="title is-spaced">
        <span>Lorem ipsum</span>
        <span class="has-text-primary">dolor sit</span>
        <span>amet, consectetur adipiscing.</span>
      </h2>
      <p class="subtitle">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      <div class="field is-grouped is-justify-content-center">
        <div class="control has-icons-left">
          <span class="icon is-small is-left">
            <svg class="image is-24x24" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
          </span>
          <input class="input" type="text" placeholder="Type your e-mail">
        </div>
        <div class="control">
          <button class="button is-primary" type="submit">Sign Up</button>
        </div>
      </div>
    </div>

<section class="section">
  <div class="container">
    <div class="columns is-desktop is-vcentered">
      <div class="column is-6-desktop">
        <div class="is-max-w-96 pb-6">
          <span class="subtitle is-spaced">Contact Us</span>
          <h2 class="title">We will be glad to hear from you!</h2>
        </div>
        <div class="mt-6 has-text-black">
          <div class="mb-5">
            <h3 class="subtitle is-spaced mb-1">Phone</h3>
            <p>+ 48 654-430-309</p>
          </div>
          <div class="mb-5">
            <h3 class="subtitle is-spaced mb-1">
              E-mail
              <p>info@metis.com</p>
            </h3>
          </div>
          <div class="mb-5">
            <h3 class="subtitle is-spaced mb-1">
              Address
              <p>11567 E Broadview Dr</p>
              <p>Kiowa, Colorado(CO), 80117</p>

<section class="section is-background-no-repeat is-background-contain" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <h2 class="title is-spaced is-max-w-lg mx-auto">
        <span>Start saving time today and</span>
        <span class="has-text-primary">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="subtitle is-max-w-sm mx-auto">Best for freelance developers who need to save their time.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="pt-6 box has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="title is-size-3 my-3">Begginer</h3>
          <span class="title is-size-3 is-spaced has-text-primary">$32.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">3 Emails</span>

<section class="section">
  <div class="container">
    <div class="box p-0">
      <div class="table-container">
        <table class="table is-fullwidth">
          <thead>
            <tr><th class="py-4 has-text-weight-normal">Project</th><th class="py-4 has-text-weight-normal">Budget</th><th class="py-4 has-text-weight-normal">Status</th><th class="py-4 has-text-weight-normal">Users</th><th class="py-4 has-text-weight-normal">Completion</th></tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <img class="mr-3 is-inline-block is-32x32" src="metis-assets/logos/react.svg" alt="">
                <div class="is-inline-block">
                  <p class="is-size-7 has-text-weight-semibold">React</p>
                  <a class="is-size-7" href="#">www.reactjs.org</a>
                </div>
              </td>
              <td class="py-4 is-size-7 has-text-weight-semibold">5000$</td>
              <td class="py-4">
                <span class="tag has-background-link-light has-text-primary has-text-weight-semibold is-uppercase is-rounded">Pending</span>
              </td>
              <td>
                <div class="is-flex py-1">
                  <img class="image is-32x32 is-rounded" style="object-fit: cover;" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=128&amp;q=60">

<section class="section">
  <div class="container">
    <div class="columns is-vcentered is-variable is-6 mb-6">
      <div class="column is-6">
        <div class="px-2">
          <h2 class="title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
          <ul>
            <li>
              <span class="mb-5 mr-2 tag is-size-6 has-text-success has-background-success-light">1</span>
              <span>Proin volutpat ex eu</span>
            </li>
            <li>
              <span class="mb-5 mr-2 tag is-size-6 has-text-success has-background-success-light">2</span>
              <span>Fusce posuere nibh in cursus</span>
            </li>
            <li>
              <span class="mb-5 mr-2 tag is-size-6 has-text-success has-background-success-light">3</span>
              <span>Maecenas sit amet vehicula</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="column is-6">

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto mb-6 has-text-centered">
      <span class="tag is-info is-rounded">Lorem ipsum</span>
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="columns is-mobile is-multiline">
      <div class="mb-6 column is-6-mobile is-6-tablet is-3-desktop has-text-centered">
        <figure class="mb-4 is-64x64 is-inline-block">
          <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </figure>
        <h3 class="title is-size-5">Anne Bailey</h3>
        <p class="subtitle has-text-info">CEO</p>
      </div>
      <div class="mb-6 column is-6-mobile is-6-tablet is-3-desktop has-text-centered">
        <figure class="mb-4 is-64x64 is-inline-block">
          <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </figure>
        <h3 class="title is-size-5">Julie Brown</h3>
        <p class="subtitle has-text-info">Head of Development</p>
      </div>
      <div class="mb-6 column is-6-mobile is-6-tablet is-3-desktop has-text-centered">
        <figure class="mb-4 is-64x64 is-inline-block">

<section>
  <nav class="navbar is-transparent py-3">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="auto" style="min-height: 40px;">
        </a>
        <a class="navbar-burger" role="button" type="button" data-toggle="side-menu" data-target="#sideMenu02" aria-controls="sideMenu02" aria-expanded="false" aria-label="Toggle navigation">
          <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">
          <div class="navbar-item">
            <div class="buttons"><a class="button is-primary is-outlined" href="#">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="is-hidden navbar-side is-fixed" style="top: 0; left: 0; bottom: 0; width: 80%; height: 100%; z-index: 9999;" id="sideMenu02">
    <div class="navbar-backdrop is-fixed is-top is-right is-fullsize has-background-grey" style="opacity: 75%; z-index: 50;"></div>

<section class="section">
  <div class="container">
    <div class="columns is-centered is-vcentered">
      <div class="column is-2 has-text-centered-mobile">
        <a href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="column is-6">
        <ul class="is-flex is-justify-content-space-around">
          <li><a class="title is-size-5" href="#">Shop</a></li>
          <li><a class="title is-size-5" href="#">About</a></li>
          <li><a class="title is-size-5" href="#">Blog</a></li>
          <li><a class="title is-size-5" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="column is-4 has-text-centered has-text-right-tablet"><a class="button is-primary" href="#">Contact with us</a></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="is-max-w-md mb-6 mx-auto has-text-centered">
      <span class="tag is-info is-rounded">Lorem ipsum</span>
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
  </div>
  <div class="columns">
    <div class="column is-3 is-flex is-align-items-center">
      <img class="is-radius" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
    </div>
    <div class="is-flex is-flex-direction-column column">
      <div class="columns is-centered">
        <div class="column is-7">
          <img class="is-radius" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
        <div class="column is-4" style="margin-top: auto;">
          <img class="is-radius" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </div>
      </div>
      <div class="columns is-centered">
        <div class="column is-4">
          <img class="is-radius" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto">
      <div class="mb-6 has-text-centered">
        <a href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="has-text-centered">
        <span class="subtitle is-spaced">Sign In</span>
        <h4 class="title is-size-3">Join our community</h4>
        <div class="mb-6">
          <div class="field">
            <div class="control has-icons-right">
              <input class="input" type="email" placeholder="name@email.com">
              <span class="icon is-small is-right">
                <svg class="image is-24x24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                </svg>
              </span>
            </div>
          </div>
          <div class="field">
            <div class="control has-icons-right">

<section class="section has-background-white-bis">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4">
        <div class="box">
          <div class="is-flex is-justify-content-space-between">
            <p class="subtitle">Followers</p>
            <span class="tag has-background-link-light has-text-primary has-text-weight-semibold is-uppercase is-rounded">Monthly</span>
          </div>
          <p class="is-size-2 has-text-weight-bold">250 324</p>
          <p class="subtitle">
            <span class="has-text-success">+18%</span>
            <span>Since last week</span>
          </p>
        </div>
      </div>
      <div class="column is-4">
        <div class="box">
          <div class="is-flex is-justify-content-space-between">
            <p class="subtitle">Customers</p>
            <span class="tag has-background-link-light has-text-primary has-text-weight-semibold is-uppercase is-rounded">Monthly</span>
          </div>
          <p class="is-size-2 has-text-weight-bold">250 324</p>
          <p class="subtitle">

<div class="is-fullwidth is-fixed is-bottom has-background-grey-darker p-5">
  <div class="container">
    <h2 class="title is-spaced mb-4 is-size-4 has-text-white">Cookie Policy</h2>
    <p class="subtitle">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our. Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
    <div class="buttons"><a class="button is-primary" href="#">Accept Cookies</a><a class="button is-light is-outlined" href="#">Refuse Cookies</a></div>
  </div>
</div>

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto has-text-centered">
      <img class="mb-5 is-fullwidth p-4" src="metis-assets/illustrations/error2.png" alt="">
      <span class="title has-text-primary">Whoops!</span>
      <h2 class="title is-spaced">Something went wrong!</h2>
      <p class="subtitle">Sorry, but we are unable to open this page.</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button is-light" href="#">Try Again</a></div>
    </div>
  </div>
</section>

<section class="hero is-primary">
  <div class="hero-body has-text-white">
    <div class="container">
      <div class="is-max-w-lg mx-auto has-text-centered">
        <span class="tag is-info is-rounded">Lorem ipsum</span>
        <h2 class="mt-5 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        <div class="mt-5"><a class="button is-light" href="#">Get Started</a></div>
      </div>
    </div>
  </div>
</section>