Skip to content

Instantly share code, notes, and snippets.

@jamesfacts
Created May 6, 2021 19:22
Show Gist options
  • Save jamesfacts/c7510e0773d597cfbeab5c412b7938d3 to your computer and use it in GitHub Desktop.
Save jamesfacts/c7510e0773d597cfbeab5c412b7938d3 to your computer and use it in GitHub Desktop.
Hero section with buttons
<section class="relative pt-32 pb-16 mb-8 flex content-center items-center justify-center lg:shadow-sm" style="min-height: 55vh;">
<div class="absolute top-0 w-full h-full bg-center bg-cover"
style="background-image: url('{{ \Roots\asset('images/header-mock-reversed.jpg') }}');">
<span id="blackOverlay" class="w-full h-full absolute opacity-50 bg-white lg:bg-gradient-to-r lg:from-white lg:to-transparent"></span></div>
<div class="container relative mx-auto">
<div class="items-center flex flex-wrap">
<div class="w-full lg:w-8/12 xl:w-6/12 px-4 ml-auto mr-auto text-center lg:mr-12 lg:mt-12 lg:text-left">
<div class="px-4">
<h1 class="text-gray-800 font-semibold text-3xl md:text-5xl font-oxygen leading-none mb-4 lg:text-right">
{{ "Hero Hedline Text" }}
</h1>
<p class="mt-4 text-lg text-gray-700 text-center lg:text-right">
<span class="font-extrabold border-b-2 border-red-700">
Hero Subhed</span> further text to round out this subhead. Details details details
</p>
<div class="flex flex-col mx-auto mt-8 items-center lg:flex-row lg:justify-end">
<a href="{{home_url('/')}}"
class="bg-indigo-600 text-white hover:bg-indigo-800 font-bold uppercase text-base px-8 py-3 shadow-sm hover:shadow-lg outline-none focus:outline-none mr-1 mb-4 w-56 lg:mb-1 lg:mr-5"
style="transition: all .15s ease; max-width: 300px;">
Button One
</a>
<a href="{{home_url('/')}}"
class="bg-indigo-600 text-white hover:bg-indigo-900 font-bold uppercase text-base px-8 py-3 shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
type="button" style="transition: all .15s ease; max-width: 300px;">
Button Two
</a>
</div>
</div>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment