Skip to content

Instantly share code, notes, and snippets.

@bryancodesjs

bryancodesjs/index.html

Created September 11, 2025 03:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bryancodesjs/91ff2ccc4ff8d1cc64583c3212a1c2b1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bryancodesjs/91ff2ccc4ff8d1cc64583c3212a1c2b1 to your computer and use it in GitHub Desktop.
Download ZIP
mckenzie-cap-template
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:[email protected]&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "DM Sans", sans-serif;
}
button {
cursor: pointer;
}
.hero-bg {
background-image: url("https://images.pexels.com/photos/5490917/pexels-photo-5490917.jpeg");
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="border-b border-gray-100">
<nav
class="w-full max-w-6xl mx-auto flex items-center justify-between px-4 py-3.5"
>
<span>McKenzie Capital</span>
<button class="flex items-center gap-2 [&_svg]:size-4">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M21 16.42V19.9561C21 20.4811 20.5941 20.9167 20.0705 20.9537C19.6331 20.9846 19.2763 21 19 21C10.1634 21 3 13.8366 3 5C3 4.72371 3.01545 4.36687 3.04635 3.9295C3.08337 3.40588 3.51894 3 4.04386 3H7.5801C7.83678 3 8.05176 3.19442 8.07753 3.4498C8.10067 3.67907 8.12218 3.86314 8.14207 4.00202C8.34435 5.41472 8.75753 6.75936 9.3487 8.00303C9.44359 8.20265 9.38171 8.44159 9.20185 8.57006L7.04355 10.1118C8.35752 13.1811 10.8189 15.6425 13.8882 16.9565L15.4271 14.8019C15.5572 14.6199 15.799 14.5573 16.001 14.6532C17.2446 15.2439 18.5891 15.6566 20.0016 15.8584C20.1396 15.8782 20.3225 15.8995 20.5502 15.9225C20.8056 15.9483 21 16.1633 21 16.42Z"
></path>
</svg>
800-768-3119
</button>
</nav>
</div>
<main>
<div class="w-full">
<div class="w-full max-w-6xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="flex flex-col gap-4">
<h1 class="text-4xl">
Empowering small businesses <br />
Through accessible <br />
funding solutions.
</h1>
<h3 class="text-gray-500 pr-5 text-sm">
**We work with all US States with the exception of New York and
California.
</h3>
</div>
<div class="flex flex-col gap-4 text-gray-500">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
ipsam molestias perferendis in sint non, repellendus accusamus
delectus debitis hic. Dolore, vero!
</p>
<div class="flex items-center gap-3 transition-all">
<button
class="px-4 py-2.5 bg-black text-white rounded-full hover:bg-black/80 transition-all"
>
Get In Touch
</button>
<button
class="px-3 py-2.5 text-gray-800 flex items-center gap-2 [&_svg]:size-4"
>
Who We Are
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="w-full min-h-[400px] bg-red-100 hero-bg"></div>
</div>
<div class="bg-gray-900 text-gray-300">
<div class="w-full max-w-6xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-12">
<div class="col-span-1 md:col-span-4 space-y-3">
<h2 class="text-3xl">800+ Clients</h2>
<p class="text-gray-400">Across the United States</p>
</div>
<div
class="col-span-1 md:col-span-8 md:border-l md:pl-8 md:border-gray-600"
>
<span class="text-3xl text-gray-400">
We believe the best thing we can do for small business owners is
to provide working capital in a
<span class="text-white"
>fast, safe, and affordable manner.</span
>
</span>
</div>
</div>
</div>
<div class="w-full max-w-6xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border border-gray-600 p-4 rounded-md space-y-3">
<svg
width="102"
height="102"
viewBox="0 0 102 102"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_15_44)">
<mask id="path-1-inside-1_15_44" fill="white">
<path d="M-38 40H64V142H-38V40Z" />
</mask>
<path
d="M64 40H65V39H64V40ZM-38 40V41H64V40V39H-38V40ZM64 40H63V142H64H65V40H64Z"
fill="white"
mask="url(#path-1-inside-1_15_44)"
/>
<rect
width="24"
height="24"
transform="translate(40 40)"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_15_44">
<rect width="102" height="102" fill="white" />
</clipPath>
</defs>
</svg>
<h2 class="text-xl">Small Business</h2>
<p class="text-gray-400">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Debitis odio unde assumenda.
</p>
<button
class="text-gray-400 hover:text-white transition-all flex items-center gap-2 [&_svg]:size-4"
>
Learn More
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"
></path>
</svg>
</button>
</div>
<div class="border border-gray-600 p-4 rounded-md space-y-3">
<svg
width="102"
height="102"
viewBox="0 0 102 102"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_14_31)">
<mask id="path-1-inside-1_14_31" fill="white">
<path d="M-33 33H69V135H-33V33Z" />
</mask>
<path
d="M69 33H70V32H69V33ZM-33 33V34H69V33V32H-33V33ZM69 33H68V135H69H70V33H69Z"
fill="white"
mask="url(#path-1-inside-1_14_31)"
/>
<mask id="path-3-inside-2_14_31" fill="white">
<path d="M-33 44H58V135H-33V44Z" />
</mask>
<path
d="M58 44H59V43H58V44ZM-33 44V45H58V44V43H-33V44ZM58 44H57V135H58H59V44H58Z"
fill="#D1D5DB"
mask="url(#path-3-inside-2_14_31)"
/>
<mask id="path-5-inside-3_14_31" fill="white">
<path d="M-33 55H47V135H-33V55Z" />
</mask>
<path
d="M47 55H48V54H47V55ZM-33 55V56H47V55V54H-33V55ZM47 55H46V135H47H48V55H47Z"
fill="#9CA3AF"
mask="url(#path-5-inside-3_14_31)"
/>
<mask id="path-7-inside-4_14_31" fill="white">
<path d="M-33 65H37V135H-33V65Z" />
</mask>
<path
d="M37 65H38V64H37V65ZM-33 65V66H37V65V64H-33V65ZM37 65H36V135H37H38V65H37Z"
fill="#6B7280"
mask="url(#path-7-inside-4_14_31)"
/>
<mask id="path-9-inside-5_14_31" fill="white">
<path d="M-33 75H27V135H-33V75Z" />
</mask>
<path
d="M27 75H28V74H27V75ZM-33 75V76H27V75V74H-33V75ZM27 75H26V135H27H28V75H27Z"
fill="#4B5563"
mask="url(#path-9-inside-5_14_31)"
/>
</g>
<defs>
<clipPath id="clip0_14_31">
<rect width="102" height="102" fill="white" />
</clipPath>
</defs>
</svg>
<h2 class="text-xl">Increase Growth</h2>
<p class="text-gray-400">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Debitis odio unde assumenda.
</p>
<button
class="text-gray-400 hover:text-white transition-all flex items-center gap-2 [&_svg]:size-4"
>
Learn More
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"
></path>
</svg>
</button>
</div>
<div class="border border-gray-600 p-4 rounded-md space-y-3">
<svg
width="102"
height="102"
viewBox="0 0 102 102"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_14_2)">
<circle cx="51" cy="51" r="18.5" stroke="#D1D5DB" />
<circle cx="51" cy="51" r="9" fill="white" />
<circle cx="51" cy="51" r="28.5" stroke="#9CA3AF" />
<circle cx="51" cy="51" r="39.5" stroke="#6B7280" />
</g>
<defs>
<clipPath id="clip0_14_2">
<rect width="102" height="102" fill="white" />
</clipPath>
</defs>
</svg>
<h2 class="text-xl">Finding Opportunity</h2>
<p class="text-gray-400">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Debitis odio unde assumenda.
</p>
<button
class="text-gray-400 hover:text-white transition-all flex items-center gap-2 [&_svg]:size-4"
>
Learn More
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
<!-- https://dribbble.com/shots/26188722-Investio-Strategic-Investment-Firm-Website-UI -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment