Top menu

<div class="t1 t1-start flex flex-center bg-c-gray-850 mode-open"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex flex-col w6:flex-row w-full align-items-stretch justify-content-between"> <div class="t1 flex flex-row"> <a class="t1 flex-1 flex px-16 h-64" href="#"> <div class="t1 flex flex-center"> <div class="t1 flex flex-center"> <svg class="t1 w-40 h-40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="20" fill="#fff" fill-opacity=".2"/><circle cx="20" cy="20" r="9" stroke="#fff" stroke-width="2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.29 21.939a3 3 0 11-.18-4.072l1.417-1.411a5 5 0 10.278 6.789l-1.515-1.306z" fill="#fff"/></svg> </div> </div> <div class="t1 flex flex-center color-white-90 hover:/color-white ml-8 relative br-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:/before:w-full w10:focus:/before:w-full w10:active:/before:w-full w10:before:bg-c-white">Company Ltd</div> </a> <button class="t1 flex flex-center w-64 h-64 w6:hidden"> <svg class="t1 w-24 h-24 fill-white-50 hover:fill-white focus:fill-white active:fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg> </button> </div> <div class="t1 hidden mode-open:///flex flex-col w6:flex-row"> <a class="t1 flex align-items-center justify-content-start w6:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 1 </a> <a class="t1 flex align-items-center justify-content-start w6:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 2 </a> <a class="t1 flex align-items-center justify-content-start w6:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 3 </a> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center bg-c-gray-850 mode-open"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex flex-col w10:flex-row w-full align-items-stretch justify-content-between"> <div class="t1 flex flex-row"> <a class="t1 flex-1 flex px-16 h-64" href="#"> <div class="t1 flex flex-center"> <div class="t1 flex flex-center"> <svg class="t1 w-40 h-40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="20" fill="#fff" fill-opacity=".2"/><circle cx="20" cy="20" r="9" stroke="#fff" stroke-width="2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.29 21.939a3 3 0 11-.18-4.072l1.417-1.411a5 5 0 10.278 6.789l-1.515-1.306z" fill="#fff"/></svg> </div> </div> <div class="t1 flex flex-center color-white-90 hover:/color-white ml-8 relative br-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:/before:w-full w10:focus:/before:w-full w10:active:/before:w-full w10:before:bg-c-white">Company Ltd</div> </a> <button class="t1 flex flex-center w-64 h-64 w10:hidden"> <svg class="t1 w-24 h-24 fill-white-50 hover:fill-white focus:fill-white active:fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg> </button> </div> <div class="t1 hidden mode-open:///flex flex-col w10:flex-row"> <a class="t1 flex align-items-center justify-content-start w10:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 1 </a> <a class="t1 flex align-items-center justify-content-start w10:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 2 </a> <a class="t1 flex align-items-center justify-content-start w10:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 3 </a> <div class="t1 flex flex-center p-16"> <a class="t1 u1.btn u1.btn-l w10:u1.btn-s u1.btn-dark-action flex w-full w10:inline-flex w10:w-auto" href="#">Action</a> </div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center bg-c-gray-850 mode-open"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex flex-col w10:flex-row w-full align-items-stretch justify-content-between"> <div class="t1 flex flex-row"> <a class="t1 flex-1 flex px-16 h-64" href="#"> <div class="t1 flex flex-center"> <div class="t1 flex flex-center"> <svg class="t1 w-40 h-40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="20" fill="#fff" fill-opacity=".2"/><circle cx="20" cy="20" r="9" stroke="#fff" stroke-width="2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.29 21.939a3 3 0 11-.18-4.072l1.417-1.411a5 5 0 10.278 6.789l-1.515-1.306z" fill="#fff"/></svg> </div> </div> <div class="t1 flex flex-center color-white-90 hover:/color-white ml-8 relative br-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:/before:w-full w10:focus:/before:w-full w10:active:/before:w-full w10:before:bg-c-white">Company Ltd</div> </a> <button class="t1 flex flex-center w-64 h-64 w10:hidden"> <svg class="t1 w-24 h-24 fill-white-50 hover:fill-white focus:fill-white active:fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg> </button> </div> <div class="t1 hidden mode-open:///flex flex-col w10:flex-row"> <a class="t1 flex align-items-center justify-content-start w10:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 1 </a> <a class="t1 flex align-items-center justify-content-start w10:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 2 </a> <a class="t1 flex align-items-center justify-content-start w10:justify-content-center h-64 color-white-90 hover:color-white relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-white" href="#"> Page 3 </a> <div class="t1 flex flex-center p-16 w10:py-0"> <a class="t1 u1.btn u1.btn-l w10:u1.btn-s u1.btn-dark-neutral-2 flex w-full w10:inline-flex w10:w-auto" href="#">Secondary</a> </div> <div class="t1 flex flex-center p-16 pt-0 w10:py-0 w10:pl-0"> <a class="t1 u1.btn u1.btn-l w10:u1.btn-s u1.btn-dark-action flex w-full w10:inline-flex w10:w-auto" href="#">Action</a> </div> </div> </div> </div> </div>

<div class="t1 t1-start flex flex-center bg-c-white mode-open"> <div class="t1 w-full w6:max-w-624 w7:max-w-768 w10:max-w-960"> <div class="t1 flex flex-col w6:flex-row w-full align-items-stretch justify-content-between"> <div class="t1 flex flex-row"> <a class="t1 flex-1 flex px-16 h-64" href="#"> <div class="t1 flex flex-center"> <div class="t1 flex flex-center"> <svg class="t1 w-40 h-40" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="#12A4E2"/><circle cx="50" cy="50" r="22.5" stroke="#fff" stroke-width="5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M55.724 54.846a7.5 7.5 0 11-.452-10.18l3.545-3.527A12.46 12.46 0 0050 37.5c-6.904 0-12.5 5.596-12.5 12.5S43.096 62.5 50 62.5c3.808 0 7.218-1.703 9.511-4.389l-3.787-3.265z" fill="#fff"/></svg> </div> </div> <div class="t1 flex flex-center color-blue ml-8 relative br-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:/before:w-full w10:focus:/before:w-full w10:active:/before:w-full w10:before:bg-c-blue">Company Ltd</div> </a> <button class="t1 flex flex-center w-64 h-64 w6:hidden"> <svg class="t1 w-24 h-24 fill-blue-500-50 hover:fill-blue focus:fill-blue active:fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg> </button> </div> <div class="t1 hidden mode-open:///flex flex-col w6:flex-row"> <a class="t1 flex align-items-center justify-content-start w6:justify-content-center h-64 color-blue relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-blue" href="#"> Page 1 </a> <a class="t1 flex align-items-center justify-content-start w6:justify-content-center h-64 color-blue relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-blue" href="#"> Page 2 </a> <a class="t1 flex align-items-center justify-content-start w6:justify-content-center h-64 color-blue relative bx-16-transparent w10:before:absolute w10:before:w-0 w10:before:h-3 w10:before:rounded-full w10:before:bottom-16 w10:before:ease-in-out w10:before:duration-150 w10:before:transition-all w10:hover:before:w-full w10:focus:before:w-full w10:active:before:w-full w10:before:bg-c-blue" href="#"> Page 3 </a> </div> </div> </div> </div>