Components
<div class="relative type bg-p-900 text-p-50 px-5% py-sm md:py-xs">
<!-- TABLET/DESKTOP NAV -->
<div class="max-w-screen-xl mx-auto flex items-center justify-between">
<a href="/" class="inline-block">Logo here</a>
<nav class="hidden md:block flex-shrink-0 ">
<ul class="flex space-x-8">
<li class="mb-0i"><a href="#" class="inline-block p-4">About</a></li>
<li class="mb-0i"><a href="#" class="inline-block p-4">Services</a></li>
<li class="mb-0i"><a href="#" class="inline-block p-4">Contact</a></li>
</ul>
</nav>
<!-- MOBILE NAV -->
<div class="soulmagic-dropdown md:hidden">
<button class="burger block relative">
<!-- burger svg -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 showifclosed opener" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- x svg -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 absolute top-0 showifopen closer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<nav id="mobilenav" class="absolute left-0 top-full w-full p--md bg-p-800 bg-opacity-95 z-10">
<ul class="max-w-screen-xl mx-auto flex flex-col">
<li><a href="#" class="inline-block py-4">About</a></li>
<li><a href="#" class="inline-block py-4">Services</a></li>
<li><a href="#" class="inline-block py-4">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="px-5% pt-xl pb-lg type text-center">
<div class="flex flex-col max-w-screen-xl mx-auto">
<div class="flex flex-col items-center">
<h2 class="max-w-xl lg:max-w-2xl display">Where HTML and page-building come together.</h2>
<p class="max-w-lg opacity-80">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium corrupti sapiente voluptatum nemo consequatur sit, aut culpa eius molestiae neque.</p><a href="" class="inline-block px-8 py-3 text-p-50 transition-colors bg-a-600 rounded hover:bg-opacity-50">Learn More</a>
</div>
</div>
</div>
<!-- image snapshot -->
<div class="relative px-5% ">
<!-- half background -->
<div class="absolute bottom-0 left-0 w-full bg-p-900 h-1/2"></div>
<div class="max-w-screen-xl mx-auto">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="" class="relative w-full max-w-screen-xl mx-auto shadow-xl rounded-xl">
</div>
</div>
<div class="bg-p-900 text-p-50 text-center px-5% pt-lg pb-xl">
<p class="uppercase eyebrow mb-md">Trusted by the best</p>
<div class="grid max-w-screen-xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="">
<img src="https://source.unsplash.com/collection/39199601/1600x900" alt="">
</div>
</div>
<div class="text-left type p--lg">
<div class="grid max-w-screen-xl gap-12 mx-auto md:grid-cols-2">
<div class="relative"> <img src="https://source.unsplash.com/collection/81171080/1600x900" alt="" class="mb-4">
<div class="relative lc-mb-0i ">
<h3 class="max-w-2xl">Lorem ipsum dolor.</h3>
<p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p><a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Learn More</a>
</div>
</div>
<div class="relative"> <img src="https://source.unsplash.com/collection/81171080/1600x900" alt="" class="mb-4">
<div class="relative lc-mb-0i ">
<h3 class="max-w-2xl">Lorem ipsum dolor.</h3>
<p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p><a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Learn More</a>
</div>
</div>
</div>
</div>
<div class="text-left type p--lg">
<div class="grid max-w-screen-xl gap-12 mx-auto md:grid-cols-2">
<div class="relative">
<div class="relative lc-mb-0i">
<h3 class="max-w-2xl">Lorem ipsum dolor.</h3>
<p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p><a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Learn More</a>
</div>
</div>
<div class="relative">
<div class="relative lc-mb-0i">
<h3 class="max-w-2xl">Lorem ipsum dolor.</h3>
<p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p><a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Learn More</a>
</div>
</div>
</div>
</div>
<div class="text-left type p--lg">
<div class="grid max-w-screen-xl gap-8 mx-auto md:grid-cols-2">
<div class="relative text-p-50 bg-a-900 p-md"> <img src="https://source.unsplash.com/collection/81433165/1600x900" alt="" class="absolute inset-0 object-cover w-full h-full opacity-60">
<div class="relative lc-mb-0i">
<h3 class="max-w-2xl">Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
<p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p>
</div>
</div>
<div class="relative text-p-50 bg-a-900 p-md"> <img src="https://source.unsplash.com/collection/81433165/1600x900" alt="" class="absolute inset-0 object-cover w-full h-full opacity-60">
<div class="relative lc-mb-0i">
<h3 class="max-w-2xl">Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
<p class="max-w-lg tiny opacity-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat vel repellendus, totam perspiciatis corporis repudiandae sed quibusdam natus.</p>
</div>
</div>
</div>
</div>
<div class="relative text-left type p--lg overflow-hidden">
<div class="relative flex flex-col items-start max-w-screen-xl mx-auto">
<div class="relative flex flex-col items-start">
<h2 class="max-w-2xl display">Tagline ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<p class="max-w-lg opacity-80">Text ipsum dolor sit amet consectetur adipisicing elit. Dolore, necessitatibus facere tenetur corporis molestias non. Aperiam magnam doloribus mollitia inventore.</p>
<div class="flex flex-col w-full mt-4 md:flex-row md:w-auto"> <a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Get Started</a> <a href="" class="inline-block w-full px-8 py-3 text-center text-p-50 transition-colors bg-p-800 rounded md:w-auto md:ml-4 hover:bg-opacity-50">Contact us</a> </div>
</div>
</div>
</div>
<div class="relative text-left text-p-50 bg-a-900 type p--xl">
<img src="https://source.unsplash.com/collection/51351420/1600x900" alt="" class="absolute inset-0 object-cover w-full h-full opacity-40">
<div class="relative flex flex-col items-start max-w-screen-xl mx-auto">
<div class="relative flex flex-col items-start">
<h2 class="max-w-2xl display">Tagline ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<p class="max-w-lg opacity-80">Text ipsum dolor sit amet consectetur adipisicing elit. Dolore, necessitatibus facere tenetur corporis molestias non. Aperiam magnam doloribus mollitia inventore.</p>
<div class="flex flex-col w-full mt-4 md:flex-row md:w-auto">
<a href="" class="inline-block w-full px-8 py-3 mb-4 text-center text-p-50 transition-colors bg-a-600 rounded md:w-auto md:mb-0 hover:bg-opacity-50">Get Started</a>
<a href="" class="inline-block w-full px-8 py-3 text-center text-p-50 transition-colors bg-p-800 rounded md:w-auto md:ml-4 hover:bg-opacity-50">Contact us</a>
</div>
</div>
</div>
</div>
<div class="p--lg type">
<div class="max-w-screen-xl mx-auto md:flex md:flex-row-reverse md:justify-between md:items-center"><img src="https://source.unsplash.com/collection/39199601/1000" alt="" class="mb-8 md:w-6/12 md:mb-0">
<div class="flex flex-col items-start md:w-6/12 pr-12">
<h2 class="max-w-lg h1">Where HTML and page-building come together.</h2>
<p class="max-w-md opacity-80">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium corrupti sapiente voluptatum nemo consequatur sit, aut culpa eius molestiae neque.</p><a href="" class="inline-block px-8 py-3 text-p-50 transition-colors bg-a-600 rounded hover:bg-opacity-50">Learn More</a>
</div>
</div>
</div>