Login
Holding Pages

Holding from the Aura project

05 Apr 2023

Holding from the Aura project
HTML
SCSS
PostCSS 
                            <div class="w-full h-[calc(100*var(--vh))] flex flex-col">
	<span class="absolute right-0 top-0 -z-10 w-1/5 max-md:w-1/3">
		<img
			class="w-full h-full object-contain"
			src="./images/ellipse.svg"
			alt=""
		/>
	</span>
	<div class="container py-8 max-md:py-6 max-sm:py-3">
		<div class="grid grid-cols-12 max-lg:grid-cols-6">
			<a href="#" class="col-span-2">
				<img src="./images/logo.svg" alt="" />
			</a>
		</div>
	</div>
	<span
		class="block w-full -z-20 shrink-0 h-1 max-md:h-0.5 bg-gradient-to-r from-orange via-pink to-magenta"
	></span>
	<div class="flex flex-col items-center justify-center max-sm:grow">
		<div class="container !mb-40 max-md:!mb-12">
			<h1
				class="text-7xl uppercase font-bold mt-32 max-md:mt-16 max-sm:mt-8 mb-10 max-md:text-4xl"
			>
				Introducing <span class="text-blue">AURA</span>
			</h1>
			<h2 id="remove-br" class="text-2xl max-md:text-lg font-medium text-dark">
				А Talent as a Service and AI-powered wellbeing <br />
				platform for your workforce
			</h2>
		</div>
		<div class="container grid grid-cols-12 gap-6 !mb-4">
			<p
				class="text-lg relative pl-4 col-span-5 max-lg:col-span-full max-lg:mb-6 max-sm:mb-8"
			>
				<span
					class="line-gradient absolute w-px h-full left-0 inset-y-0"
				></span>
				We are currently preparing for launch, but if you’d like to know more,
				then please reach out to us, we’d love to hear
				<strong>from you.</strong>
			</p>

			<div
				class="col-span-3 col-start-8 max-lg:col-span-6 max-md:col-span-full"
			>
				<p class="text-xl text-blue font-medium mb-1.5 max-md:text-lg">
					Email:
				</p>
				<a
					href="mailto:Hello@auratechnology.io"
					class="text-base font-bold text-dark transition-colors hover:text-pink w-fit"
				>
					Hello@auratechnology.io
				</a>
			</div>

			<div
				class="col-span-2 col-start-11 max-lg:col-span-6 max-md:col-span-full"
			>
				<p class="text-xl text-blue font-medium mb-1.5 max-md:text-lg">
					Phone:
				</p>
				<a
					href="tel:01172840700"
					class="text-base font-bold text-dark transition-colors hover:text-pink w-fit"
				>
					0117 284 0700
				</a>
			</div>
		</div>
	</div>
	<span
		class="mt-auto mb-32 shrink-0 max-md:mb-16 max-md:h-0.5 block w-full h-1 bg-gradient-to-r from-orange via-pink to-magenta"
	></span>
</div>
                        
                            .line-gradient {
  background: linear-gradient(17.48deg, #56BEC8 14.32%, #4EB2C6 22.73%, #3C94BC 39.86%, #3063A4 63.93%, #314090 80.09%);
}

#remove-br {
  @include media(650) {
    br {
      display: none;
    }
  }
}
                        
                            .line-gradient {
	background: linear-gradient(17.48deg, #56BEC8 14.32%, #4EB2C6 22.73%, #3C94BC 39.86%, #3063A4 63.93%, #314090 80.09%);
}

#remove-br {
	@mixin media 650 {
		br {
			display: none;
		}
	}
}

Holding секція з проекту Aura

В основному зроблена за допомогою Tailwind CSS.

0