芝麻web文件管理V1.00

编辑当前文件:/home/qrafawbu/reginaeigbe.com/Inspo.htm

<!DOCTYPE html>

<html
    data-wf-domain="www.whywhytellmewhy.com"
    data-wf-page="654ce58f619c4d228614b1b0"
    data-wf-site="64e0fbec5077f653e248ab5e"
    class="w-mod-js wf-ptsans-n4-active wf-ptsans-i4-active wf-ptsans-n7-active wf-ptsans-i7-active wf-inconsolata-n4-active wf-inconsolata-n7-active wf-active w-mod-ix lenis lenis-smooth"
>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            .wf-force-outline-none[tabindex="-1"]:focus {
                outline: none;
            }
        </style>
        <title>Inspo</title>
        <meta content="‍‍Cmd+D. My personal bookmarking tool. Combing the the internet and surfacing the best — new perspectives, tasty visuals, intriguing deep-dives, and timeless classics." name="description" />
        <meta content="Inspo" property="og:title" />
        <meta content="‍‍Cmd+D. My personal bookmarking tool. Combing the the internet and surfacing the best — new perspectives, tasty visuals, intriguing deep-dives, and timeless classics." property="og:description" />
        <meta content="Inspo" property="twitter:title" />
        <meta content="‍‍Cmd+D. My personal bookmarking tool. Combing the the internet and surfacing the best — new perspectives, tasty visuals, intriguing deep-dives, and timeless classics." property="twitter:description" />
        <meta property="og:type" content="website" />
        <meta content="summary_large_image" name="twitter:card" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="noindex" name="robots" />
        <link href="./Inspo_files/whywhytellmewhy.961e14ec1.min.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/" rel="preconnect" />
        <link href="https://fonts.gstatic.com/" rel="preconnect" crossorigin="anonymous" />
        <script src="./Inspo_files/webfont.js" type="text/javascript"></script>
        <link rel="stylesheet" href="./Inspo_files/css" media="all" />
        <script type="text/javascript">
            WebFont.load({ google: { families: ["PT Sans:400,400italic,700,700italic", "Inconsolata:400,700"] } });
        </script>
        <script type="text/javascript">
            !(function (o, c) {
                var n = c.documentElement,
                    t = " w-mod-";
                (n.className += t + "js"), ("ontouchstart" in o || (o.DocumentTouch && c instanceof DocumentTouch)) && (n.className += t + "touch");
            })(window, document);
        </script>
        <link href="https://cdn.prod.website-files.com/64e0fbec5077f653e248ab5e/6548fe079dba7107f609080b_why-fav.png" rel="shortcut icon" type="image/x-icon" />
        <link href="https://cdn.prod.website-files.com/64e0fbec5077f653e248ab5e/6548fe106620cbf9bf6d9bff_why-web.png" rel="apple-touch-icon" />
        <link href="https://www.whywhytellmewhy.com/inspo" rel="canonical" />
        
        <style>
            [text-split] {
                opacity: 0;
            }
            html.w-editor [text-split] {
                opacity: 1;
            }

.word {
                overflow: none;
                padding-bottom: 0.1em;
                margin-bottom: 0.1em;
                transform-origin: bottom;
            }
        </style>

.trigger__circle,
                            .cursor,
                            .slider__wave {
                                pointer-events: none;
                            }

a {
                                color: inherit;
                            }

.slider__wave svg path {
                                pointer-events: auto;
                            }

body:hover .cursor {
                                opacity: 1;
                            }

.control {
                                -webkit-mask-image: -webkit-radial-gradient(white, black);
                            }
                        </style>
                    </div>
                    <section class="section-12 is--nav">
                        <div class="container">
                            <a href="https://www.whywhytellmewhy.com/inspo#" id="w-node-d260cc0e-76d7-3c3e-f354-029c22575065-8614b1b0" class="trigger w-inline-block">
                                <div
                                    class="trigger__line is--2"
                                    style="transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; background-color: rgb(0, 0, 0);"
                                ></div>
                                <div
                                    class="trigger__line is--1"
                                    style="background-color: rgb(0, 0, 0); transform: translate3d(0px, 0em, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"
                                ></div>
                                <img src="./Inspo_files/64e0fbec5077f653e248ab97_63875905e34b2578ca114d11_text-request-portfolio-f5f4b20e370d0ff8ab5921cad6e9d1ae.svg" loading="lazy" alt="" class="menurotate" />
                            </a>
                        </div>
                    </section>
                </div>
            </aside>
            <div class="bookmarks-title-area">
                <div class="ptp_title bookmarks w-clearfix">
                    <h1 class="project_heading">Inspo</h1>
                    <div class="_3d-element raffles-copy">
                        <div class="html-embed-3 w-embed">
                            <style>
                                @media screen and (min-width: 769px) {
                                    model-viewer {
                                        height: 175px; /* Adjust this value for desktop */
                                        width: 175px; /* Adjust this value for desktop */
                                        max-width: 100%;
                                    }
                                }

@media screen and (max-width: 768px) {
                                    model-viewer {
                                        height: 100px; /* Adjust this value for mobile */
                                        width: 100px; /* Adjust this value for mobile */
                                        max-width: 100%;
                                    }
                                }
                            </style>

<model-viewer
                                id="orbit-demo"
                                interpolation-decay="200"
                                interaction-prompt="none"
                                disable-tap=""
                                camera-controls=""
                                touch-action="pan-y"
                                disable-zoom=""
                                src="https://cdn.prod.website-files.com/64e0fbec5077f653e248ab5e/653c6baa6e7429d3237e2e13_boookmarks.gltf.txt"
                                style="max-width: 100%;"
                                camera-orbit="15deg 90deg 2000m"
                                loading="eager"
                                poster=""
                                shadow-intensity=""
                                ar-status="not-presenting"
                            >
                                <template shadowrootmode="open">
                                    
                                    <style>
                                        :host {
                                            display: block;
                                            position: relative;
                                            contain: strict;
                                            width: 300px;
                                            height: 150px;
                                        }

.container {
                                            position: relative;
                                            overflow: hidden;
                                        }

.userInput {
                                            width: 100%;
                                            height: 100%;
                                            display: none;
                                            position: relative;
                                            outline-offset: -1px;
                                            outline-width: 1px;
                                        }

canvas {
                                            position: absolute;
                                            display: none;
                                            pointer-events: none;
                                            /* NOTE(cdata): Chrome 76 and below apparently have a bug
   * that causes our canvas not to display pixels unless it is
   * on its own render layer
   * @see https://github.com/google/model-viewer/pull/755#issuecomment-536597893
   */
                                            transform: translateZ(0);
                                        }

.show {
                                            display: block;
                                        }

/* Adapted from HTML5 Boilerplate
 *
 * @see https://github.com/h5bp/html5-boilerplate/blob/ceb4620c78fc82e13534fc44202a3f168754873f/dist/css/main.css#L122-L133 */
                                        .screen-reader-only {
                                            border: 0;
                                            left: 0;
                                            top: 0;
                                            clip: rect(0, 0, 0, 0);
                                            height: 1px;
                                            margin: -1px;
                                            overflow: hidden;
                                            padding: 0;
                                            position: absolute;
                                            white-space: nowrap;
                                            width: 1px;
                                            pointer-events: none;
                                        }

.slot {
                                            position: absolute;
                                            pointer-events: none;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                        }

.slot > * {
                                            pointer-events: initial;
                                        }

.annotation-wrapper ::slotted(*) {
                                            opacity: var(--max-hotspot-opacity, 1);
                                            transition: opacity 0.3s;
                                        }

.pointer-tumbling .annotation-wrapper ::slotted(*) {
                                            pointer-events: none;
                                        }

.annotation-wrapper ::slotted(*) {
                                            pointer-events: initial;
                                        }

.annotation-wrapper.hide ::slotted(*) {
                                            opacity: var(--min-hotspot-opacity, 0.25);
                                        }

.slot.poster {
                                            display: none;
                                            background-color: inherit;
                                        }

.slot.poster.show {
                                            display: inherit;
                                        }

.slot.poster > * {
                                            pointer-events: initial;
                                        }

.slot.poster:not(.show) > * {
                                            pointer-events: none;
                                        }

#default-poster {
                                            width: 100%;
                                            height: 100%;
                                            /* The default poster is a <button> so we need to set display
   * to prevent it from being affected by text-align: */
                                            display: block;
                                            position: absolute;
                                            border: none;
                                            padding: 0;
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            background-position: center;
                                            background-color: #fff0;
                                        }

#default-progress-bar {
                                            display: block;
                                            position: relative;
                                            width: 100%;
                                            height: 100%;
                                            pointer-events: none;
                                            overflow: hidden;
                                        }

#default-progress-bar > .bar {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: var(--progress-bar-height, 5px);
                                            background-color: var(--progress-bar-color, rgba(0, 0, 0, 0.4));
                                            transition: transform 0.09s;
                                            transform-origin: top left;
                                            transform: scaleX(0);
                                            overflow: hidden;
                                        }

#default-progress-bar > .bar.hide {
                                            transition: opacity 0.3s 1s;
                                            opacity: 0;
                                        }

.centered {
                                            align-items: center;
                                            justify-content: center;
                                        }

.cover {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                            pointer-events: none;
                                        }

.slot.interaction-prompt {
                                            display: var(--interaction-prompt-display, flex);
                                            overflow: hidden;
                                            opacity: 0;
                                            will-change: opacity;
                                            transition: opacity 0.3s;
                                        }

.slot.interaction-prompt.visible {
                                            opacity: 1;
                                        }

.animated-container {
                                            will-change: transform, opacity;
                                            opacity: 0;
                                            transition: opacity 0.3s;
                                        }

.slot.interaction-prompt > * {
                                            pointer-events: none;
                                        }

.slot.ar-button {
                                            -moz-user-select: none;
                                            -webkit-tap-highlight-color: transparent;
                                            user-select: none;

display: var(--ar-button-display, block);
                                        }

.slot.ar-button:not(.enabled) {
                                            display: none;
                                        }

.fab {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            box-sizing: border-box;
                                            width: 40px;
                                            height: 40px;
                                            cursor: pointer;
                                            background-color: #fff;
                                            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
                                            border-radius: 100px;
                                        }

.fab > * {
                                            opacity: 0.87;
                                        }

#default-ar-button {
                                            position: absolute;
                                            bottom: 16px;
                                            right: 16px;
                                            transform: scale(var(--ar-button-scale, 1));
                                            transform-origin: bottom right;
                                        }

.slot.pan-target {
                                            display: block;
                                            position: absolute;
                                            width: 0;
                                            height: 0;
                                            left: 50%;
                                            top: 50%;
                                            transform: translate3d(-50%, -50%, 0);
                                            background-color: transparent;
                                            opacity: 0;
                                            transition: opacity 0.3s;
                                        }

#default-pan-target {
                                            width: 6px;
                                            height: 6px;
                                            border-radius: 6px;
                                            border: 1px solid white;
                                            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.8);
                                        }

.slot.default {
                                            pointer-events: none;
                                        }

.slot.progress-bar {
                                            pointer-events: none;
                                        }

.slot.exit-webxr-ar-button {
                                            pointer-events: none;
                                        }

.slot.exit-webxr-ar-button:not(.enabled) {
                                            display: none;
                                        }

#default-exit-webxr-ar-button {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            position: absolute;
                                            top: env(safe-area-inset-top, 16px);
                                            right: 16px;
                                            width: 40px;
                                            height: 40px;
                                            box-sizing: border-box;
                                        }

#default-exit-webxr-ar-button > svg {
                                            fill: #fff;
                                        }
                                    </style>
                                    <div class="container" style="width: 200px; height: 200px;">
                                        <div class="userInput show" tabindex="0" role="img" aria-label="3D model. Use mouse, touch or arrow keys to move." style="cursor: grab; touch-action: manipulation;">
                                            <div class="slot canvas">
                                                <slot name="canvas">
                                                    <canvas width="200" height="200" style="width: 200px; height: 200px;" class=""></canvas>
                                                    <canvas id="webgl-canvas" class="show" data-engine="three.js r163" width="200" height="200" style="width: 200px; height: 200px;"></canvas>
                                                </slot>
                                            </div>
                                        </div>

<div class="slot poster">
                                            <slot name="poster">
                                                <button type="button" id="default-poster" aria-label="3D model" style="background-image: url('');" aria-hidden="true" tabindex="-1"></button>
                                            </slot>
                                        </div>

/* Link color inherits from parent font color  */
                            a {
                                color: inherit;
                            }

[no-click] {
                                pointer-events: none;
                            }
                        </style>
                    </div>
                </div>
                <div class="page-wrap">
                    <main class="main-wrap">
                        <section class="products_section">
                            <div class="container-21 is-products">
                                <div class="products_layout">
                                    <div class="products_wrap w-dyn-list">
                                        <div role="list" class="products_list w-dyn-items">
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a
                                                    data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a"
                                                    href="https://www.brandinginasia.com/kitkat-takes-a-break-and-turns-new-ad-campaign-over-to-ai/"
                                                    target="_blank"
                                                    class="link-block w-inline-block"
                                                >
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0010</p>
                                                        <p class="products_size">Ad</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">If KitKat were to Take a Break.</p>
                                                    <p class="products_source">KitKat</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b8906312450d413c1c1_64afbf806f3cb0d160edb570_KitKat-AI-Ads1.png" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b8906312450d413c1c7_64afbf83eae1dedcb484165a_KitKat-AI-Ads%20copy.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a
                                                    data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a"
                                                    href="https://digiday.com/marketing/coca-cola-believes-in-music-in-ads-so-much-it-is-growing-its-own-studio-to-record-original-songs/"
                                                    target="_blank"
                                                    class="link-block w-inline-block"
                                                    style=""
                                                >
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0009</p>
                                                        <p class="products_size">Brand</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Coca-Cola Makes Music?</p>
                                                    <p class="products_source">Coke Studio</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b885a20f827014d0a96_64aa82f8096cb13826335aba_DD_Espanol_Coke_Vol3.webp" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b885a20f827014d0aa3_64aa84ffa446d8dc447a1e20_b1c8be478094f21769f1c6c21c0c5fe3.webp" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a" href="https://skybox.blockadelabs.com/" target="_blank" class="link-block w-inline-block">
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0008</p>
                                                        <p class="products_size">AI</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Dream Your World.</p>
                                                    <p class="products_source">Skybox AI</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b89e28b40d014a2f6ad_64aa777c99da5ef06c31d870_Screenshot%202023-07-09%20at%204.59.21%20PM%20copy.jpeg" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b89e28b40d014a2f6a9_64aa777f83280cff03408e89_Screenshot%202023-07-09%20at%204.42.06%20PM%20copy.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a
                                                    data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a"
                                                    href="https://podcasts.apple.com/za/podcast/john-maeda-ai-design/id1266839739?i=1000614133736"
                                                    target="_blank"
                                                    class="link-block w-inline-block"
                                                >
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0006</p>
                                                        <p class="products_size">Podcast</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Interested in Speaking Machine?</p>
                                                    <p class="products_source">John Maeda: AI + Design</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b884e6b39d63b130f78_64aa66cb6b72ccc0d35ab940_9d2f3e11-1f9c-431e-aed0-2717a6a765ca_3000x3000%20(1).jpeg" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b884e6b39d63b130f91_64aa66d06b72ccc0d35abac4_985c387d-304a-46f0-b0bb-2fcc9a24b9e6_3000x3000.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a
                                                    data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a"
                                                    href="https://www.fastcompany.com/90888891/nissan-arya-suv-lofi-girl-four-hour-ad-youtube"
                                                    target="_blank"
                                                    class="link-block w-inline-block"
                                                >
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0005</p>
                                                        <p class="products_size">Ad</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Winning the Internet with a 4-Hour Ad</p>
                                                    <p class="products_source">Nissan</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b88b31a397763e6a218_64aa628869265b578bb813b7_Screenshot%202023-07-09%20at%203.31.32%20PM%20copy.jpeg" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b88b31a397763e6a21c_64aa621a4b3663ac5d98af5b_nissan%20copy.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a" href="https://www.complex.com/pigeons-and-planes/rick-rubin-book-the-creative-act" target="_blank" class="link-block w-inline-block">
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0004</p>
                                                        <p class="products_size">Reads</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">I Almost Quit, Then I Read Rick Rubin's Book.</p>
                                                    <p class="products_source">Rick Rubin: The Creative Act</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b8af0af99ac54ccdb53_64a7a110a55e59dbe6c18edc_RickRubin-04.jpeg" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b8af0af99ac54ccdb66_64a7a1134bf853c6841ab1b1_ReleaseFormat-1164021-190438.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a
                                                    data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a"
                                                    href="https://www.itsnicethat.com/news/art-practice-love-song-channel-4-idents-film-140623"
                                                    target="_blank"
                                                    class="link-block w-inline-block"
                                                >
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0003</p>
                                                        <p class="products_size">Design</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Mind-Blowing Idents.</p>
                                                    <p class="products_source">Channel 4 Idents</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b893984cc61e9dd1d51_64a79881f931eb36c910a0b1_channel-4-ident-20221106-001-01.png" class="products_image" />
                                                        <img
                                                            alt=""
                                                            src="./Inspo_files/653a0b883984cc61e9dd1d04_64a7a34734017c29afc0a3b4_art-practice-love-song-channel-4.format-webp.width-1440_Oax55HEwPDmK9qcO.webp"
                                                            class="products_image"
                                                        />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a" href="https://www.theuncomfortable.com/#" target="_blank" class="link-block w-inline-block">
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0002</p>
                                                        <p class="products_size">Design</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Everyday Objects with a Twist of Inconvenience</p>
                                                    <p class="products_source">The Uncomfortable</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b897eb6fd88668bf263_64aa635f53a8cd97b680c432_64a797e8a9523e01bde757fa_18_watering_can.jpeg" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b897eb6fd88668bf25e_64aa6365b81f4f0a9b947e66_64a797ea1c54c6d8a4fecbb5_20_boots%20copy.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                            <div id="w-node-a4b2ed82-593d-a6ba-b3e8-c890114b6082-8614b1b0" role="listitem" class="products_item w-dyn-item">
                                                <a data-w-id="024b0426-1f1d-e6c2-8555-922285ccda7a" href="https://y-n10.com/" target="_blank" class="link-block w-inline-block">
                                                    <div id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7f-8614b1b0" class="products_type-wrap">
                                                        <p class="products_number">N°0001</p>
                                                        <p class="products_size">Web</p>
                                                    </div>
                                                    <p id="w-node-_024b0426-1f1d-e6c2-8555-922285ccda7d-8614b1b0" class="products_title">Pixel-Perfect Web Design</p>
                                                    <p class="products_source">Yamauchi No.10 Family Office</p>
                                                    <div class="products_size-wrap">
                                                        <img alt="" src="./Inspo_files/653a0b8a720f1634ea7ad254_64a75735893a803e68b72344_opl-master.jpeg" class="products_image" />
                                                        <img alt="" src="./Inspo_files/653a0b8a720f1634ea7ad251_64a75cd938423d0aebdea70b_opl-master2.jpeg" class="products_image" />
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </main>
                </div>
                <main class="page-main">
                    <div no-click="" class="products_img-wrap">
                        <div class="container-21 is-products-img">
                            <div class="products_img-layout">
                                <div class="products_img">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-2">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-3" style="z-index: 3; translate: none; rotate: none; scale: none; transform: rotate(90deg); opacity: 0;">
                                    <div class="products_img-height"><img src="./Inspo_files/653a0b885a20f827014d0a96_64aa82f8096cb13826335aba_DD_Espanol_Coke_Vol3.webp" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-4">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-5">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-6">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-7">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-8">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-9">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                                <div class="products_img is-10">
                                    <div class="products_img-height"><img src="./Inspo_files/placeholder.60f9b1840c.svg" alt="" class="products_photo" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
            <section class="section-15"></section>
            <div class="lets_collaborate" style="opacity: 0;">
                <div class="div-block-154 bookmarks w-clearfix">
                    <p class="paragraph-8 nextproject">Curious? I'm always eager for new possibilities. Get in touch if you’d like to learn more about me or the work.<br /></p>
                    <h1 class="project_heading">Let's Connect.</h1>
                    <div class="div-block-156"></div>
                    <div class="_3d-element pop">
                        <div class="html-embed-3 w-embed">
                            <style>
                                @media screen and (min-width: 769px) {
                                    model-viewer {
                                        height: 200px; /* Adjust this value for desktop */
                                        width: 200px; /* Adjust this value for desktop */
                                        max-width: 100%;
                                    }
                                }

<model-viewer
                                id="orbit-demo"
                                interpolation-decay="200"
                                interaction-prompt="none"
                                disable-tap=""
                                auto-rotate=""
                                camera-controls=""
                                touch-action="pan-y"
                                disable-zoom=""
                                src="https://cdn.prod.website-files.com/64e0fbec5077f653e248ab5e/64e0fbec5077f653e248ac48_smileyface-shinypearl.gltf.txt"
                                style="max-width: 100%;"
                                camera-orbit="5deg 100deg 2000m"
                                loading="eager"
                                poster=""
                                shadow-intensity=""
                                ar-status="not-presenting"
                            >
                                <template shadowrootmode="open">
                                    
                                    <style>
                                        :host {
                                            display: block;
                                            position: relative;
                                            contain: strict;
                                            width: 300px;
                                            height: 150px;
                                        }