| Server IP : 159.69.118.108 / Your IP : 216.73.216.200 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-4gb-fsn1-1 6.8.0-90-generic #91-Ubuntu SMP PREEMPT_DYNAMIC Tue Nov 18 13:53:54 UTC 2025 aarch64 User : root ( 0) PHP Version : 8.2.32 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/lauthiamkok.net/prototype.lauthiamkok.net/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ginger Monkey Design</title>
<script type="module" crossorigin src="/assets/vendors-DjiCUAVz.js"></script>
<script type="module" crossorigin src="/assets/main-Cp_KRKpB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-BRJl1nzS.css">
</head>
<body id="top">
<header
class="
py-5
px-10
<md:px-5
overflow-hidden
"
>
<!-- large up -->
<nav class="
2xl:container
mx-auto
flex
items-center
justify-center
transition-all
ease-in-out
duration-300
border-0
border-blue-500
relative
">
<div class="w-4/12 flex items-center justify-start border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<a href="#" class="border-0 border-blue-500 transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 h-full logo-complete overflow-hidden">
<img
src="/static/logo-ginger-monkey.svg"
class="
object-cover
object-contain
w-35
opacity-100
max-h-100
transition-all
ease-in-out
duration-300
"
/>
</a>
</div>
<div
class="w-4/12 flex justify-center items-center border-0 border-blue-500"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="500"
>
<ul class="flex space-x-8 <xl:space-x-5 border-0 border-blue-500 <md:hidden">
<li class="border-0 border-blue-500 flex items-center justify-center relative">
<a href="#" class="[&>*:last-child]:hover:visible [&>*:last-child]:hover:w-8/12 hover:opacity-50 [&>*:last-child]:hover:opacity-100 opacity-100 transition-all ease-in-out duration-300 text-[1.045rem] font-sans-myriad font-bold flex flex-col items-center border-0 border-blue-500">
<span class="border-0 border-blue-500">Projects</span>
<span class="block h-[2px] w-0 bg-black opacity-0 transition-all duration-200 invisible"></span>
</a>
</li>
<li class="border-0 border-blue-500 flex items-center justify-center relative">
<a href="#" class="[&>*:last-child]:hover:visible [&>*:last-child]:hover:w-8/12 [&>*:last-child]:hover:opacity-100 hover:opacity-50 opacity-100 transition-all ease-in-out duration-300 text-[1.045rem] font-sans-myriad font-bold flex flex-col items-center border-0 border-blue-500">
<span class="border-0 border-blue-500">Specimens</span>
<span class="block h-[2px] w-0 bg-black opacity-0 transition-all duration-200 invisible"></span>
</a>
</li>
</ul>
</div>
<!-- mobile burger -->
<ul class="w-4/12 flex flex-col items-end justify-end border-0 border-red-500"
data-aos="fade-left"
data-aos-duration="1000"
data-aos-delay="500"
>
<li class="border-0 border-blue-500 flex items-center justify-center">
<a
href="#"
class="flex flex-col items-center transition-all ease-in-out duration-300 border-0 border-red-500 spin"
id="burger-button"
>
<i class="icon-plus text-lg text-black"></i>
</a>
</li>
</ul>
<!-- mobile burger -->
</nav>
</header>
<main class="px-10 <md:px-5 overflow-hidden">
<!-- container -->
<div class="2xl:container mx-auto border-0 border-red-500">
<div class="-mx-7 py-10 flex flex-wrap items-center justify-start">
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
flashing
transform
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/BEGIN CLOSE UP-placeholder.png"
data-src="/static/BEGIN CLOSE UP.png"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Brand + Package design
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Begin Gin
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/WR_05-placeholder.png"
data-src="/static/WR_05.png"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Strategy
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Whiskey Reserve
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
bg-black
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/PANDAR PARFUM-4-placeholder.png"
data-src="/static/PANDAR PARFUM-4.png"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Creative Direction
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Pandar Parfumes
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Carlsberg Major Global Rebrand-placeholder.jpg"
data-src="/static/Carlsberg Major Global Rebrand.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Illustration
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Carlsberg
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/cs-1280x1280-glengoyne-1-5f8d8adec2729-placeholder.jpg"
data-src="/static/cs-1280x1280-glengoyne-1-5f8d8adec2729.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Lettering
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Glengoyne
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Lo-TomLane-13-placeholder.jpg"
data-src="/static/Lo-TomLane-13.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
3D
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Effie Jewel Bourbon
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/LARGE-ILLO-placeholder.jpg"
data-src="/static/LARGE-ILLO.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Lettering + Illustration
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Missouri Ridge Bourbon
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Lo-TomLane-31-placeholder.jpg"
data-src="/static/Lo-TomLane-31.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Lo-TomLane-32-placeholder.jpg"
data-src="/static/Lo-TomLane-32.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Begin_Blueberry_Shot03-placeholder.png"
data-src="/static/Begin_Blueberry_Shot03.png"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Begin_Blueberry_Shot03-placeholder.jpg"
data-src="/static/Begin_Blueberry_Shot03.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 relative z-1">
<img
class="
w-full
h-full
object-cover
object-center
transform
flashing
transition-all
duration-1000
blur-3xl
filter
lazy
border-0
border-red-500
"
src="/static/Begin_Original_Shot01-placeholder.jpg"
data-src="/static/Begin_Original_Shot01.jpg"
>
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
<!-- item -->
<div class="w-1/5 <xl:w-4/12 <lg:w-6/12 <md:w-full px-7 py-5 flex flex-col space-y-1 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="relative border-0 border-blue-500">
<a href="#" class="overflow-hidden block aspect-1 bg-black relative z-1">
<!--
image
> -->
</a>
<span
class="
absolute
top-0
bottom-0
-right-6
z-0
w-full
text-sm
flex
items-end
<md:hidden
border-0 border-red-500
"
style="writing-mode: sideways-lr;"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-delay="500"
>
Packaging Design & Brand
</span>
</div>
<h2>
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
font-bold
"
>
Fosforo Mezcal
</a>
</h2>
</div>
<!-- item -->
</div>
</div>
<!-- container -->
<!-- container -->
<div class="2xl:container mx-auto border-0 border-red-500">
<ul class="flex items-center justify-center space-x-8 border-0 border-blue-500">
<li class="border-0 border-blue-500 flex items-center justify-center relative">
<a
href="#"
class="
transition-all
duration-1000
opacity-30
text-sm
"
>
1
</a>
</li>
<li class="border-0 border-blue-500 flex items-center justify-center relative">
<a
href="#"
class="
transition-all
duration-1000
hover:opacity-30
text-sm
"
>
2
</a>
</li>
</ul>
</div>
<!-- container -->
</main>
<footer
id="footer"
class="px-10 <md:px-5 py-10 overflow-hidden border-0 border-red-500"
>
<!-- container -->
<div class="2xl:container mx-auto flex flex-wrap items-center justify-between <md:flex-col <md:text-center border-0 border-red-500">
<div class="flex flex-col items-start transition-all ease-in-out duration-1000 fade-right -translate-x-full opacity-0 border-0 border-red-500">
<a href="" class="flex items-center justify-center space-x-2 text-gray-dark transition-all ease-in-out duration-300 opacity-100 hover:opacity-60">
<i class="icon-envelop text-2xl text-center"></i>
<span>Connect via email</span>
</a>
</div>
<div class="text-md text-gray-dark transition-all ease-in-out duration-1000 fade-left translate-x-full opacity-0 border-0 border-red-500">
<p>© 2005-2026 Tom Lane, unless otherwise stated</p>
</div>
</div>
<!-- container -->
</footer>
<!-- up nav -->
<div
class="fixed right-0 bottom-0 z-999 p-5 border-0 border-blue-500 opacity-0 transition-all duration-1000 ease-in-out"
id="button-up"
>
<nav>
<ul>
<li>
<a
href="#top"
class="flex items-center justify-center text-xl bg-gray-600 px-4 py-3 rounded-3xl text-white block transition-all duration-1000 ease-in-out hover:opacity-50"
>
<i class="icon-chevron-thin-up"></i>
</a>
</li>
</ul>
</nav>
</div>
<!-- up nav -->
<!-- mobile nav -->
<div
class="-translate-y-full transition-all ease-in-out duration-300 bg-black xhidden fixed top-0 bottom-0 left-0 right-0 z-999 overflow-x-auto space-y-5 border-0 border-green-500 xopacity-30"
id="mobile-menu"
>
<div
class="relative w-full h-full"
>
<div class="absolute top-0 right-0 left-0 py-5 px-10 <md:px-5">
<div class="2xl:container mx-auto w-full flex justify-between items-center w-full border-0 border-blue-500 is-mobile">
<div class="w-4/12 flex items-center justify-start border-0 border-red-500 invisible">
<a href="#" class="border-0 border-blue-500 transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 h-full logo-complete overflow-hidden">
<img
src="/static/logo-ginger-monkey.svg"
class="
object-cover
object-contain
w-35
opacity-100
max-h-100
transition-all
ease-in-out
duration-300
"
/>
</a>
</div>
<nav>
<ul>
<li>
<a
href="#"
class="flex flex-col items-center transition-all ease-in-out duration-300 spin"
id="exit-button"
>
<i class="icon-minus text-lg text-white"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="w-full h-full flex items-center justify-center border-0 border-purple-500 px-2">
<ul class="flex-col text-center space-y-2 border-0 border-red-500">
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all opacity-50 border-0 border-red-500">Projects</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">Specimens</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">Services</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">About</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">Connect</a>
</li>
</ul>
</div>
</div>
</div>
<!-- mobile nav -->
<div id="app-current-breakpoint">
<current-breakpoint />
</div>
</body>
</html>