ThriftVibe | Temukan Vibe-mu

by oktaviardi pratama

HTML

<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&amp;family=Be+Vietnam+Pro:wght@400;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet"/>

<!-- TopNavBar -->
<nav class="bg-surface border-b-2 border-on-surface-variant sticky top-0 z-50 h-20 w-full shadow-[4px_4px_0px_0px_rgba(118,0,49,1)]">
<div class="flex justify-between items-center px-container-margin h-full w-full max-w-7xl mx-auto">
<div class="flex items-center gap-base">
<img alt="ThriftVibe Logo" class="h-10 w-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9hzYEjAUCPLm2TcVTIG-CgoPaixYcNmxXJtQRhTaMdwenajyRbUO4lvImHGZd2jTrL_3ygu7O5Hgiz_JJDo5ccodUtCS8lytAq7DYw6UJvzKv6K1jb7uxHFpYMgmCYBpxV5D2winaaraM8eD57VlpSuWXcqkahk8exIxo0mvoiZixEd7BVEc30UjFcVBCuOJpkVllMbDAWT6LFzb7D9jjrnm60LLhxeUo8L9CbEVbEkdnq_QcRQ0SFy60yLIbzTB9WX44fqnntxSe"/>
<span class="font-headline-lg text-headline-lg font-black text-primary">ThriftVibe</span>
</div>
<div class="hidden md:flex gap-gutter items-center">
<a class="font-body-md text-body-md text-primary font-bold border-b-2 border-primary pb-1" href="#">Shop</a>
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">About</a>
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Earth-Friendly</a>
</div>
<div class="flex items-center gap-gutter">
<div class="hidden md:block">
<span class="material-symbols-outlined text-primary cursor-pointer hover:scale-110 transition-transform">search</span>
</div>
<button class="flex items-center justify-center p-2...

CSS

.hard-shadow {
            box-shadow: 4px 4px 0px 0px rgba(118, 0, 49, 1);
        }
        .hard-shadow-black {
            box-shadow: 4px 4px 0px 0px rgba(28, 27, 27, 1);
        }
        .btn-active:active {
            transform: translate(2px, 2px);
            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
        }
        .vibe-card-hover:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px 0px rgba(118, 0, 49, 1);
        }

JavaScript

tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "tertiary-fixed": "#ffd9df",
                        "surface": "#fcf9f8",
                        "sun-yellow": "#FEEC41",
                        "inverse-surface": "#313030",
                        "surface-container": "#f0eded",
                        "secondary-fixed-dim": "#dac917",
                        "outline": "#906f6e",
                        "on-secondary-container": "#6d6400",
                        "on-tertiary-fixed": "#3f0017",
                        "surface-tint": "#bf002c",
                        "surface-dim": "#dcd9d9",
                        "tertiary-fixed-dim": "#ffb1c1",
                        "surface-container-highest": "#e5e2e1",
                        "surface-container-lowest": "#ffffff",
                        "on-secondary": "#ffffff",
                        "outline-variant": "#e5bdbc",
                        "background": "#fcf9f8",
                        "secondary-container": "#f4e237",
                        "blush-base": "#F13E5A",
                        "secondary-fixed": "#f7e53a",
                        "on-secondary-fixed-variant": "#4f4800",
                        "primary": "#ad0027",
                        "on-tertiary-fixed-variant": "#89153e",
                        "surface-container-high": "#eae7e7",
                        "surface-container-low": "#f6f3f2",
                        "surface-bright": "#fcf9f8",
                        "eco-maroon": "#760031",
                        "on-secondary-fixed": "#1f1c00",
                        "inverse-primary": "#ffb3b2",
                        "on-tertiary-container": "#ffecee",
                        "secondary": "#686000",
                        "primary-container": "#d51c39",
                        "tertiary-container": "#bd3f64",
                    ...