Desktop Design

Mobile Design

Base Apparel coming soon page

="17.0.7"><section _ngcontent-ng-c2283532919=""><app-h

485519=""><section _ngcontent-ng-c2693485519="" class="h-screen w-screen"><main

w-screen"><main _ngcontent-ng-c2693485519="" class="flex flex-col justify-center sm:grid sm:grid-cols-5 sm:grid-rows-4 sm:h-screen"><div _

h-screen"><div _ngcontent-ng-c2693485519="" class="ml-8 py-8 sm:row-start-1 sm:col-start-2 sm:col-end-3 sm:mt-24 sm:ml-3"><img _

sm:ml-3"><img _ngcontent-ng-c2693485519="" src="/assets/svgs/logo.svg" alt="Brand Logo" class="h-6"></div>

-6"></div><div _ngcontent-ng-c2693485519="" class="sm:col-start-4 sm:col-end-6 sm:row-span-5"><img _

w-span-5"><img _ngcontent-ng-c2693485519="" src="/assets/images/hero-mobile.jpg" alt="Model Image" class="h-full w-full object-cover sm:hidden"><img _

m:hidden"><img _ngcontent-ng-c2693485519="" src="/assets/images/hero-desktop.jpg" alt="Model Image" class="h-full w-full object-center hidden sm:block"></div>

ck"></div><div _ngcontent-ng-c2693485519="" class="mx-auto text-center mt-7 sm:col-start-2 sm:col-end-2 sm:row-start-2 sm:text-start sm:mx-0"><p _ng

sm:mx-0"><p _ngcontent-ng-c2693485519="" class="text-5xl text-desaturated-red tracking-widest font-extralight sm:text-6xl 2xl:text-6xl"> WE'RE

WE'RE </p><p _ngcontent-ng-c2693485519="" class="text-5xl text-slate-700 tracking-widest sm:text-6xl">COMING

COMING</p><p _ngcontent-ng-c2693485519="" class="text-5xl text-slate-700 tracking-widest sm:text-6xl">SOON</

</p></div><div _ngcontent-ng-c2693485519="" class="text-desaturated-red px-8 text-center text-sm my-2 sm:row-start-3 sm:col-start-2 sm:col-end-4 sm:mt-10 sm:px-0 sm:text-start lg:pr-32 sm:text-base 2xl:text-lg"><p _ng

:text-lg"><p _ngcontent-ng-c2693485519=""> Hello

</p></div><div _ngcontent-ng-c2693485519="" class="border border-slate-700 border-opacity-20 w-3/4 rounded-3xl mx-auto pl-4 relative sm:row-start-4 sm:col-start-2 sm:h-max sm:w-max sm:-mt-4 lg:w-96"><form

lg:w-96"><form _ngcontent-ng-c2693485519="" novalidate="" class="flex justify-between ng-untouched ng-pristine ng-invalid"><input

-invalid"><input _ngcontent-ng-c2693485519="" type="email" placeholder="Email Address" name="userEmail" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required="" class="placeholder-custom-color w-full focus:outline-none ng-untouched ng-pristine ng-invalid"><div _

-invalid"><div _ngcontent-ng-c2693485519="" class="items-center mr-2" hidden=""><img _

hidden=""><img _ngcontent-ng-c2693485519="" src="/assets/svgs/icon-error.svg" alt=""></div>

=""></div><button _ngcontent-ng-c2693485519="" type="submit" class="h-10 w-14 rounded-3xl custom-gradient"><i _ng

gradient"><i _ngcontent-ng-c2693485519="" class="fa-solid fa-chevron-right text-white"></i></

Please log in to post a comment

Community feedback

Responsive coming soon layout with input. Angular/Tailwind/Typescript

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community