UI Components – Asitrastudio Library

<section class="position-relative py-12 py-md-24 bg-light-light overflow-hidden">
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 start-50 ms-lg-20 ms-xl-n52 mt-8 mt-lg-20 img-fluid rounded-5" style="z-index: 0;" src="asitrastudio-assets/services/map-small.png" alt=""/>
    <h1 class="fw-medium mb-24" >Services</h1>
    <div class="position-relative d-xl-flex mw-xl mw-xl-none mx-auto pb-8 mb-24 align-items-end border-bottom border-2 border-dark">
      <div class="mb-8 mb-xl-0"><span class="d-block mb-n2 fs-9 fw-medium text-secondary-light" >01</span>
        <h3 class="fw-medium" >De-risking your project</h3>
      </div>
      <div class="mw-md text-end mb-8 mb-xl-0 ms-auto me-xl-20">
        <p class="mb-0" >
          We follow the RIBA Plan of Work 2020 to ensure an orderly framework and project clarity from the outset. First,
          we
          conduct feasibility studies and a project review.
        </p>
      </div><span class="d-block text-end">
        <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></span>
    </div>
    <div class="d-xl-flex mw-xl mw-xl-none mx-auto pb-8 mb-24 align-items-end border-bottom border-2 border-dark">
      <div class="mb-8 mb-xl-0"><span class="d-block mb-n2 fs-9 fw-medium text-secondary-light" >02</span>
        <h3 class="fw-medium" >Planning strategies</h3>
      </div>
      <div class="mw-md text-end mb-8 mb-xl-0 ms-auto me-xl-20">

<section class="position-relative">
  <nav class="navbar navbar-expand-lg navbar-light bg-light-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" 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 class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="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>
  </nav>

<section class="pt-12 pt-md-20 pt-lg-0 bg-light-light overflow-hidden">
  <div class="position-relative container"><img class="d-none d-lg-block position-absolute bottom-0 end-0 me-n40 me-xl-24" style="z-index: 1;" src="asitrastudio-assets/cta/woman-cta-right.png" alt=""/>
    <div class="position-relative py-lg-36 mw-lg-xl mw-xl-3xl"><span class="d-block mb-4 fw-medium fs-9 text-light-dark" >Lorem Ipsum</span>
      <h1 class="mb-14"><span >Share your travels with</span><span> </span><span class="d-inline-block pb-2 text-light-dark border-light-dark border-3 border-bottom" >friends &amp; family</span></h1>
      <div class="d-flex flex-column flex-sm-row position-relative" style="z-index: 2;"><a class="btn mb-3 mb-sm-0 me-sm-6 btn-primary" href="#"><span class="me-2" >Get consulation</span>
          <svg class="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="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a><a class="btn btn-outline-dark" href="#"><span class="me-2" >Get consulation</span>
          <svg class="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><img class="d-block mt-6 img-fluid d-lg-none" src="asitrastudio-assets/cta/woman-cta-right.png" alt=""/>
    </div>
  </div>
</section>

<section>
  <div class="position-fixed top-0 start-0 h-100 w-100">
    <div class="d-flex h-100 w-100 py-20 px-5 align-items-center justify-content-center">
      <div class="position-relative pt-16 pb-10 pt-md-10 px-6 px-md-16 w-100 mw-xl mx-auto text-center bg-white border rounded-5">
        <button class="position-absolute top-0 end-0 mt-6 me-8 btn btn-link p-0">
          <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="#222222" stroke-width="1"></path>
          </svg>
        </button>
        <div class="mw-md mx-auto">
          <form action="">
            <h3 class="fs-4 fw-medium mb-10" >Sign in to studio</h3><a class="btn btn-lg px-4 mb-2 w-100 btn-outline-light" href="#"><img src="asitrastudio-assets/sign-in/google.svg" alt=""/><span class="ms-4 text-dark" >Sign in with Google</span></a><a class="btn btn-lg px-4 mb-8 w-100 btn-outline-light" href="#">
              <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
                <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
              </svg><span class="ms-4 text-dark" >Sign in with Apple</span></a>
            <div class="d-flex mb-8 align-items-center">
              <div class="w-100 bg-light" style="height: 2px;"></div><span class="fs-10 mx-5 text-light-dark text-uppercase" >or</span>
              <div class="w-100 bg-light" style="height: 2px;"></div>
            </div>
            <div>
              <input class="form-control mb-4" type="email" placeholder="E-mail"/>
              <div class="position-relative mb-6">
                <input class="form-control" type="password" placeholder="Password"/>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row align-items-end mb-20">
      <div class="col-12 col-xxl-7 mb-10 mb-xxl-0">
        <div class="d-inline-block"><span class="d-block mb-n4 me-sm-n10 text-end fs-4 fw-medium text-secondary-light" >(21)</span>
          <h1 >Selected projects</h1>
        </div>
      </div>
      <div class="col-12 col-xxl-5">
        <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-end">
          <li class="me-8"><a class="btn btn-dark py-2 px-5 fs-7" href="#" >All</a></li>
          <li class="me-8"><a class="btn py-2 px-5 fs-7" href="#" >Villa</a></li>
          <li class="me-8"><a class="btn py-2 px-5 fs-7" href="#" >Residance</a></li>
          <li><a class="btn py-2 px-5 fs-7" href="#" >Apartaments</a></li>
        </ul>
      </div>
    </div>
    <div class="row mb-20">
      <div class="col-12 col-md-7 mb-20 mb-md-0"><a class="d-block" href="#"><img class="img-fluid mb-8 rounded-5" style="max-height: 800px;" src="asitrastudio-assets/projects/photo-square3.png" alt=""/>
          <div class="mw-xs mw-lg-md"><span class="badge mb-3 border border-dark" >Apartament</span>
            <h3 class="fs-3 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
          </div></a></div>
      <div class="col-12 col-md-5"><a class="d-block" href="#"><img class="img-fluid w-100 mb-8 rounded-5" style="object-fit: cover; max-height: 520px;" src="asitrastudio-assets/projects/photo-view5.png" alt=""/>
          <div class="mw-xs mw-lg-md"><span class="badge mb-3 border border-dark" >Apartament</span>

<section class="position-relative bg-light-light overflow-hidden">
  <div class="position-relative container"><img class="d-none d-md-block position-absolute bottom-0 end-0 me-md-n24 me-xl-0 col-md-10 col-xl-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt=""/>
    <div class="position-relative">
      <div class="mw-sm mw-lg-lg mx-auto mx-md-0 pt-12 pb-20 pt-md-20 py-md-40">
        <h2 class="fs-1 mb-8" >Get our mobile app to make the process faster</h2>
        <p class="mw-md fs-6 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="d-flex mw-sm"><a class="d-inline-block me-6" href="#"><img class="img-fluid" src="asitrastudio-assets/download/app-store.svg" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" src="asitrastudio-assets/download/google.svg" alt=""/></a></div>
      </div><img class="d-md-none img-fluid w-100" src="asitrastudio-assets/download/phone-right-xl.png" alt=""/>
    </div>
  </div>
</section>

<section class="position-relative overflow-hidden">
  <div class="position-fixed bottom-0 start-0 w-100 pt-8 pb-10" style="z-index: 50;">
    <div class="d-flex px-6 justify-content-center">
      <div class="d-inline-flex py-4 ps-5 pe-6 align-items-center bg-success-light border border-success rounded-4"><span class="me-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="text-success-dark mb-0" >Your settings have been saved</p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-20 mb-lg-0">
        <div class="mw-lg">
          <h2 class="fs-1 mb-10" >Meet our partners</h2><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >I will become a sponsor</span>
            <svg class="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="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="row">
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-youtube.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-visa.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-ikea.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <h1 class="mb-20" >Get started quickly</h1>
    <div class="pb-10 pt-20 pt-lg-10 px-12 px-xl-32 bg-dark rounded-5">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="mw-md mx-auto">
            <h3 class="text-white fs-1 mb-6" >Althhorpe Street Leamigton Spa</h3>
            <p class="mw-xs text-secondary-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="btn btn-outline-light" href="#"><span class="me-2" >Get consulation</span>
              <svg class="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 class="col-12 col-lg-6"><img class="img-fluid d-block" src="asitrastudio-assets/features/double-photo.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-7">
          <div class="mw-xl py-20 py-lg-40"><span class="d-block mb-4 fw-medium fs-9" >Lorem Ipsum</span>
            <div class="mw-sm mw-md-md mw-lg-none mb-12">
              <h1 class="mb-8" >Keep up with our contant</h1>
              <p class="mw-sm fs-7 text-secondary-light mb-0" >
                It is a long established fact that a reader will be
                distracted by the readable content
              </p>
            </div>
            <div>
              <div class="d-sm-flex mw-xl">
                <div class="w-100 mb-3 mb-sm-0 me-4">
                  <input class="form-control bg-white border-0" type="email" placeholder="Enter your email"/>
                </div>
                <div class="flex-shrink-0">
                  <button class="btn w-100 h-100 btn-dark" type="submit" >Sign Up</button>
                </div>
              </div>
            </div>
          </div>

<section class="position-relative py-12 py-md-24 bg-light overflow-hidden">
  <div class="container">
    <div class="mw-6xl mx-auto text-center"><span class="badge mb-10 border border-2 border-dark" >Apartament</span>
      <p class="fw-medium fs-4 mb-10"><span >&ldquo;KW70 Fix is a leading real estate investment firm in the World, headquartered in New York with offices in</span><span class="text-secondary-light" >London, Chicago, Barcelona, Vienna, Rome, Las Vegas.</span><span >
          KW70 Fix looks for markets and locations that have strong fundamental drivers such as job and income growth, better quality of life and a
          business-friendly environment. In those carefully selected&rdquo;</span></p>
      <div class="d-flex mb-16 align-items-center text-start justify-content-center"><img class="img-fluid me-4" src="asitrastudio-assets/testimonials/avatar-men.png" alt=""/>
        <div><span class="d-block fw-medium" >Wade Warren</span><span class="d-block fs-9 text-secondary-light" >CEO, Since Industry</span></div>
      </div>
      <div><a class="btn me-9 d-inline-flex align-items-center justify-content-center p-0 btn-outline-dark rounded-pill" href="#" style="width: 74px; height: 74px;">
          <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.7051 7.12817L4.15732 13.6759L10.7051 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M22.4941 13.6759H4.33949" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a><a class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-dark rounded-pill" href="#" style="width: 74px; height: 74px;">
          <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.2949 7.12817L22.8427 13.6759L16.2949 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M4.50586 13.6759H22.6605" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </div>
</section>

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-5 mb-20 mb-lg-0">
        <div class="mw-lg">
          <h1 class="mb-8" >Open Positions</h1><a class="btn btn-outline-dark" href="#" >See all open positions</a>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div><a class="d-block mb-8" href="#">
            <div class="mb-3"><span class="fs-9 fw-medium text-secondary-light" >Full-time</span><span class="d-inline-block mx-4">
                <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="fs-9 fw-medium text-secondary-light" >Remote</span></div>
            <div class="d-flex align-items-center justify-content-between pb-4 border-bottom border-dark border-2">
              <h3 class="fs-3 mb-0" >Product Manager, Instagram Camera</h3><span class="ps-6">
                <svg width="33" height="33" viewbox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M30 3L3 30" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M30 27.758V3H5.24196" stroke="black" stroke-width="4.3875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></span>
            </div></a><a class="d-block mb-8" href="#">
            <div class="mb-3"><span class="fs-9 fw-medium text-secondary-light" >Part-time</span><span class="d-inline-block mx-4">
                <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>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mb-16">
      <div class="d-inline-block mb-8"><span class="d-block mb-n4 me-sm-n10 text-end fs-4 fw-medium text-secondary-light" >(21)</span>
        <h1 >Selected projects</h1>
      </div>
      <ul class="list-unstyled d-flex mb-n4 flex-wrap align-items-center">
        <li class="pb-4 me-6"><a class="btn btn-dark py-2 px-5 fs-7" href="#" >All</a></li>
        <li class="pb-4 me-6"><a class="btn btn-outline-dark py-2 px-5 fs-7" href="#" >Villa</a></li>
        <li class="pb-4 me-6"><a class="btn btn-outline-dark py-2 px-5 fs-7" href="#" >Residance</a></li>
        <li class="pb-4"><a class="btn btn-outline-dark py-2 px-5 fs-7" href="#" >Apartaments</a></li>
      </ul>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mb-20 mb-lg-0">
        <div><a class="d-block mb-8" href="#">
            <div class="mb-2"><span class="fs-9 fw-medium text-light-dark" >Apartament</span><span class="d-inline-block mx-4">
                <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="#A5A5A5"></path>
                </svg></span><span class="fs-9 fw-medium text-light-dark" >Girona, Spain</span></div>
            <div class="d-flex align-items-center justify-content-between pb-4 border-bottom border-2">
              <h3 class="text-light-dark" >Bulkovka Dent</h3>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 2L2 22" stroke="#A5A5A5" stroke-width="3.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="position-relative bg-light-light">
  <div class="px-5 py-6 border-top border-light">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="#" >Homepage</a></li>
          <li class="breadcrumb-item"><a href="#" >Services</a></li>
          <li class="breadcrumb-item"><a href="#" >Lorem Ipsum</a></li>
        </ol>
      </nav>
    </div>
  </div>
</section>

<section class="py-12 py-md-20 bg-dark">
  <div class="container">
    <div class="mw-xl mx-auto mb-16 text-center">
      <h3 class="fs-4 text-white mb-12" >Join our newsletter to stay up to date on features and realases</h3>
      <div class="d-sm-flex mw-xl">
        <div class="w-100 mb-3 mb-sm-0 me-3">
          <input class="form-control border-secondary" type="email" placeholder="Enter your email"/>
        </div>
        <div class="flex-shrink-0">
          <button class="btn w-100 h-100 btn-secondary" type="submit" >Subscribe</button>
        </div>
      </div>
    </div>
    <div class="pt-20 border-top border-secondary">
      <div class="row mb-20">
        <div class="col-12 col-xl-4 mb-12 mb-xl-0"><a class="d-inline-block" href="#"><img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt=""/></a></div>
        <div class="col-6 col-md-3 col-xl-2 mb-8 mb-md-0">
          <h5 class="fs-7 text-white mb-4" >About</h5>
          <ul class="list-unstyled">
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Contact</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Blog</a></li>
            <li class="mb-2"><a class="d-inline-block text-light-dark" href="#" >Our Storry</a></li>
            <li><a class="d-inline-block text-light-dark" href="#"><span class="me-2" >Careers</span><span class="badge px-2 py-1 fs-10 bg-info text-white text-uppercase" >Hiring</span></a></li>
          </ul>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mw-md mw-lg-none mx-auto">
      <div class="row align-items-end mb-20">
        <div class="col-12 col-lg-5 mb-8 mb-lg-0">
          <h1 class="mb-0" >Premium Membership</h1>
        </div>
        <div class="col-12 col-lg-7">
          <div class="d-flex align-items-center justify-content-end"><span class="fs-6 fs-medium" >Billed monthly</span>
            <div class="d-inline-flex mx-4 mx-lg-8 bg-dark rounded-pill" style="padding: 2px;">
              <button class="btn p-0 bg-white" style="width: 26px; height: 26px;"></button>
              <button class="btn p-0 bg-transparent" style="width: 26px; height: 26px;"></button>
            </div>
            <div class="d-md-inline-flex align-items-center"><span class="d-inline-block me-3 fs-6 fs-medium text-light-dark" >Billed yearly</span><span class="d-inline-block py-1 px-3 fs-10 fw-semibold border border-dark rounded-pill" >
                20%
                SAVE</span></div>
          </div>
        </div>
      </div>
      <div class="border rounded-5">
        <div class="row">
          <div class="col-12 col-lg-4">
            <div class="h-100 pt-10 pb-10 px-8"><span class="d-block mb-2 fs-6 fw-semibold" >Starter plan</span>
              <h3 class="fs-1 fw-medium mb-4" >Free</h3>

<section class="py-10 bg-light-light">
  <div class="container">
    <div class="row align-items-end mb-12">
      <div class="col-12 col-md-6 col-lg-8 mb-8 mb-md-0">
        <div><span class="badge mb-4 bg-dark text-white" >Error</span>
          <h1 class="mb-6" >Error 404</h1>
          <p class="mw-md mw-xl-none mb-0" >
            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>
      </div>
      <div class="col-12 col-md-6 col-lg-4 text-end"><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >Back to homepage</span>
          <svg class="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><img class="img-fluid w-100 rounded-5" src="asitrastudio-assets/http-codes/long-banner.png" alt=""/>
  </div>
</section>

<section class="position-relative overflow-hidden">
  <div class="position-fixed bottom-0 start-0 w-100 pt-8 pb-10" style="z-index: 50;">
    <div class="d-flex px-6 justify-content-center">
      <div class="d-inline-flex py-4 ps-5 pe-6 align-items-center bg-warning-light border border-warning rounded-4"><span class="me-4">
          <svg width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5013 1.91669C6.2169 1.91669 1.91797 6.21562 1.91797 11.5C1.91797 16.7844 6.2169 21.0834 11.5013 21.0834C16.7857 21.0834 21.0846 16.7844 21.0846 11.5C21.0846 6.21562 16.7857 1.91669 11.5013 1.91669ZM12.1817 16.9721C11.9997 17.1443 11.7502 17.25 11.5013 17.25C11.2519 17.25 11.003 17.1443 10.8209 16.9721C10.6483 16.79 10.543 16.5406 10.543 16.2917C10.543 16.0423 10.6483 15.7933 10.8209 15.6113C11.185 15.2566 11.8172 15.2566 12.1817 15.6113C12.3539 15.7933 12.4596 16.0423 12.4596 16.2917C12.4596 16.5505 12.3539 16.79 12.1817 16.9721ZM12.4596 12.4584C12.4596 12.9876 12.0305 13.4167 11.5013 13.4167C10.9721 13.4167 10.543 12.9876 10.543 12.4584V6.70835C10.543 6.17912 10.9721 5.75002 11.5013 5.75002C12.0305 5.75002 12.4596 6.17912 12.4596 6.70835V12.4584Z" fill="#F0B400"></path>
          </svg></span>
        <p class="text-success-dark mb-0" >Please check your email to confirm your address befere you can see that</p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <div class="d-sm-flex align-items-center justify-content-center mb-10">
        <div class="mb-6 me-6">
          <div class="d-inline-flex me-6 align-items-center justify-content-center bg-white rounded-4" style="width: 70px; height: 70px;"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/win-sm.png" alt=""/></div>
          <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-4" style="width: 70px; height: 70px;"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/pp-sm.png" alt=""/></div>
        </div>
        <div>
          <div class="d-inline-flex me-6 align-items-center justify-content-center bg-white rounded-4" style="width: 70px; height: 70px;"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/spotify-sm.png" alt=""/></div>
          <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-4" style="width: 70px; height: 70px;"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/visa-sm.png" alt=""/></div>
        </div>
      </div>
      <h2 class="mb-6" >Meet our partners</h2>
      <p class="mw-md mx-auto text-secondary-light" >
        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>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row align-items-center mb-20">
      <div class="col-12 col-sm-6 mb-8 mb-sm-0">
        <h1 >Blog</h1>
      </div>
      <div class="col-12 col-sm-6">
        <div class="d-flex align-items-center justify-content-end"><a class="btn me-8 d-inline-flex align-items-center justify-content-center p-0 btn-outline-dark rounded-pill" href="#" style="width: 74px; height: 74px;">
            <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.7051 7.12817L4.15732 13.6759L10.7051 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M22.4941 13.6759H4.33949" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a><a class="btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-dark rounded-pill" href="#" style="width: 74px; height: 74px;">
            <svg width="27" height="27" viewbox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.2949 7.12817L22.8427 13.6759L16.2949 20.2237" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M4.50586 13.6759H22.6605" stroke="currentColor" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="d-flex mb-20">
      <div class="flex-md-shrink-0 col-12 col-sm-7 col-md-5 me-10"><a class="d-block" href="#"><img class="img-fluid d-block w-100 mb-6 rounded-5" style="object-fit: cover; height: 290px;" src="asitrastudio-assets/blog/blog-third1.png" alt=""/>
          <div class="mw-sm">
            <div class="mb-3"><span class="badge me-3 border border-dark" >Interior</span><span class="d-inline-block fs-9 text-secondary-light" >9 min read</span></div>
            <h4 class="fs-3 fw-medium mb-6" >How to decorating ourdoor sofa</h4>
            <p >