Bulma Components

<section class="is-fullwidth">
  <div class="columns">
    <div class="is-relative column is-5-fullhd is-hidden-touch has-background-primary">
      <div class="is-absolute is-right is-flex is-fullheight" style="align-items: center; margin-right: -48px;">
        <img class="is-max-w-lg" src="metis-assets/illustrations/hardworking-man.png" alt="">
      </div>
    </div>
    <div class="column is-5-fullhd is-12-mobile py-6 is-flex is-justify-content-center">
      <div class="container px-6 mx-auto">
        <h3 class="title">Frequently Asked Questions</h3>
        <ul>
          <li class="mb-3">
            <button class="button is-dark is-outlined is-fullwidth is-flex is-justify-content-space-between">
              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </button>
            <p class="is-hidden subtitle my-5 px-1">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="mb-3">
            <button class="button is-dark is-outlined is-fullwidth is-flex is-justify-content-space-between">
              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              <svg class="image is-16x16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<section class="section">
  <div class="container">
    <div class="columns py-3 is-centered is-vcentered">
      <div class="column is-6 pr-6">
        <div class="mb-6">
          <span class="tag is-info is-rounded">Lorem ipsum</span>
          <h2 class="mt-4 title is-size-3">Key Features</h2>
        </div>
        <div class="is-flex mb-6">
          <div class="mr-4 has-text-primary">
            <svg class="image is-32x32" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
          </div>
          <div>
            <h3 class="title is-size-5 is-spaced mb-3">Easy to customize</h3>
            <p class="subtitle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis expedita animi.</p>
          </div>
        </div>
        <div class="is-flex mb-6">
          <div class="mr-4 has-text-primary">
            <svg class="image is-32x32" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
            </svg>

<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-multiline">
      <div class="column is-4">
        <div class="box p-5">
          <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-4">
        <div class="box p-5">
          <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">
    <h2 class="title mb-6">Our Blog</h2>
    <div class="mb-6 columns is-desktop is-vcentered is-variable is-6 is-flex-dir-col-reverse-touch is-flex-dir-row-desktop">
      <div class="column">
        <span class="tag is-info is-rounded">Development</span>
        <h3 class="title is-size-4 is-spaced mt-5 mb-4">Curabitur vestibulum odio maximus.</h3>
        <p class="subtitle">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend, quis dictum eros bibendum. Maecenas convallis tempor varius.</p>
        <a class="is-flex is-align-items-center" href="#">
          Read More
          <svg class="is-inline-block ml-2" width="16" height="16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </a>
      </div>
      <div class="column">
        <img class="image is-fullwidth is-h-80 is-radius is-object-cover" src="https://images.unsplash.com/photo-1603050927325-baf630505e27?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjExMDk0fQ&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
    </div>
    <div class="mb-6 columns is-desktop is-vcentered is-variable is-6 is-flex-dir-col-reverse-touch is-flex-dir-row-reverse-desktop">
      <div class="column">
        <span class="tag is-info is-rounded">Startup</span>
        <h3 class="title is-size-4 is-spaced my-4">Curabitur vestibulum odio maximus.</h3>
        <p class="subtitle">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend, quis dictum eros bibendum. Maecenas convallis tempor varius.</p>

<section class="section">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6 has-text-centered-mobile">
        <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>
      <div class="is-flex column is-6 is-justify-content-center">
        <div class="field is-grouped">
          <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>

<section class="section">
  <div class="container">
    <div class="is-max-w-2xl mx-auto">
      <div class="columns is-centered mb-6">
        <div class="is-max-w-md mx-auto has-text-centered">
          <span class="subtitle is-spaced">Contact Us</span>
          <h2 class="title">We will be glad to hear from you!</h2>
        </div>
      </div>
      <form>
        <div class="field mb-4 has-text-centered">
          <div class="control">
            <span class="has-text-weight-bold mr-3">Departament:</span>
            <label class="radio">
              <input class="radio" type="radio" name="department" value="1" checked="">
              <span>Support</span>
            </label>
            <label class="radio">
              <input class="radio" type="radio" name="department" value="2">
              <span>Sales</span>
            </label>
          </div>
        </div>
        <div class="field">

<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">Lorem ipsum dolor sit amet consectutar domor</h2>
      <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-fixed is-bottom is-max-w-md ml-5 mb-5 mr-5">
  <div class="has-background-grey-darker has-text-white is-radius px-5 py-4">
    <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 partners.</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>
  <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="#sideMenu03" aria-controls="sideMenu03" 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-start"><a class="navbar-item" href="#">Product</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">About Us</a><a class="navbar-item" href="#">Features</a></div>
        <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="sideMenu03">

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto py-6 has-text-centered">
      <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>
    </div>
    <div class="columns">
      <div class="column is-4">
        <img class="is-radius is-fullwidth" style="object-fit: cover; height: 500px; width: 100%;" src="https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=698&amp;q=80" alt="">
      </div>
      <div class="column is-8">
        <div class="columns is-multiline">
          <div class="column is-12">
            <img class="is-radius" style="width: 100%; height: 232px; object-fit: cover;" src="https://images.unsplash.com/photo-1485628390555-1a7bd503f9fe?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <div class="column is-6">
            <img class="is-radius" style="height: 232px; width: 100%; object-fit: cover;" 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 class="column is-6">
            <img class="is-radius" style="height: 232px; width: 100%; object-fit: cover;" src="https://images.unsplash.com/photo-1494948141550-221698c089c2?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=701&amp;q=80" alt="">
          </div>
        </div>
      </div>
    </div>

<section class="section">
  <div class="container">
    <h2 class="title has-text-centered mb-6">Our Blog</h2>
    <div class="mb-6 columns is-desktop is-multiline">
      <div class="column is-6-desktop">
        <a class="has-text-white" href="#">
          <div class="p-6 has-background-primary has-text-centered is-radius">
            <span class="tag is-info is-rounded">Startup</span>
            <h3 class="title is-size-4 is-spaced mt-5 mb-4 has-text-white">Curabitur vestibulum odio maximus.</h3>
            <p class="subtitle has-text-light">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend, quis dictum eros bibendum. Maecenas convallis tempor varius.</p>
            <span class="is-inline-block">
              <svg class="image is-24x24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
      <div class="column is-6-desktop">
        <a class="has-text-black" href="#">
          <div class="p-6 has-background-light has-text-centered is-radius">
            <span class="tag is-info is-rounded">Development</span>
            <h3 class="title is-size-4 is-spaced mt-5 mb-4">Curabitur vestibulum odio maximus.</h3>
            <p class="subtitle">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend, quis dictum eros bibendum. Maecenas convallis tempor varius.</p>

<section class="section">
  <div class="container has-text-black">
    <div class="columns is-multiline mb-6">
      <div class="column is-4-desktop is-12-touch">
        <h2 class="title">Frequently Asked Questions</h2>
      </div>
      <div class="column is-4-desktop is-offset-4-desktop is-12-touch is-flex is-align-items-center">
        <p class="subtitle">Can&rsquo;t find the answer you&rsquo;re looking for? Write out to our<a href="#">customer support team.</a></p>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-4-desktop is-6-tablet is-12-mobile">
        <h4 class="title is-size-5 is-spaced mb-4">Nunc at arcu non ipsum auctor lacinia quis quis mi?</h4>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna.</p>
      </div>
      <div class="column is-4-desktop is-6-tablet is-12-mobile">
        <h4 class="title is-size-5 is-spaced mb-4">Nunc at arcu non ipsum auctor lacinia quis quis mi?</h4>
        <p class="subtitle">Nullam turpis nisi, lobortis sit amet venenatis ac, egestas id quam. Morbi condimentum dolor sit amet ornare vestibulum. Maecenas nibh purus, pharetra ac felis sed, elementum molestie urna. Nunc at arcu non ipsum auctor lacinia quis quis mi</p>
      </div>
      <div class="column is-4-desktop is-6-tablet is-12-mobile">
        <h4 class="title is-size-5 is-spaced mb-4">Nunc at arcu non ipsum auctor lacinia quis quis mi?</h4>
        <p class="subtitle">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.</p>
      </div>
      <div class="column is-4-desktop is-6-tablet is-12-mobile">

<section style="overflow: hidden;">
  <div class="columns is-multiline is-vcentered">
    <div class="column is-12 is-6-desktop has-background-primary">
      <img class="is-block is-max-w-lg mx-auto my-6" src="metis-assets/illustrations/error1.png" alt="">
    </div>
    <div class="column is-12 is-6-desktop has-text-centered">
      <div class="section">
        <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>
  </div>
</section>

<section class="section" style="overflow: hidden;">
  <div class="columns is-multiline">
    <div class="is-relative column is-12 is-6-desktop">
      <div class="is-hidden-touch" style="height: 512px;">
        <div class="is-absolute is-top" style="left: -256px;">
          <img style="height: 512px;" src="metis-assets/elements/macbook.png" alt="">
          <div class="is-absolute" style="top: 5.8%; left: 14.6%; width: 72.8%; height: 76.8%;">
            <img src="metis-assets/placeholders/metis-dashboard-square.png" alt="">
          </div>
        </div>
      </div>
      <div class="is-hidden-desktop is-relative">
        <img src="metis-assets/elements/macbook.png" alt="">
        <div class="is-absolute" style="top: 5.8%; left: 14.6%; width: 72.8%; height: 76.8%;">
          <img class="is-fullsize is-object-cover" src="metis-assets/placeholders/metis-dashboard-square.png" alt="">
        </div>
      </div>
    </div>
    <div class="column is-12 is-6-desktop is-flex is-align-items-center">
      <div class="mb-6">
        <h2 class="title is-spaced">
          <span>Make your</span>
          <span class="has-text-primary">life easier</span>
          <span>for marketing sales and customer support</span>

<section class="section py-6">
  <div class="container">
    <div class="columns is-multiline">
      <div class="mb-5 column is-12 has-text-centered">
        <h2 class="title">Get in touch!</h2>
        <p class="subtitle">We will be glad to hear from you</p>
      </div>
      <div class="column columns is-multiline is-mobile has-text-centered">
        <div class="column is-6-touch is-4-desktop">
          <svg class="image is-inline-block is-32x32 has-text-primary mb-4" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
          </svg>
          <div class="has-text-black">
            <h3 class="subtitle is-spaced mb-1">Phone</h3>
            <p>+ 48 654-430-309</p>
            <p>+ 1 6532-430-309</p>
          </div>
        </div>
        <div class="column is-6-touch is-4-desktop">
          <svg class="image is-inline-block is-32x32 has-text-primary mb-4" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
          <div class="has-text-black">
            <h3 class="subtitle is-spaced mb-1">E-mail</h3>

<section class="section has-background-white-bis">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 is-3-desktop">
        <div class="box py-5 has-text-centered">
          <p class="subtitle">
            <span>Total Revenue</span>
            <span class="ml-1 tag is-success is-rounded">+18%</span>
          </p>
          <p class="is-size-2 has-text-weight-bold">$33,261</p>
          <span class="subtitle">432 Orders</span>
        </div>
      </div>
      <div class="column is-6 is-3-desktop">
        <div class="box py-5 has-text-centered">
          <p class="subtitle">
            <span>Subscribers</span>
            <span class="ml-1 tag is-success is-rounded">+18%</span>
          </p>
          <p class="is-size-2 has-text-weight-bold">643,533</p>
          <span class="subtitle">$50 Avg. Order</span>
        </div>
      </div>
      <div class="column is-6 is-3-desktop">

<section class="section" style="background-image: url('metis-assets/elements/blob.svg'); background-position: top; background-repeat: no-repeat;">
  <div class="pb-6 container">
    <div class="py-6 is-relative columns is-centered has-text-centered">
      <div class="is-absolute is-top is-hidden-mobile" style="left: -24px;">
        <img src="metis-assets/elements/dots-left.svg" alt="">
      </div>
      <div class="column is-5">
        <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-grouped-centered is-grouped-multiline">
          <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">

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6 has-text-centered has-text-left-tablet">
        <a href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="column is-5 is-offset-1 mb-3">
        <ul class="is-flex is-justify-content-space-between">
          <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-12 is-flex is-justify-content-space-between">
        <p>&copy; 2020. All rights reserved.</p>
        <div>
          <a class="mr-2" href="#">
            <img src="metis-assets/icons/facebook-blue.svg" alt="">
          </a>
          <a class="mr-2" href="#">
            <img src="metis-assets/icons/twitter-blue.svg" alt="">

<section class="section has-background-white-bis">
  <div class="container">
    <div class="mb-6 columns is-multiline is-vcentered is-variable is-6">
      <div class="column is-12 is-5-desktop">
        <h2 class="title is-spaced">
          <span>Make your</span>
          <span class="has-text-primary">life easier</span>
          <span>for marketing sales and customer support</span>
        </h2>
      </div>
      <div class="column is-12 is-7-desktop">
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis. Quisque vitae nulla malesuada, auctor arcu vitae, luctus nisi. Sed elementum vitae ligula id imperdiet.</p>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-4-desktop">
        <div class="box p-6 has-text-centered">
          <div class="is-inline-block px-4 py-2 has-background-info-light has-text-info is-rounded">1</div>
          <figure class="mb-4 image">
            <img style="width: 100%; height: auto;" src="metis-assets/illustrations/work-tv.png" alt="">
          </figure>
          <h3 class="title is-size-5 is-spaced mb-3">Donec fermentum</h3>
          <p class="subtitle">Sed ac magna sit amet risus tristique interdum at vel velit. In hac habitasse platea dictumst.</p>
        </div>

<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-multiline">
      <div class="column is-6 is-3-desktop has-text-centered">
        <img class="mb-4 is-cover-256x256 is-radius" 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="">
        <h3 class="title is-size-5">Anne Bailey</h3>
        <p class="subtitle mb-4 has-text-info">CEO</p>
        <div>
          <a href="#">
            <img src="metis-assets/icons/facebook.svg" alt="">
          </a>
          <a href="#">
            <img src="metis-assets/icons/twitter.svg" alt="">
          </a>
        </div>
      </div>
      <div class="column is-6 is-3-desktop has-text-centered">
        <img class="mb-4 is-cover-256x256 is-radius" 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="">
        <h3 class="title is-size-5">Danny Smith</h3>