Bulma Components – Asitrastudio Library

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="is-fixed is-bottom-0 is-right-0 is-fullwidth" style="z-index: 50;">
    <div class="px-8 pt-8 pb-9 is-relative has-background-white" style="border-radius: 40px;">
      <div class="is-absolute is-top-0 is-right-0 mt-2 mr-5 mr-12-widescreen">
        <button x-on:click.prevent="open = false" class="button p-0 is-light has-background-white">
          <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
          </svg>
        </button>
      </div>
      <div class="section py-0">
        <div class="container">
          <div class="columns is-multiline is-vcentered">
            <div class="column is-1-tablet">
              <svg width="41" height="41" viewbox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.2266 18.7915C17.6418 18.7915 18.7891 17.6442 18.7891 16.229C18.7891 14.8138 17.6418 13.6665 16.2266 13.6665C14.8113 13.6665 13.6641 14.8138 13.6641 16.229C13.6641 17.6442 14.8113 18.7915 16.2266 18.7915Z" fill="black"></path>
                <path d="M31.6016 5.125C33.0168 5.125 34.1641 3.97773 34.1641 2.5625C34.1641 1.14727 33.0168 0 31.6016 0C30.1863 0 29.0391 1.14727 29.0391 2.5625C29.0391 3.97773 30.1863 5.125 31.6016 5.125Z" fill="black"></path>
                <path d="M36.7266 13.6665C38.1418 13.6665 39.2891 12.5192 39.2891 11.104C39.2891 9.68877 38.1418 8.5415 36.7266 8.5415C35.3113 8.5415 34.1641 9.68877 34.1641 11.104C34.1641 12.5192 35.3113 13.6665 36.7266 13.6665Z" fill="black"></path>
                <path d="M16.2266 27.3335C17.6418 27.3335 18.7891 26.1862 18.7891 24.771C18.7891 23.3558 17.6418 22.2085 16.2266 22.2085C14.8113 22.2085 13.6641 23.3558 13.6641 24.771C13.6641 26.1862 14.8113 27.3335 16.2266 27.3335Z" fill="black"></path>
                <path d="M24.7734 27.3335C26.1887 27.3335 27.3359 26.1862 27.3359 24.771C27.3359 23.3558 26.1887 22.2085 24.7734 22.2085C23.3582 22.2085 22.2109 23.3558 22.2109 24.771C22.2109 26.1862 23.3582 27.3335 24.7734 27.3335Z" fill="black"></path>
                <path d="M40.9026 18.5422C40.8648 18.1473 40.6906 17.7779 40.4101 17.4973C40.1295 17.2168 39.7601 17.0426 39.3651 17.0048C35.4183 16.6245 31.7266 14.8831 28.923 12.0792C26.1194 9.27531 24.3785 5.58347 23.9987 1.63658C23.9608 1.24164 23.7867 0.872192 23.5061 0.591645C23.2256 0.311098 22.8561 0.136948 22.4612 0.0990833C21.8137 0.035875 21.1611 0 20.5 0C16.4455 0 12.482 1.2023 9.11082 3.45487C5.73961 5.70744 3.11208 8.9091 1.56048 12.655C0.00888236 16.4009 -0.397086 20.5227 0.393911 24.4994C1.18491 28.476 3.13734 32.1287 6.00432 34.9957C8.8713 37.8627 12.524 39.8151 16.5007 40.6061C20.4773 41.3971 24.5991 40.9911 28.345 39.4395C32.0909 37.8879 35.2926 35.2604 37.5451 31.8892C39.7977 28.518 41 24.5545 41 20.5C41 19.8389 40.9641 19.1863 40.9026 18.5422ZM20.5 37.5833C15.9692 37.5833 11.624 35.7835 8.42027 32.5797C5.21652 29.376 3.41668 25.0308 3.41668 20.5C3.41668 15.9692 5.21652 11.624 8.42027 8.42026C11.624 5.21651 15.9692 3.41667 20.5 3.41667H20.7904C21.5018 7.61191 23.5003 11.4821 26.5091 14.4909C29.5179 17.4997 33.3881 19.4983 37.5833 20.2096C37.5833 20.307 37.5833 20.4026 37.5833 20.5C37.5784 25.0293 35.7769 29.3716 32.5743 32.5742C29.3716 35.7769 25.0293 37.5784 20.5 37.5833Z" fill="black"></path>
              </svg>
            </div>
            <div class="column is-7-tablet is-8-desktop">

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title mb-20 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Get started quickly</h1>
    <div class="columns is-multiline">
      <div class="column is-6 mb-12 mb-0-desktop">
        <div class="has-mw-xl">
          <div class="px-0 py-10" style="border-bottom: 1px solid #CACACA;" x-data="{ accordion: false }">
            <button x-on:click="accordion = !accordion" class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-4-mobile is-size-3-tablet has-text-dark">De-risking your project</h5>
              <div class="button p-0 is-ghost ml-4 is-flex-shrink-0" style="border: none;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="is-inline-block">
                    <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19.4961 10.4346L12.9483 3.88682L6.40058 10.4346" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M12.9453 22.2246L12.9453 4.06996" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </div>
            </button>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="mt-6 is-size-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its</p>
            </div>
          </div>
          <div class="px-0 py-10" style="border-bottom: 1px solid #CACACA;" x-data="{ accordion: false }">
            <button x-on:click="accordion = !accordion" class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">

<section class="py-24 pt-40-desktop pb-52-desktop is-relative">
  <img class="is-absolute is-top-0 is-left-0 is-fullwidth is-covered" style="object-fit: cover; height: 100%" src="asitrastudio-assets/http-codes/dark-photo-bg.png" alt="">
  <div class="container is-relative">
    <div class="has-mw-xl mx-auto py-24 py-40-tablet is-relative has-text-centered">
      <h2 class="is-hidden-mobile is-hidden-tablet-only title has-text-white mb-10" style="font-size: 132px; letter-spacing: -0.02em;">Error 404</h2>
      <h2 class="is-hidden-desktop title is-size-2 is-size-1-desktop has-text-white mb-10" style="letter-spacing: -0.02em;">Error 404</h2>
      <p class="subtitle has-text-light mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
      <a class="button is-outlined is-white is-rounded" href="#">
        <span class="mr-2">Back to homepage</span>
        <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

<section class="section py-6 has-background-white">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-5-desktop mb-16 mb-0-desktop">
        <div class="has-mw-lg mx-auto mx-0-desktop py-20-desktop pt-14 pb-12">
          <h1 class="title is-size-2-mobile is-size-1-tablet mb-8" style="letter-spacing: -0.04em;">Let&grave;s talk</h1>
          <span class="is-block is-size-6 has-text-grey">Lorem Ipsum is simply dummy text of the</span>
          <span class="mb-12 is-size-6 has-text-weight-medium is-block has-text-dark">contact@asitrastudio.co</span>
          <form action="">
            <div class="field mb-6">
              <div class="control">
                <input class="input px-8 has-background-white has-text-dark" type="text" placeholder="Last Name*">
              </div>
            </div>
            <div class="field mb-6">
              <div class="control">
                <input class="input px-8 has-background-white has-text-dark" type="email" placeholder="E-mail">
              </div>
            </div>
            <div class="field mb-6"><textarea class="textarea has-background-white has-text-dark" placeholder="Message" style="resize: none; height: 250px; border-radius: 40px;" rows="3"></textarea></div>
            <div class="mb-10">
              <span class="mb-6 is-block has-text-weight-medium has-text-dark">What can we help you with?</span>
              <div class="columns">
                <div class="column is-6 pb-0-mobile">

<section class="section is-relative">
  <img class="is-absolute is-top-0 is-left-0 is-fullwidth is-covered" style="object-fit: cover; height: 100%" src="asitrastudio-assets/http-codes/dark-photo-bg.png" alt="">
  <div class="container is-relative">
    <div class="has-mw-3xl mx-auto has-text-centered">
      <h2 class="title mb-10 is-size-2 is-size-1-tablet has-text-white" style="letter-spacing: -0.02em;">Meet our partners</h2>
      <p class="has-mw-md has-text-light mx-auto mb-12">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
      <div class="mb-n5 is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center">
        <img class="mb-5 mr-5 mr-10-tablet image" src="asitrastudio-assets/logo-clouds/brand-light1.png" alt="">
        <img class="mb-5 mr-10-tablet image" src="asitrastudio-assets/logo-clouds/brand-light2.png" alt="">
        <img class="mb-5 image" src="asitrastudio-assets/logo-clouds/brand-light3.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="is-relative is-clipped">
  <div class="is-fixed is-bottom-0 is-left-0 is-fullwidth pt-8 pb-10" style="z-index: 50;">
    <div class="is-flex px-6 is-justify-content-center">
      <div class="notification is-light is-light has-background-white is-inline-flex py-4 pl-5 pr-6 is-align-items-center is-rounded">
        <span class="mr-4">
          <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="0.5" width="21" height="21" rx="10.5" fill="#219653"></rect>
            <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
          </svg>
        </span>
        <p class="has-text-dark">Your settings have been saved</p>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-7">
        <div class="halos-mw-md has-mw-xl-widescreen">
          <span class="has-text-light is-block mb-4 has-text-weight-medium">Lorem Ipsum</span>
          <h1 class="title is-size-3-mobile is-size-3-tablet is-size-2-desktop has-text-white mb-7" style="letter-spacing: -0.02em;">Share your travels with friends &amp; family</h1>
          <p class="is-size-6 has-text-grey-light">It is a long established fact that a reader will be distracted by the</p>
        </div>
      </div>
      <div class="column is-5">
        <div class="buttons">
          <a class="button mr-6-desktop is-white is-rounded" href="#">
            <span class="mr-2">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="button is-outlined is-white is-rounded" href="#">
            <span class="mr-2">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section has-background-white-ter" x-data="{ tab: '', showContent: false }" x-init="tab = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-20">
      <div class="mb-8 is-inline-block">
        <h1 class="title is-relative is-inline-block is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">
          <span>Selected projects</span>
          <span class="is-absolute is-top-0 is-right-0 -mt-5 -mr-2 is-block is-size-4 has-text-grey has-text-weight-medium">(21)</span>
        </h1>
      </div>
      <ul class="is-flex-tablet -mb-3 is-align-items-center">
        <li class="mb-3 mr-6"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab1.textContent }" href="#" style="max-height: 38px;">All</a></li>
        <li class="mb-3 mr-6"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab2.textContent }" href="#" style="max-height: 38px;">Villa</a></li>
        <li class="mb-3 mr-6"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab3.textContent }" href="#" style="max-height: 38px;">Residance</a></li>
        <li class="mb-3"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab4.textContent }" href="#" style="max-height: 38px;">Apartaments</a></li>
      </ul>
    </div>
    <div class="mb-6 columns is-multiline">
      <div class="column is-12-tablet is-7-desktop pb-6" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab2.textContent != tab }">
        <a class="is-block is-relative" href="#">
          <img class="is-block image is-fullwidth" style="object-fit: cover; border-radius: 40px; height: 648px;" src="asitrastudio-assets/projects/image-six-1.png" alt="">
          <div class="p-10 is-absolute is-bottom-0 is-left-0 is-fullwidth">
            <div class="mb-3">
              <span class="tag is-white mr-3 has-background-white">Spain, Girona</span>
              <span class="tag is-white has-background-white">2023</span>

<section class="is-relative section has-background-white-ter" x-data="{ current: 0 }">
  <div class="container">
    <h1 class="title is-size-2 is-size-1-desktop mb-20" style="letter-spacing: -0.04em;">Testimonials</h1>
    <div class="columns">
      <div class="column is-5-tablet is-4-widescreen">
        <div>
          <button x-on:click="current = 0" class="button is-light is-block mb-8 py-6 px-6 px-12-desktop has-text-left" :class="{ 'has-background-white': current == 0, 'has-background-white-ter': current != 0 }" style="height: auto; border-radius: 30px;">
            <div class="is-flex align-items-center">
              <img class="image mr-6" style="width: 62px; height: 62px;" src="asitrastudio-assets/testimonials/avatar-circle1.png" alt="">
              <div>
                <span class="is-block mb-1">Wade Warren</span>
                <span class="is-size-7 has-text-grey">CEO, Since Industry</span>
              </div>
            </div>
          </button>
          <button x-on:click="current = 1" class="button is-light is-block mb-8 py-6 px-6 px-12-desktop has-text-left" :class="{ 'has-background-white': current == 1, 'has-background-white-ter': current != 1 }" style="height: auto; border-radius: 30px;">
            <div class="is-flex align-items-center">
              <img class="image mr-6" style="width: 62px; height: 62px;" src="asitrastudio-assets/testimonials/avatar-circle2.png" alt="">
              <div>
                <span class="is-block mb-1">Wade Warren</span>
                <span class="is-size-7 has-text-grey">CEO, Since Industry</span>
              </div>
            </div>
          </button>

<section class="section has-background-white-ter" style="overflow: hidden;" x-data="{ showContent: false }">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Open Position</h1>
    <div class="mb-5 px-8-mobile px-14-tablet py-9 has-background-white" style="border-radius: 20px;">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-8-tablet mb-10 mb-0-tablet">
          <h3 class="is-size-4-mobile is-size-3-tablet has-text-dark">Product Manager, Instagram Camera</h3>
          <div>
            <span class="is-size-7 has-text-dark">Full-time</span>
            <span class="mx-4 is-inline-block">
              <svg width="3" height="3" viewbox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.896 1.772C0.896 1.632 0.924 1.50133 0.98 1.38C1.036 1.25867 1.11067 1.15133 1.204 1.058C1.30667 0.955333 1.41867 0.876 1.54 0.82C1.67067 0.764 1.806 0.736 1.946 0.736C2.086 0.736 2.21667 0.764 2.338 0.82C2.46867 0.876 2.58067 0.955333 2.674 1.058C2.77667 1.15133 2.856 1.25867 2.912 1.38C2.968 1.50133 2.996 1.632 2.996 1.772C2.996 2.052 2.89333 2.29933 2.688 2.514C2.48267 2.72867 2.23533 2.836 1.946 2.836C1.65667 2.836 1.40933 2.72867 1.204 2.514C0.998667 2.29933 0.896 2.052 0.896 1.772Z" fill="#646464"></path>
              </svg>
            </span>
            <span class="is-size-7 has-text-dark">New York</span>
          </div>
        </div>
        <div class="column is-4-tablet has-text-right">
          <a class="button is-ghost px-0" href="#" style="height: 38px;">
            <span class="mr-2">See more details</span>
            <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>

<section class="section has-background-white-ter" style="overflow: hidden;">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Services</h1>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-5-desktop">
        <img class="mx-auto mx-0-desktop is-block image is-fullwidth" src="asitrastudio-assets/services/photo-left-mid.png" alt="">
      </div>
      <div class="column is-7-desktop">
        <button class="button is-ghost has-text-left has-text-weight-normal px-0 mb-8 pb-6 is-fullwidth is-block" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
          <div class="is-flex is-fullwidth is-align-items-center">
            <span class="mr-8 is-inline-block">01</span>
            <span class="is-inline-block is-size-3">De-risking your project</span>
            <span class="ml-auto" :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }">
              <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.8223 15.0312L12.4993 21.3542L6.17643 15.0313" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.5 3.646L12.5 21.1772" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </div>
          <div x-ref="container" :style="`transition: all 0.5s ease-in-out; white-space: normal; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
            <p class="mt-6 pr-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
          </div>
        </button>
        <button class="button is-ghost has-text-left has-text-weight-normal px-0 mb-8 pb-6 is-fullwidth is-block" x-data="{ accordion: false }" x-on:click="accordion = !accordion">

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-12" style="letter-spacing: -0.04em;">FAQ</h1>
    <div class="-mb-20 columns is-multiline">
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">
          <h4 class="title mb-6 is-size-4">What is Cult Wine Investment?</h4>
          <p class="is-size-6 has-text-grey">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">
          <h4 class="title mb-6 is-size-4">What is Cult Wine Investment?</h4>
          <p class="is-size-6 has-text-grey">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">
          <h4 class="title mb-6 is-size-4">What services do you provide?</h4>
          <p class="is-size-6 has-text-grey">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-16 columns is-multiline">
      <div class="column is-12-tablet is-4-desktop is-5-widescreen">
        <a class="is-inline-block" href="#">
          <img class="image is-fullwidth" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
        </a>
      </div>
      <div class="column is-12-tablet is-8-desktop is-7-widescreen">
        <ul class="-mb-2 -mx-6 is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-end">
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Contact</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Blog</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Our Storry</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Careers</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Support</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Guides</a></li>
        </ul>
      </div>
    </div>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6">
        <span class="is-size-7 has-text-grey">&copy; 2023 Asitrastudio</span>
      </div>
      <div class="column is-6 has-text-right">

<section class="section has-background-white-ter">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-6">
        <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">Blog</h1>
      </div>
      <div class="column is-6 has-text-right">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">See our blog</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="mb-16 pb-16">
      <div class="columns is-multiline">
        <div class="column is-6">
          <a class="is-block" href="#">
            <img class="box p-0 mb-6 is-block image is-fullwidth" style="object-fit: cover; height: 290px;" src="asitrastudio-assets/blog/double-photo-medium1.png" alt="">
            <div class="has-mw-lg">
              <div class="mb-3">
                <span class="tag is-light mr-3">Interior</span>

<section class="section pb-0 pt-12 pt-20-tablet has-background-white">
  <div class="container">
    <div class="has-mw-md mx-auto mb-20 has-text-centered">
      <span class="tag is-light mb-4 has-text-dark">Full Time</span>
      <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Download app</h2>
      <p class="has-mw-lg mb-8 is-size-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when</p>
      <div class="has-mw-xs mx-auto buttons is-centered is-flex-wrap-nowrap">
        <a class="mr-6 is-inline-block" href="#">
          <img class="image is-fullwidth" src="asitrastudio-assets/download/app-store.svg" alt="">
        </a>
        <a class="is-inline-block" href="#">
          <img class="image is-fullwidth" src="asitrastudio-assets/download/google.svg" alt="">
        </a>
      </div>
    </div>
    <img class="has-mw-3xl mx-auto is-block image is-fullwidth" src="asitrastudio-assets/download/phone-center.png" alt="">
  </div>
</section>

<section class="section has-background-primary">
  <div class="container">
    <div class="has-mw-md has-mw-none-desktop has-mw-lg-tablet mx-auto">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-12 is-6-desktop is-7-widescreen mb-20 mb-0-desktop">
          <div class="has-mw-xl">
            <span class="is-block mb-4 is-size-7 has-text-white">Lorem Ipsum</span>
            <h1 class="has-mw-xl title mb-12 has-text-white is-size-2" style="letter-spacing: -0.02em;">Keep up with our contant</h1>
            <p class="has-mw-sm subtitle has-text-white-bis is-size-6">It is a long established fact that a reader will be distracted by the readable content</p>
          </div>
        </div>
        <div class="column is-12-tablet is-5-widescreen is-6-desktop">
          <div>
            <span class="mb-4 ml-1 is-block is-size-5 has-text-white">Join to newsletter!</span>
            <div class="field is-flex-tablet is-justify-content-center">
              <div class="control is-fullwidth mr-0-mobile mr-3 mb-2 mb-0-tablet">
                <input class="input has-text-white has-background-transparent" type="email" placeholder="Enter your email">
              </div>
              <div class="control">
                <button class="button is-white is-fullwidth is-rounded" type="submit">Sign Up</button>
              </div>
            </div>
          </div>
        </div>

<section class="has-background-white">
  <div class="is-relative">
    <div class="container">
      <div class="has-mw-2xl-widescreen mx-auto mx-0-tablet px-5 pt-10 pb-24 pb-36-tablet">
        <a class="mb-24 mb-36-tablet is-inline-block" href="#">
          <img src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <div class="has-mw-md mx-auto has-text-centered">
          <form action="">
            <h3 class="mb-10 is-size-4 has-text-weight-medium has-text-dark" style="letter-spacing: -0.02em;">Sign in to asitrastudio</h3>
            <div class="mb-8">
              <input class="input mb-4 has-background-white has-text-dark" type="email" placeholder="E-mail">
              <div class="mb-6 is-relative">
                <input class="input has-background-white has-text-dark" type="password" placeholder="Password">
                <button class="button is-light has-background-white p-0 mt-5 mr-8 is-absolute is-top-0 is-right-0" style="height: auto;">
                  <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.1095 7.89167L7.89283 12.1083C7.33367 11.5492 7.01953 10.7908 7.01953 10C7.01953 9.60845 7.09665 9.22073 7.24649 8.85898C7.39634 8.49723 7.61596 8.16854 7.89283 7.89167C8.1697 7.6148 8.49839 7.39518 8.86014 7.24533C9.22189 7.09549 9.60961 7.01837 10.0012 7.01837C10.7919 7.01837 11.5503 7.33251 12.1095 7.89167Z" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M14.8518 4.80834C13.3935 3.70834 11.7268 3.10834 10.0018 3.10834C7.06016 3.10834 4.31849 4.84167 2.41016 7.84167C1.66016 9.01667 1.66016 10.9917 2.41016 12.1667C3.06849 13.2 3.83516 14.0917 4.66849 14.8083M7.01849 16.275C7.96849 16.675 8.97682 16.8917 10.0018 16.8917C12.9435 16.8917 15.6852 15.1583 17.5935 12.1583C18.3435 10.9833 18.3435 9.00834 17.5935 7.83334C17.3185 7.4 17.0185 6.99167 16.7102 6.60834" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12.9263 10.5833C12.8134 11.1646 12.5294 11.699 12.1106 12.1177C11.6919 12.5364 11.1576 12.8204 10.5763 12.9333M7.89297 12.1083L1.66797 18.3333M18.3346 1.66667L12.1096 7.89167" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
              <button class="button is-light is-rounded is-fullwidth" type="submit">Login</button>
            </div>

<section class="is-relative" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 is-white" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-start"><a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a></div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>

<section class="section has-background-white-ter">
  <div class="container">
    <div class="has-mw-xl has-mw-none-desktop mx-auto">
      <h1 class="title mb-20 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Get started quickly</h1>
      <div class="columns is-multiline">
        <div class="column is-12 is-4-desktop mb-8 mb-0-desktop">
          <div class="box px-10 pt-16 pb-12 has-background-white">
            <div class="has-mw-xs mx-auto has-text-centered">
              <span class="mb-8 is-block">
                <svg width="41" height="41" viewbox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5221 32.4582H13.668C6.83464 32.4582 3.41797 30.7498 3.41797 22.2082V13.6665C3.41797 6.83317 6.83464 3.4165 13.668 3.4165H27.3346C34.168 3.4165 37.5846 6.83317 37.5846 13.6665V22.2082C37.5846 29.0415 34.168 32.4582 27.3346 32.4582H26.4805C25.9509 32.4582 25.4384 32.7144 25.1138 33.1415L22.5513 36.5582C21.4238 38.0615 19.5788 38.0615 18.4513 36.5582L15.8888 33.1415C15.6155 32.7657 14.9834 32.4582 14.5221 32.4582Z" stroke="black" stroke-width="2.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M27.3292 18.7917H27.3445" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M20.4893 18.7917H20.5047" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M13.6573 18.7917H13.6726" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h4 class="mb-8 is-size-5-touch is-size-4-desktop has-text-dark" style="letter-spacing: -0.02em;">Do I need to use the Paid Partnership label for things like?</h4>
              <a class="button is-ghost px-0" href="#" style="height: 38px;">
                <span class="mr-2">See more</span>
                <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="is-fixed is-bottom-0 is-right-0 is-fullwidth has-mw-lg p-8" style="z-index: 50;">
    <div class="is-relative box py-6 px-6 has-mw-sm ml-auto has-background-white" style="border-radius: 20px;">
      <div class="is-absolute is-top-0 is-right-0 mt-5 mr-5">
        <button class="is-inline-block button is-light has-background-white p-0" x-on:click="open=false">
          <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.625 4.84212L5.57197 4.78909L1.47264 0.689757C1.31908 0.536241 1.11083 0.45 0.89369 0.45C0.67656 0.45 0.468319 0.536235 0.314757 0.689741C0.314752 0.689747 0.314747 0.689752 0.314741 0.689757M5.625 4.84212L0.314741 0.689757M5.625 4.84212L5.67803 4.78909L9.77736 0.689757C9.93093 0.536241 10.1392 0.45 10.3563 0.45C10.5734 0.45 10.7817 0.536235 10.9352 0.689741C11.0888 0.843304 11.175 1.05155 11.175 1.26869C11.175 1.48583 11.0888 1.69408 10.9352 1.84764L6.83591 5.94697L6.78288 6L6.83591 6.05303L10.9352 10.1524M5.625 4.84212L10.9352 10.1524M0.314741 0.689757C0.161235 0.843319 0.075 1.05156 0.075 1.26869C0.075 1.48583 0.161241 1.69408 0.314757 1.84764M0.314741 0.689757L0.314757 1.84764M0.314757 1.84764L4.41409 5.94697L4.46712 6L4.41409 6.05303L0.314757 10.1524C0.161241 10.3059 0.075 10.5142 0.075 10.7313C0.075 10.9484 0.161235 11.1567 0.314741 11.3102C0.468304 11.4638 0.676552 11.55 0.89369 11.55C1.11083 11.55 1.31908 11.4638 1.47264 11.3102L5.57197 7.21091L5.625 7.15788L5.67803 7.21091L9.77736 11.3102C9.93093 11.4638 10.1392 11.55 10.3563 11.55C10.5734 11.55 10.7817 11.4638 10.9352 11.3103C10.9352 11.3103 10.9353 11.3102 10.9353 11.3102M0.314757 1.84764L10.9353 11.3102M10.9353 11.3102C11.0888 11.1567 11.175 10.9484 11.175 10.7313C11.175 10.5142 11.0888 10.3059 10.9352 10.1524M10.9353 11.3102L10.9352 10.1524" fill="black" stroke="black" stroke-width="1"></path>
          </svg>
        </button>
      </div>
      <div class="is-flex mb-4 is-align-items-center">
        <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="21" height="21" rx="10.5" fill="#219653"></rect>
          <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="white"></path>
        </svg>
        <span class="ml-4 has-text-dark">Your settings have been saved</span>
      </div>
      <p class="mw-xs text-secondary-light fs-9 mb-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
      <div class="buttons"><a class="button is-dark is-size-7 py-3 is-rounded" href="#">I accept</a><a class="button is-dark is-size-7 py-3 is-outlined is-rounded" href="#">Don&apos;t accept</a></div>
    </div>
  </div>
</section>