<!DOCTYPE html><!--  Last Published: Sun Jan 05 2025 16:37:23 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="63dc1b0675b1b91435d5241b" data-wf-site="63bdafcb49cc7a0699235f9f" lang="en">
<head>
  <meta charset="utf-8">
  <title>Strike Design Studio</title>
  <meta content="Strike Design Studio offers frank consultancy and striking solutions for IRL and URLS. Designing brands, websites, and printed matter." name="description">
  <meta content="Strike Design Studio" property="og:title">
  <meta content="Strike Design Studio offers frank consultancy and striking solutions for IRL and URLS. Designing brands, websites, and printed matter." property="og:description">
  <meta content="https://uploads-ssl.webflow.com/63bdafcb49cc7a0699235f9f/653717529fb1ae50f868b5c3_opengraph-grey.jpeg" property="og:image">
  <meta content="Strike Design Studio" property="twitter:title">
  <meta content="Strike Design Studio offers frank consultancy and striking solutions for IRL and URLS. Designing brands, websites, and printed matter." property="twitter:description">
  <meta content="https://uploads-ssl.webflow.com/63bdafcb49cc7a0699235f9f/653717529fb1ae50f868b5c3_opengraph-grey.jpeg" property="twitter:image">
  <meta property="og:type" content="website">
  <meta content="summary_large_image" name="twitter:card">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/components.css" rel="stylesheet" type="text/css">
  <link href="css/strikedesignstudio.css" rel="stylesheet" type="text/css">
  <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="images/favicon.jpg" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.jpg" rel="apple-touch-icon">
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-4LFZ4XGBJ7"></script>
  <script type="text/javascript">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('set', 'developer_id.dZGVlNj', true);gtag('config', 'G-4LFZ4XGBJ7');</script>
  <style>
a.lightmode {color:#1a1a1a !important;}
.full-screen-toggle {opacity:0%;}
.w-slider-dot {
    width: 10px;
    height: 10px;
}
.dropopenindex {
  height:auto;
  }
.w-slider-nav {
  height: 30px;}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
::-webkit-scrollbar {background:transparent;width:5px;}
::-webkit-scrollbar-thumb { background: #808080; border-radius:5px;margin-top:40px;}
@media (min-width:990px)  {
.menu {width:0px;}
.sidebar {width:0px;}
.logohidden {display:none;width:0px;opacity:0%;}
.logo-toggle-in {display:none;}
  }
</style>
  <style>
.menu {overflow-x: hidden;resize:horizontal;}
::-webkit-scrollbar {background:transparent;width:5px;}
::-webkit-scrollbar-thumb { background: #808080; border-radius:5px;margin-top:40px;}
body {overflow-x: hidden;}
.indexzero {z-index:auto !important;}
.browser-iframe {
        transform: scale(0);
        transform-origin: left top;
        transition: transform 0s;
      }
.slide {
  transition: transform 0.5s ease-in-out;
}
.post-block {
	display: none;
	}
</style>
  <script>console.clear();</script>
  <script src="https://unpkg.com/three@0.87.1/build/three.js"></script>
  <script src="https://unpkg.com/three@0.87.1/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
  <div class="king-controller">
    <div class="settings">
      <a href="#">Link Setting</a>
    </div>
    <div class="drag-queen">
      <div class="menu">
        <div class="menu-bg-colour"></div>
        <div class="menu-hold">
          <div class="menu-logo w-clearfix">
            <a href="#" class="menu-toggle w-inline-block w-clearfix">
              <div data-view="menuopen" class="toggle-arrow-out"><span class="material-symbols-sharp">arrow_outward</span></div>
              <div data-view="menuclose" class="toggle-arrow-in"><span class="material-symbols-sharp">arrow_insert</span></div>
            </a>
            <a href="#" class="mobile-toggle w-inline-block">
              <div class="mobile-toggle-out"><span class="material-symbols-sharp">menu</span></div>
              <div class="mobile-toggle-in"><span class="material-symbols-sharp">close</span></div>
            </a>
            <a href="index.html" aria-current="page" class="logo-home-link w-inline-block w--current">
              <div class="logo-text link">S<span class="logohidden">trike </span>D<span class="logohidden">esign </span>S<span class="logohidden">tudio</span></div>
            </a>
          </div>
        </div>
        <div class="menu-list">
          <div class="menu-drop">
            <div class="drop-label index w-clearfix">
              <div>Index</div>
              <a href="#" class="drop-icon w-inline-block">
                <div class="icon-center"><span class="material-symbols-sharp">add</span></div>
              </a>
            </div>
            <div class="drop-down index">
              <div class="padding">
                <a href="work/sds-server.html" class="button w-button">SDS Server</a>
                <a href="work/making-room-for-abolition.html" class="button w-button">Making Room for Abolition</a>
                <a href="work/the-revolution-will-not-have-been-downloaded.html" class="button w-button">Revolution in Progress</a>
                <a href="work/built-this-way.html" class="button w-button">B.T.W.</a>
                <a href="work/longhouse-to-highrise.html" class="button w-button">Longhouse to Highrise</a>
                <a href="work/memory-work.html" class="button w-button">Memory Work Archive</a>
                <a href="work/workplace-show.html" class="button w-button">Work/Place</a>
                <a href="work/beyond-the-words-of-earth.html" class="button w-button">Beyond the Words of Earth</a>
                <a href="work/on-becoming-bots-bugs.html" class="button w-button">Hackers&amp;Designers</a>
                <a href="work/work-place-foresight-report.html" class="button w-button">Work/Place Report</a>
                <a href="work/longhouse-to-highrise-copy.html" class="button w-button">Orange Library</a>
                <a href="work/womxns-work.html" class="button w-button">Women&#x27;s Work</a>
                <a href="work/creating-in-the-greyscale.html" class="button w-button">Creating in the Greyscale</a>
                <a href="work/offer-need-machine.html" class="button w-button">Offer/Need Machine</a>
                <a href="work/cowork-club.html" class="button w-button">Cowrk Club</a>
                <a href="work/memory-work-monument.html" class="button w-button">Memory Work Monument</a>
                <a href="work/vern.html" class="button w-button">Vern</a>
                <a href="work/tokyo-smoke.html" class="button w-button">Tokyo Smoke</a>
                <a href="work/ada-support.html" class="button w-button">Ada.Support</a>
                <a href="work/moca-night-visions.html" class="button w-button">Night Visions</a>
                <a href="work/casino-artspace.html" class="button w-button">Casino Artspace</a>
                <a href="work/eq-bank.html" class="button w-button">Own Two Hands</a>
                <a href="work/majuscule.html" class="button w-button">Majuscule</a>
              </div>
            </div>
          </div>
          <div class="menu-drop">
            <div class="drop-label w-clearfix">
              <div>About</div>
              <a href="#" class="drop-icon w-inline-block">
                <div class="icon-center"><span class="material-symbols-sharp">add</span></div>
              </a>
            </div>
            <div class="drop-down about">
              <div class="padding">
                <a href="emil-woudenberg.html" class="button w-button">Team</a>
              </div>
            </div>
          </div>
          <div class="menu-drop">
            <div class="drop-label w-clearfix">
              <div>Subscribe</div>
              <a href="#" class="drop-icon w-inline-block">
                <div class="icon-center"><span class="material-symbols-sharp">add</span></div>
              </a>
            </div>
            <div class="drop-down subscribe">
              <div class="padding">
                <div class="form-block w-form">
                  <form id="email-form" name="email-form" data-name="Email Form" action="https://strikedesignstudio.us4.list-manage.com/subscribe/post?u=1741ad82963eb896f90a965e7&amp;amp;id=388550eeef&amp;amp;v_id=6850&amp;amp;f_id=000d02ebf0" method="post" class="form" data-wf-page-id="63dc1b0675b1b91435d5241b" data-wf-element-id="4805a4d5-fb83-2c80-6880-157497e4774e"><label for="Email-3">Email Address</label><input class="form-field w-input" maxlength="256" name="Email" data-name="Email" placeholder="Enter Email" type="email" id="Email-3" required=""><input type="submit" data-wait="Please wait..." class="button w-button" value="Submit"></form>
                  <div class="success-message w-form-done">
                    <div>Thank you! Your submission has been received!</div>
                  </div>
                  <div class="error-message w-form-fail">
                    <div>Oops! Something went wrong while submitting the form.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="menu-drop">
            <div class="drop-label w-clearfix">
              <div>Follow</div>
              <a href="#" class="drop-icon w-inline-block">
                <div class="icon-center"><span class="material-symbols-sharp">add</span></div>
              </a>
            </div>
            <div class="drop-down follow">
              <div class="padding">
                <a href="https://www.instagram.com/studioonstrike/" target="_blank" class="button w-button">Instagram</a>
                <a href="https://www.facebook.com/studioonstrike/" target="_blank" class="button w-button">Facebook</a>
                <a href="https://twitter.com/studioonstrike?lang=en" target="_blank" class="button w-button">Twitter</a>
                <a href="https://www.linkedin.com/company/strike-design-studio/" target="_blank" class="button w-button">Linkedin</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="drag-queen-main w-clearfix">
        <div class="sidebar">
          <div class="control-bar w-clearfix">
            <a href="#" class="more-info-toggle w-inline-block">
              <div data-view="sidebaropen" class="more-info-open"><span class="material-symbols-sharp">info</span></div>
              <div data-view="sidebarclose" class="more-info-close"><span class="material-symbols-sharp">cancel</span></div>
            </a>
            <a href="#" class="color-toggle w-inline-block">
              <div data-view="lightmode" class="color-toggle-on"><span class="material-symbols-sharp">invert_colors</span></div>
              <div data-view="darkmode" class="color-toggle-off"><span class="material-symbols-sharp">invert_colors_off</span></div>
            </a>
          </div>
          <div class="sidebar-padding">
            <div class="more-info">
              <div class="sidebar-copy">
                <p class="big-para">Strike Design Studio offers frank consultancy and striking solutions for IRL and URLS. Designing brands, websites, and printed matter.</p>
                <div class="client-list w-clearfix">
                  <div class="label">Clients</div>
                  <div class="link-grid">
                    <a href="https://fromlater.com/" target="_blank" class="link">From Later<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.myseumoftoronto.com/" class="link">Myseum<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://joinlane.com/" target="_blank" class="link">Lane<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.thebentway.ca" target="_blank" class="link">Bentway<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.ocadu.ca/services/centre-for-emerging-artists-and-designers" target="_blank" class="link">OCAD U<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://ca.tokyosmoke.com/" target="_blank" class="link">Tokyo Smoke<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://tyler.temple.edu/temple-contemporary" target="_blank" class="link">Temple Contemporary<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.autodesk.ca/" target="_blank" class="link">Autodesk<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.wildbioscience.com/" target="_blank" class="link">Wild Bioscience<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.moa-technology.com/" target="_blank" class="link">MoA Technology<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://vucavu.com/" target="_blank" class="link">VUCAVU<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.ada.cx/" target="_blank" class="link">Ada.Support<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://www.woven.science/" target="_blank" class="link">Woven Science<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid"></div>
                  <div class="link-grid">
                    <a href="https://www.safeway.ca/" target="_blank" class="link">Safeway<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://projectartscentre.ie/" target="_blank" class="link">Project Arts Center<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://whippersnapper.ca/" target="_blank" class="link">Whippersnapper<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid">
                    <a href="https://thegoldfarbgallery.ca/" target="_blank" class="link">Goldfarb Gallery<span class="material-symbols-sharp">north_east</span></a>
                  </div>
                  <div class="link-grid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="gallery">
          <div class="gallery-scroll-bar">
            <div class="gallery-control w-clearfix">
              <div class="gallery-grid-button">
                <a data-view="gridone" href="#" class="grid-row one fill w-inline-block"></a>
                <a data-view="gridtwo" href="#" class="grid-row two fill w-inline-block"></a>
                <a data-view="gridthree" href="#" class="grid-row three w-inline-block"></a>
              </div>
              <a href="#" class="full-screen-toggle open w-inline-block">
                <div class="full-screen-open"><span class="material-symbols-sharp">open_in_full</span></div>
                <div class="full-screen-close"><span class="material-symbols-sharp">close_fullscreen</span></div>
              </a>
            </div>
            <div class="header-title">
              <div>Strike Design Studio</div>
            </div>
            <div class="post-archive">
              <div id="w-node-b8b17484-ebac-0f80-af76-223f4a2aa268-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">makingroom.online</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://www.makingroom.online/" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px; overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/making-room-for-abolition.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">Making Room for Abolition</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_0ffcfcc3-dfba-4296-1cd0-e0e905d49ccc-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">longhousetohighrise.github.io</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://longhousetohighrise.github.io/" title="description"></iframe>
                              <style>.iframe-settings { 
width:1366px; height:768px; 
overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/longhouse-to-highrise.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">Longhouse to Highrise</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-be85e959-7ba1-fe32-0681-2cd0a8393f3a-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="book-container">
                      <div class="book-flipper">
                        <div class="spine cover">
                          <div class="right-side-front"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bbb-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 01 Cover" loading="eager" src="images/revolution.jpg" srcset="images/revolution-p-500.jpg 500w, images/revolution.jpg 874w" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bbd-405c0bb7" loading="eager" alt="How to make a website: Page 02" src="images/revolution52.jpg" class="left-side-contain"></div>
                        </div>
                        <div class="spine _2">
                          <div class="right-side-front"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bc0-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 03" src="images/revolution3.jpg" loading="lazy" srcset="images/revolution3-p-500.jpg 500w, images/revolution3.jpg 874w" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bc2-405c0bb7" loading="lazy" alt="How to make a website: Page 04" src="images/revolution52.jpg" class="left-side-contain"></div>
                        </div>
                        <div class="spine _3">
                          <div class="right-side-front"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bc5-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 05" src="images/revolution5.jpg" loading="lazy" srcset="images/revolution5-p-500.jpg 500w, images/revolution5.jpg 874w" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bc7-405c0bb7" loading="lazy" alt="How to make a website: Page 06" src="images/revolution52.jpg" class="left-side-contain"></div>
                        </div>
                        <div class="spine _4">
                          <div class="right-side-front"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bca-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 07" src="images/revolution7.jpg" loading="lazy" srcset="images/revolution7-p-500.jpg 500w, images/revolution7.jpg 874w" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bcc-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 08" src="images/revolution8.jpg" loading="lazy" srcset="images/revolution8-p-500.jpg 500w, images/revolution8.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _5">
                          <div class="right-side-front"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bcf-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 09" src="images/revolution9.jpg" loading="lazy" srcset="images/revolution9-p-500.jpg 500w, images/revolution9.jpg 874w" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bd1-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 10" src="images/revolution10.jpg" loading="lazy" srcset="images/revolution10-p-500.jpg 500w, images/revolution10.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _6">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution11-p-500.jpg 500w, images/revolution11.jpg 874w" alt="How to make a website: Page 11" src="images/revolution11.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bd6-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution12.jpg" loading="lazy" srcset="images/revolution12-p-500.jpg 500w, images/revolution12.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _8">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution15-p-500.jpg 500w, images/revolution15-p-800.jpg 800w, images/revolution15.jpg 874w" alt="How to make a website: Page 11" src="images/revolution15.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0be0-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution16.jpg" loading="lazy" srcset="images/revolution16-p-500.jpg 500w, images/revolution16.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _9">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution17-p-500.jpg 500w, images/revolution17.jpg 874w" alt="How to make a website: Page 11" src="images/revolution17.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0be5-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution18.jpg" loading="lazy" srcset="images/revolution18-p-500.jpg 500w, images/revolution18.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _10">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution19-p-500.jpg 500w, images/revolution19.jpg 874w" alt="How to make a website: Page 11" src="images/revolution19.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bea-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution20.jpg" loading="lazy" srcset="images/revolution20-p-500.jpg 500w, images/revolution20.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _11">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution21-p-500.jpg 500w, images/revolution21.jpg 874w" alt="How to make a website: Page 11" src="images/revolution21.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bef-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution22.jpg" loading="lazy" srcset="images/revolution22-p-500.jpg 500w, images/revolution22-p-800.jpg 800w, images/revolution22.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _12">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution23-p-500.jpg 500w, images/revolution23.jpg 874w" alt="How to make a website: Page 11" src="images/revolution23.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bf4-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution24.jpg" loading="lazy" srcset="images/revolution24-p-500.jpg 500w, images/revolution24.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _14">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution27-p-500.jpg 500w, images/revolution27.jpg 874w" alt="How to make a website: Page 11" src="images/revolution27.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0bfe-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution28.jpg" loading="lazy" srcset="images/revolution28-p-500.jpg 500w, images/revolution28.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _15">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution29-p-500.jpg 500w, images/revolution29.jpg 874w" alt="How to make a website: Page 11" src="images/revolution29.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c03-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution30.jpg" loading="lazy" srcset="images/revolution30-p-500.jpg 500w, images/revolution30.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _16">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution31-p-500.jpg 500w, images/revolution31.jpg 874w" alt="How to make a website: Page 11" src="images/revolution31.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c08-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution32.jpg" loading="lazy" srcset="images/revolution32-p-500.jpg 500w, images/revolution32.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _17">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution33-p-500.jpg 500w, images/revolution33.jpg 874w" alt="How to make a website: Page 11" src="images/revolution33.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c0d-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution34.jpg" loading="lazy" srcset="images/revolution34-p-500.jpg 500w, images/revolution34.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _19">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution37-p-500.jpg 500w, images/revolution37.jpg 874w" alt="How to make a website: Page 11" src="images/revolution37.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c17-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution38.jpg" loading="lazy" srcset="images/revolution38-p-500.jpg 500w, images/revolution38.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _21">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution41-p-500.jpg 500w, images/revolution41.jpg 874w" alt="How to make a website: Page 11" src="images/revolution41.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c21-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution42.jpg" loading="lazy" srcset="images/revolution42-p-500.jpg 500w, images/revolution42.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _22">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution43-p-500.jpg 500w, images/revolution43.jpg 874w" alt="How to make a website: Page 11" src="images/revolution43.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c26-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution44.jpg" loading="lazy" srcset="images/revolution44-p-500.jpg 500w, images/revolution44.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _23">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution45-p-500.jpg 500w, images/revolution45.jpg 874w" alt="How to make a website: Page 11" src="images/revolution45.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c2b-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution46.jpg" loading="lazy" srcset="images/revolution46-p-500.jpg 500w, images/revolution46.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _25">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution49-p-500.jpg 500w, images/revolution49.jpg 874w" alt="How to make a website: Page 11" src="images/revolution49.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c35-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 12" src="images/revolution50.jpg" loading="lazy" srcset="images/revolution50-p-500.jpg 500w, images/revolution50.jpg 874w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _26">
                          <div class="right-side-front"><img sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/revolution51-p-500.jpg 500w, images/revolution51.jpg 874w" alt="How to make a website: Page 11" src="images/revolution51.jpg" loading="lazy" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c3a-405c0bb7" loading="lazy" alt="How to make a website: Page 12" src="images/revolution52.jpg" class="left-side-contain"></div>
                        </div>
                        <div data-w-id="d0c85500-5f80-9ae0-19fc-e975405c0c3b" class="spine _27">
                          <div class="right-side-front"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c3d-405c0bb7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 11" src="images/revolution53.jpg" loading="lazy" srcset="images/revolution53-p-500.jpg 500w, images/revolution53.jpg 874w" class="right-image-contain"></div>
                          <div class="left-side-back"><img id="w-node-d0c85500-5f80-9ae0-19fc-e975405c0c3f-405c0bb7" loading="lazy" alt="How to make a website: Page 12" src="images/revolution52.jpg" class="left-side-contain"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/the-revolution-will-not-have-been-downloaded.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">The Revolution in Progress</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-fbdaa1a0-befd-f68c-5997-bd862e10c3a6-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div id="browser-full" class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">de.pub</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://de.pub/" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/sds-server.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">SDS Server</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_072ec68b-d647-f647-c98c-96e793ebd370-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider sliderbook">
                    <div class="slider-wrap book">
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-01.png" loading="lazy" srcset="images/Hackers-and-Designers-01-p-500.png 500w, images/Hackers-and-Designers-01.png 622w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-02.png" loading="lazy" srcset="images/Hackers-and-Designers-02-p-500.png 500w, images/Hackers-and-Designers-02.png 621w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-03.png" loading="lazy" srcset="images/Hackers-and-Designers-03-p-500.png 500w, images/Hackers-and-Designers-03.png 622w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-04.png" loading="lazy" srcset="images/Hackers-and-Designers-04-p-500.png 500w, images/Hackers-and-Designers-04.png 622w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-05.png" loading="lazy" srcset="images/Hackers-and-Designers-05-p-500.png 500w, images/Hackers-and-Designers-05.png 622w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-07.png" loading="lazy" srcset="images/Hackers-and-Designers-07-p-500.png 500w, images/Hackers-and-Designers-07.png 622w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-08.png" loading="lazy" srcset="images/Hackers-and-Designers-08-p-500.png 500w, images/Hackers-and-Designers-08.png 622w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="" src="images/Hackers-and-Designers-09.png" loading="lazy" srcset="images/Hackers-and-Designers-09-p-500.png 500w, images/Hackers-and-Designers-09.png 621w" sizes="(max-width: 479px) 9vw, 4vw" class="photography contain"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/on-becoming-bots-bugs.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2023</div>
                  <h2 class="post-title">Hackers&amp;Designers</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-f6442fc9-84ca-0139-d1f1-f65430d5e271-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider">
                    <div class="slider-wrap">
                      <div class="slide"><img src="images/mohbtwgif.gif" loading="lazy" alt="Jo Geczy Built This Way Trans London" class="photography"></div>
                      <div class="slide"><img src="images/posterbtw.jpg" loading="lazy" width="Auto" height="Auto" alt="Jo Geczy Custom Carpentry Built This Way Trans London" srcset="images/posterbtw-p-500.jpg 500w, images/posterbtw-p-800.jpg 800w, images/posterbtw-p-1080.jpg 1080w, images/posterbtw.jpg 1500w" sizes="(max-width: 479px) 16vw, 8vw" class="photography contain"></div>
                      <div class="slide"><img src="images/front-t-shirt.png" loading="lazy" width="Auto" height="Auto" alt="Jo Geczy Built This Way Trans London" srcset="images/front-t-shirt-p-500.png 500w, images/front-t-shirt-p-800.png 800w, images/front-t-shirt-p-1080.png 1080w, images/front-t-shirt.png 2000w" sizes="(max-width: 479px) 16vw, 8vw" class="photography contain"></div>
                      <div class="slide"><img src="images/back-t-shirt.png" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/back-t-shirt-p-500.png 500w, images/back-t-shirt-p-800.png 800w, images/back-t-shirt-p-1080.png 1080w, images/back-t-shirt.png 2000w" alt="Jo Geczy Built This Way Trans London" class="photography contain"></div>
                      <div class="slide"><img src="images/totebagmockup.png" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/totebagmockup-p-500.png 500w, images/totebagmockup-p-800.png 800w, images/totebagmockup-p-1080.png 1080w, images/totebagmockup.png 1796w" alt="Jo Geczy Built This Way Trans London" class="photography contain"></div>
                      <div class="slide"><img src="images/postersmoh.jpg" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/postersmoh-p-500.jpg 500w, images/postersmoh-p-800.jpg 800w, images/postersmoh-p-1080.jpg 1080w, images/postersmoh.jpg 1500w" alt="Jo Geczy Built This Way Trans London" class="photography"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/built-this-way.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2023</div>
                  <h2 class="post-title">Built This Way</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_20d4df8e-cd58-23dc-90e7-39b0309ba76f-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">od-fr.com</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://od-fr.com/" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/on-display-for-review.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">On Display/For Review</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-a5cef2e6-9656-ab69-6a19-64266a1ff5ec-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window bg-white">
                            <div class="browser-bar">
                              <div class="text-block">fromlater.com</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://www.fromlater.com/" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/from-later.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">From Later</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_3dd8c8c3-c15c-fed2-b3db-a4883892e263-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">theorangelibrary.org</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://theorangelibrary.org//" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px;overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/longhouse-to-highrise-copy.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2024</div>
                  <h2 class="post-title">The Orange Library</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_9a7740b5-7cc2-32cd-cebe-25cc44dfa6fc-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="book-container">
                      <div class="book-flipper">
                        <div data-w-id="c47afa74-5e3c-7ca3-7a08-1f40a5d6c386" class="spine cover">
                          <div class="right-side-front"><img src="images/temple-rajniperera.jpg" loading="eager" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c388-a5d6c384" alt="How to make a website: Page 01 Cover" sizes="(max-width: 479px) 47vw, (max-width: 767px) 48vw, (max-width: 991px) 49vw, 48vw" srcset="images/temple-rajniperera-p-500.jpg 500w, images/temple-rajniperera.jpg 750w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera2.jpg" loading="eager" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c38a-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 02" srcset="images/temple-rajniperera2-p-500.jpg 500w, images/temple-rajniperera2.jpg 750w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _2">
                          <div class="right-side-front"><img src="images/temple-rajniperera3.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c38d-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 03" srcset="images/temple-rajniperera3-p-500.jpg 500w, images/temple-rajniperera3.jpg 750w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera4.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c38f-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 04" srcset="images/temple-rajniperera4-p-500.jpg 500w, images/temple-rajniperera4.jpg 750w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _3">
                          <div class="right-side-front"><img src="images/temple-rajniperera5.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c392-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 05" srcset="images/temple-rajniperera5-p-500.jpg 500w, images/temple-rajniperera5.jpg 750w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera6.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c394-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 06" srcset="images/temple-rajniperera6-p-500.jpg 500w, images/temple-rajniperera6.jpg 750w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _4">
                          <div class="right-side-front"><img src="images/temple-rajniperera7.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c397-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 07" srcset="images/temple-rajniperera7-p-500.jpg 500w, images/temple-rajniperera7.jpg 750w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera8.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c399-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 08" srcset="images/temple-rajniperera8-p-500.jpg 500w, images/temple-rajniperera8.jpg 750w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _5">
                          <div class="right-side-front"><img src="images/temple-rajniperera9.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c39c-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 09" srcset="images/temple-rajniperera9-p-500.jpg 500w, images/temple-rajniperera9.jpg 750w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera10.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c39e-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 10" srcset="images/temple-rajniperera10-p-500.jpg 500w, images/temple-rajniperera10.jpg 750w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _6">
                          <div class="right-side-front"><img src="images/temple-rajniperera11.jpg" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/temple-rajniperera11-p-500.jpg 500w, images/temple-rajniperera11.jpg 750w" loading="lazy" alt="How to make a website: Page 11" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera12.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c3a3-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/temple-rajniperera12-p-500.jpg 500w, images/temple-rajniperera12.jpg 750w" class="left-side-contain"></div>
                        </div>
                        <div data-w-id="c47afa74-5e3c-7ca3-7a08-1f40a5d6c3a4" class="spine _7">
                          <div class="right-side-front"><img src="images/temple-rajniperera15.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c3a6-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/temple-rajniperera15-p-500.jpg 500w, images/temple-rajniperera15.jpg 750w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/temple-rajniperera16.jpg" id="w-node-c47afa74-5e3c-7ca3-7a08-1f40a5d6c3a8-a5d6c384" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/temple-rajniperera16-p-500.jpg 500w, images/temple-rajniperera16.jpg 750w" class="left-side-contain"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/beyond-the-words-of-earth.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2023</div>
                  <h2 class="post-title">Beyond the Words of Earth</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-c7c0b776-9710-9517-28fa-3bbc7b8cc5f7-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="_3d-container">
                    <div class="animationcontainer">
                      <div class="slider-bar w-embed"><input type="range" id="rotation-slider" min="0" max="360" step="1" value="180">
                        <style>
#rotation-slider {
  -webkit-appearance: none;
  width: 100%;
  max-width:350px;
  height: 2px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  padding: 0 auto 0 auto;
}
#rotation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 15px;
  border-radius: 5px; 
  background: white;
  cursor: pointer;
}
#rotation-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
</style>
                      </div>
                      <div id="viewer-container" class="viewer-container"></div>
                    </div>
                    <div class="colour-overlay"></div><img src="images/cloudtop.gif" loading="eager" alt="" class="clouds-overlay">
                    <div class="w-embed w-script">
                      <script>
// Setup Scene, Camera, and Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1000);
const container = document.getElementById('viewer-container');
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0); // Fully transparent background
container.appendChild(renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0x404040, 2);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
// Load the .glb model using GLTFLoader
const loader = new THREE.GLTFLoader();
let model = null;
let baseRotationOffset = 0;
loader.load(
    'https://strikedesignstudio.com/webmock/horse3.glb',
    (gltf) => {
        model = gltf.scene;
        scene.add(model);
        // Ensure model scales and centers properly
        scaleModel();
        adjustCamera();
        // Set initial rotation and offset
        model.rotation.y = THREE.Math.degToRad(250);
        baseRotationOffset = 250 - 180;
        // Initialize the slider value
        const rotationSlider = document.getElementById('rotation-slider');
        rotationSlider.value = 180;
        // Force initial resize to ensure proper scaling
        handleResize();
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.error('An error occurred while loading the model:', error);
    }
);
// Adjust camera to fit the model
const adjustCamera = () => {
    camera.position.z = 9;
    camera.aspect = container.offsetWidth / container.offsetHeight;
    camera.updateProjectionMatrix();
};
// Scale and center the model
const scaleModel = () => {
    if (model) {
        // Get the container's aspect ratio
        const containerAspect = container.offsetWidth / container.offsetHeight;
        // Base scaling factor
        const scaleFactor = container.offsetWidth / 1000;
        // Scale model to fit within the container
        if (containerAspect > 1) {
            // Wider container: Fit based on height
            model.scale.set(scaleFactor, scaleFactor, scaleFactor);
        } else {
            // Taller container: Fit based on width
            model.scale.set(scaleFactor * containerAspect, scaleFactor * containerAspect, scaleFactor * containerAspect);
        }
        // Center the model
        model.position.set(0, 0.25, 0);
    }
};
// Handle resizing of the container
const handleResize = () => {
    const width = container.offsetWidth;
    const height = container.offsetHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    scaleModel();
    adjustCamera();
};
// Observe changes in container size using ResizeObserver
const resizeObserver = new ResizeObserver(() => {
    handleResize();
});
resizeObserver.observe(container);
// Get the slider element
const rotationSlider = document.getElementById('rotation-slider');
// Animation Loop
const animate = () => {
    requestAnimationFrame(animate);
    if (model) {
        const rotationValue = parseFloat(rotationSlider.value);
        model.rotation.y = THREE.Math.degToRad(rotationValue + baseRotationOffset);
    }
    renderer.render(scene, camera);
};
// Start animation loop
animate();
</script>
                    </div>
                  </div>
                </div>
                <a href="work/a-starry-eyed-subspecies.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2022</div>
                  <h2 class="post-title">A Starry-Eyed Subspecies</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_9061700e-e05b-d961-5d55-8b666f6cb60f-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider sliderbook">
                    <div class="slider-wrap book">
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures1.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures1-p-500.jpg 500w, images/Refactoring-Work-Futures1.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futuresimgs_Page_02.jpg" loading="lazy" srcset="images/Refactoring-Work-Futuresimgs_Page_02-p-500.jpg 500w, images/Refactoring-Work-Futuresimgs_Page_02-p-800.jpg 800w, images/Refactoring-Work-Futuresimgs_Page_02-p-1080.jpg 1080w, images/Refactoring-Work-Futuresimgs_Page_02.jpg 1200w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures4.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures4-p-500.jpg 500w, images/Refactoring-Work-Futures4.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures6.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures6-p-500.jpg 500w, images/Refactoring-Work-Futures6.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures7.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures7-p-500.jpg 500w, images/Refactoring-Work-Futures7-p-800.jpg 800w, images/Refactoring-Work-Futures7.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures8.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures8-p-500.jpg 500w, images/Refactoring-Work-Futures8.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures10.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures10-p-500.jpg 500w, images/Refactoring-Work-Futures10.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures11.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures11-p-500.jpg 500w, images/Refactoring-Work-Futures11.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures14.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures14-p-500.jpg 500w, images/Refactoring-Work-Futures14-p-800.jpg 800w, images/Refactoring-Work-Futures14.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures16.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures16-p-500.jpg 500w, images/Refactoring-Work-Futures16.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures17.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures17-p-500.jpg 500w, images/Refactoring-Work-Futures17.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures18.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures18-p-500.jpg 500w, images/Refactoring-Work-Futures18.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures19.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures19-p-500.jpg 500w, images/Refactoring-Work-Futures19.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures20.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures20-p-500.jpg 500w, images/Refactoring-Work-Futures20.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures23.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures23-p-500.jpg 500w, images/Refactoring-Work-Futures23.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures24.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures24-p-500.jpg 500w, images/Refactoring-Work-Futures24.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures25.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures25-p-500.jpg 500w, images/Refactoring-Work-Futures25.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures26.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures26-p-500.jpg 500w, images/Refactoring-Work-Futures26.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures28.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures28-p-500.jpg 500w, images/Refactoring-Work-Futures28.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures31.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures31-p-500.jpg 500w, images/Refactoring-Work-Futures31.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures32.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures32-p-500.jpg 500w, images/Refactoring-Work-Futures32.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures33.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures33-p-500.jpg 500w, images/Refactoring-Work-Futures33.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures38.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures38-p-500.jpg 500w, images/Refactoring-Work-Futures38.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures39.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures39-p-500.jpg 500w, images/Refactoring-Work-Futures39.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures40.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures40-p-500.jpg 500w, images/Refactoring-Work-Futures40.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures41.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures41-p-500.jpg 500w, images/Refactoring-Work-Futures41.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures45.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures45-p-500.jpg 500w, images/Refactoring-Work-Futures45.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures46.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures46-p-500.jpg 500w, images/Refactoring-Work-Futures46.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures47.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures47-p-500.jpg 500w, images/Refactoring-Work-Futures47.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures48.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures48-p-500.jpg 500w, images/Refactoring-Work-Futures48.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures52.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures52-p-500.jpg 500w, images/Refactoring-Work-Futures52.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures53.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures53-p-500.jpg 500w, images/Refactoring-Work-Futures53.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures54.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures54-p-500.jpg 500w, images/Refactoring-Work-Futures54.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures56.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures56-p-500.jpg 500w, images/Refactoring-Work-Futures56.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures59.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures59-p-500.jpg 500w, images/Refactoring-Work-Futures59-p-800.jpg 800w, images/Refactoring-Work-Futures59.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures60.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures60-p-500.jpg 500w, images/Refactoring-Work-Futures60.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures61.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures61-p-500.jpg 500w, images/Refactoring-Work-Futures61.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Report design for Work/Place by From Later and Lane" src="images/Refactoring-Work-Futures64.jpg" loading="lazy" srcset="images/Refactoring-Work-Futures64-p-500.jpg 500w, images/Refactoring-Work-Futures64.jpg 901w" sizes="(max-width: 991px) 20px, 2vw" class="photography contain"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/work-place-foresight-report.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2021</div>
                  <h2 class="post-title">Work/Place</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_98f9dc37-6777-803d-ef9c-44f56121967a-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">workplace.show</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://www.workplace.show/" title="description" loading="eager"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; overflow:none;}
</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/workplace-show.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2021</div>
                  <h2 class="post-title">Workplace.show Podcast</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_31d651a6-162b-cd90-6f35-7bbc70f11baf-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div id="browser-full" class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">memory-work.com</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://memory-work.com/" title="description"></iframe>
                              <style>
.iframe-settings {
width:1366px; height:768px; 
      }
      </style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/memory-work.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2020</div>
                  <h2 class="post-title">Memory Work</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-c1f529ef-4be2-dc89-288b-b73d4018451f-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider sliderbook">
                    <div class="slider-wrap book">
                      <div class="slide"><img src="images/MOI.gif" loading="lazy" width="Auto" height="Auto" alt="Badge or Giphy sticker for social media campaign Memory Work. Reads Mothers of Invention." class="photography contain"></div>
                      <div class="slide"><img src="images/cosmetichealing.gif" loading="lazy" alt="Badge or Giphy sticker for social media campaign Memory Work. Reads Local Healer, Cosmetic Healing." class="photography contain"></div>
                      <div class="slide"><img src="images/living-tools.gif" loading="lazy" alt="Badge or Giphy sticker for social media campaign Memory Work. Reads Almanac, Creative, Biologist, Co-op." class="photography contain"></div>
                      <div class="slide"><img src="images/weavinglife.gif" loading="lazy" alt="Badge or Giphy sticker for social media campaign Memory Work. That reads Weaving Life." class="photography contain"></div>
                      <div class="slide"><img src="images/livinginternet.gif" loading="lazy" alt="Badge or Giphy sticker for social media campaign Memory Work. Reads The Living Internet, Forming Kin." class="photography contain"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/memory-work-badges.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2020</div>
                  <h2 class="post-title">Memory Work Stickers</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-a35005f3-e800-915d-56b4-e46c8dcc6d81-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">onm.art</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://offer-need-machine.webflow.io/" title="description"></iframe>
                              <style>.iframe-settings {
width:1366px; height:768px; 
      }
      </style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/offer-need-machine.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2021</div>
                  <h2 class="post-title">Offer/Need Machine</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_587edc22-6d11-cbd8-23db-e7faff5647d1-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="book-container">
                      <div class="book-flipper">
                        <div class="spine cover">
                          <div class="right-side-front"><img src="images/creatingingreyscale.jpg" loading="eager" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53659-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 01 Cover" srcset="images/creatingingreyscale-p-500.jpg 500w, images/creatingingreyscale-p-800.jpg 800w, images/creatingingreyscale.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale2.jpg" loading="eager" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5365b-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 02" srcset="images/creatingingreyscale2-p-500.jpg 500w, images/creatingingreyscale2-p-800.jpg 800w, images/creatingingreyscale2-p-1080.jpg 1080w, images/creatingingreyscale2.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _2">
                          <div class="right-side-front"><img src="images/creatingingreyscale3.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5365e-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 03" srcset="images/creatingingreyscale3-p-500.jpg 500w, images/creatingingreyscale3-p-800.jpg 800w, images/creatingingreyscale3.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale4.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53660-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 04" srcset="images/creatingingreyscale4-p-500.jpg 500w, images/creatingingreyscale4-p-800.jpg 800w, images/creatingingreyscale4.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _3">
                          <div class="right-side-front"><img src="images/creatingingreyscale5.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53663-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 05" srcset="images/creatingingreyscale5-p-500.jpg 500w, images/creatingingreyscale5-p-800.jpg 800w, images/creatingingreyscale5.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale6.jpg" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/creatingingreyscale6-p-500.jpg 500w, images/creatingingreyscale6-p-800.jpg 800w, images/creatingingreyscale6.jpg 1158w" loading="lazy" alt="How to make a website: Page 06" class="left-side-contain"></div>
                        </div>
                        <div class="spine _4">
                          <div class="right-side-front"><img src="images/creatingingreyscale7.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53668-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 07" srcset="images/creatingingreyscale7-p-500.jpg 500w, images/creatingingreyscale7-p-800.jpg 800w, images/creatingingreyscale7.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale8.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5366a-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 08" srcset="images/creatingingreyscale8-p-500.jpg 500w, images/creatingingreyscale8-p-800.jpg 800w, images/creatingingreyscale8.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _5">
                          <div class="right-side-front"><img src="images/creatingingreyscale9.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5366d-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 09" srcset="images/creatingingreyscale9-p-500.jpg 500w, images/creatingingreyscale9-p-800.jpg 800w, images/creatingingreyscale9.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale10.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5366f-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 10" srcset="images/creatingingreyscale10-p-500.jpg 500w, images/creatingingreyscale10-p-800.jpg 800w, images/creatingingreyscale10.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _6">
                          <div class="right-side-front"><img src="images/creatingingreyscale11.jpg" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/creatingingreyscale11-p-500.jpg 500w, images/creatingingreyscale11-p-800.jpg 800w, images/creatingingreyscale11.jpg 1158w" loading="lazy" alt="How to make a website: Page 11" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale12.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53674-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale12-p-500.jpg 500w, images/creatingingreyscale12-p-800.jpg 800w, images/creatingingreyscale12.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _7">
                          <div class="right-side-front"><img src="images/creatingingreyscale13.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53677-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale13-p-500.jpg 500w, images/creatingingreyscale13-p-800.jpg 800w, images/creatingingreyscale13.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale14.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53679-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale14-p-500.jpg 500w, images/creatingingreyscale14-p-800.jpg 800w, images/creatingingreyscale14.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _8">
                          <div class="right-side-front"><img src="images/creatingingreyscale15.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5367c-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale15-p-500.jpg 500w, images/creatingingreyscale15-p-800.jpg 800w, images/creatingingreyscale15.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale16.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5367e-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale16-p-500.jpg 500w, images/creatingingreyscale16-p-800.jpg 800w, images/creatingingreyscale16.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _9">
                          <div class="right-side-front"><img src="images/creatingingreyscale17.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53681-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale17-p-500.jpg 500w, images/creatingingreyscale17-p-800.jpg 800w, images/creatingingreyscale17.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale18.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53683-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale18-p-500.jpg 500w, images/creatingingreyscale18-p-800.jpg 800w, images/creatingingreyscale18.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _10">
                          <div class="right-side-front"><img src="images/creatingingreyscale19.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53686-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale19-p-500.jpg 500w, images/creatingingreyscale19-p-800.jpg 800w, images/creatingingreyscale19.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale20.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53688-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale20-p-500.jpg 500w, images/creatingingreyscale20-p-800.jpg 800w, images/creatingingreyscale20.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _11">
                          <div class="right-side-front"><img src="images/creatingingreyscale21.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5368b-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale21-p-500.jpg 500w, images/creatingingreyscale21-p-800.jpg 800w, images/creatingingreyscale21.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale22.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5368d-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale22-p-500.jpg 500w, images/creatingingreyscale22-p-800.jpg 800w, images/creatingingreyscale22.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _12">
                          <div class="right-side-front"><img src="images/creatingingreyscale23.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53690-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale23-p-500.jpg 500w, images/creatingingreyscale23-p-800.jpg 800w, images/creatingingreyscale23.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale24.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53692-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale24-p-500.jpg 500w, images/creatingingreyscale24-p-800.jpg 800w, images/creatingingreyscale24-p-1080.jpg 1080w, images/creatingingreyscale24.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _13">
                          <div class="right-side-front"><img src="images/creatingingreyscale25.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53695-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale25-p-500.jpg 500w, images/creatingingreyscale25-p-800.jpg 800w, images/creatingingreyscale25.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale26.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e53697-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale26-p-500.jpg 500w, images/creatingingreyscale26-p-800.jpg 800w, images/creatingingreyscale26.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _14">
                          <div class="right-side-front"><img src="images/creatingingreyscale27.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5369a-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale27-p-500.jpg 500w, images/creatingingreyscale27-p-800.jpg 800w, images/creatingingreyscale27.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale28.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5369c-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale28-p-500.jpg 500w, images/creatingingreyscale28-p-800.jpg 800w, images/creatingingreyscale28.jpg 1158w" class="left-side-contain"></div>
                        </div>
                        <div data-w-id="7f45dec2-a097-f04a-706c-999d92e5369d" class="spine _15">
                          <div class="right-side-front"><img src="images/creatingingreyscale29.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e5369f-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/creatingingreyscale29-p-500.jpg 500w, images/creatingingreyscale29-p-800.jpg 800w, images/creatingingreyscale29-p-1080.jpg 1080w, images/creatingingreyscale29.jpg 1158w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/creatingingreyscale30.jpg" id="w-node-_7f45dec2-a097-f04a-706c-999d92e536a1-92e53655" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/creatingingreyscale30-p-500.jpg 500w, images/creatingingreyscale30-p-800.jpg 800w, images/creatingingreyscale30-p-1080.jpg 1080w, images/creatingingreyscale30.jpg 1158w" class="left-side-contain"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/creating-in-the-greyscale.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2021</div>
                  <h2 class="post-title">Creating in the Grayscale</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_9df2f3ec-0bd8-0322-8e3c-2593202b4028-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider">
                    <div class="slider-wrap">
                      <div class="slide"><img src="images/womensworkshopify.jpg" loading="lazy" sizes="(max-width: 479px) 24vw, 12vw" srcset="images/womensworkshopify-p-500.jpg 500w, images/womensworkshopify-p-800.jpg 800w, images/womensworkshopify-p-1080.jpg 1080w, images/womensworkshopify.jpg 1440w" alt="Social Media Campaign for Womxn&#x27;s Work at Shopify" class="photography"></div>
                      <div class="slide"><img src="images/wxwx.gif" loading="lazy" width="Auto" height="Auto" alt="Social Media Campaign for Womxn&#x27;s Work at Shopify. Reads Imagining the futures of Womxn&#x27;s Work March 2nd" class="photography contain"></div>
                      <div class="slide"><img src="images/nehal.gif" loading="lazy" alt="Social Media Campaign for Womxn&#x27;s Work at Shopify. Nehal El--Hadi." class="photography contain"></div>
                      <div class="slide"><img src="images/radha.gif" loading="lazy" alt="Social Media Campaign for Womxn&#x27;s Work at Shopify - Radha Mistry" class="photography contain"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/womxns-work.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2019</div>
                  <h2 class="post-title">Womxn&#x27;s Work</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-a9b3de77-1b08-cfc3-bb34-f17faa513ae4-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider">
                    <div class="slider-wrap">
                      <div class="slide"><img src="images/memoryworkcollectivemonument2.jpeg" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/memoryworkcollectivemonument2-p-500.jpeg 500w, images/memoryworkcollectivemonument2-p-800.jpeg 800w, images/memoryworkcollectivemonument2.jpeg 1000w" alt="Memory Work Monument at the Bentway" class="photography"></div>
                      <div class="slide"><img src="images/memoryworkcollectivemonument7.jpg" loading="lazy" width="Auto" height="Auto" alt="Campaign for Memory Work Monument at the Bentway" srcset="images/memoryworkcollectivemonument7-p-500.jpg 500w, images/memoryworkcollectivemonument7-p-800.jpg 800w, images/memoryworkcollectivemonument7.jpg 1000w" sizes="(max-width: 479px) 16vw, 8vw" class="photography contain"></div>
                      <div class="slide"><img src="images/memoryworkcollectivemonument1.jpg" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/memoryworkcollectivemonument1-p-500.jpg 500w, images/memoryworkcollectivemonument1-p-800.jpg 800w, images/memoryworkcollectivemonument1-p-1080.jpg 1080w, images/memoryworkcollectivemonument1.jpg 1201w" alt="Campaign for Memory Work Monument at the Bentway" class="photography"></div>
                      <div class="slide"><img src="images/memoryworkcollectivemonument5.png" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/memoryworkcollectivemonument5-p-500.png 500w, images/memoryworkcollectivemonument5-p-800.png 800w, images/memoryworkcollectivemonument5-p-1080.png 1080w, images/memoryworkcollectivemonument5.png 1500w" alt="Memory Work Monument at the Bentway" class="photography contain"></div>
                      <div class="slide"><img src="images/memoryworkcollectivemonument6.png" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/memoryworkcollectivemonument6-p-500.png 500w, images/memoryworkcollectivemonument6-p-800.png 800w, images/memoryworkcollectivemonument6-p-1080.png 1080w, images/memoryworkcollectivemonument6.png 1500w" alt="Memory Work Monument at the Bentway" class="photography contain"></div>
                      <div class="slide"><img src="images/memoryworkcollectivemonument4.jpg" loading="lazy" sizes="(max-width: 479px) 16vw, 8vw" srcset="images/memoryworkcollectivemonument4-p-500.jpg 500w, images/memoryworkcollectivemonument4-p-800.jpg 800w, images/memoryworkcollectivemonument4.jpg 1000w" alt="Memory Work Monument at the Bentway" class="photography"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/memory-work-monument.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2022</div>
                  <h2 class="post-title">Memory Work Monument</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_7c416c47-459e-5463-d92d-e0313bee0067-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">germanshible.ca</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://olddutch.webflow.io/" title="description" loading="lazy"></iframe>
                              <style>.iframe-settings {
width:1366px; height:768px; 
      }
      </style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/oldutch-tattooing.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2019</div>
                  <h2 class="post-title">Ol&#x27;Dutch Tattooing</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_7e234918-7e41-cc8a-4809-088112b2cad0-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">cowrk.club</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://cowrk.club/" title="description"></iframe>
                              <style>.iframe-settings {
width:1366px; height:768px; 
      }
      </style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/cowork-club.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2018</div>
                  <h2 class="post-title">Cowork Club</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-fc51dedf-7680-7490-cc9c-171340c4fd7b-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">vern.world</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://vernxwildmoon.webflow.io/" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; }
</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/vern.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2022</div>
                  <h2 class="post-title">Vern World</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_6b5a0491-163f-4058-be69-7c52fdb2cac3-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider sliderbook">
                    <div class="slider-wrap book">
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Cover" src="images/AdaSupport12.jpg" loading="lazy" srcset="images/AdaSupport12-p-500.jpg 500w, images/AdaSupport12.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport10.jpg" loading="lazy" srcset="images/AdaSupport10-p-500.jpg 500w, images/AdaSupport10.jpg 893w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport6.jpg" loading="lazy" srcset="images/AdaSupport6-p-500.jpg 500w, images/AdaSupport6.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport1.jpg" loading="lazy" srcset="images/AdaSupport1-p-500.jpg 500w, images/AdaSupport1.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport4.jpg" loading="lazy" srcset="images/AdaSupport4-p-500.jpg 500w, images/AdaSupport4.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport7.jpg" loading="lazy" srcset="images/AdaSupport7-p-500.jpg 500w, images/AdaSupport7.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport8.jpg" loading="lazy" srcset="images/AdaSupport8-p-500.jpg 500w, images/AdaSupport8.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport5.jpg" loading="lazy" srcset="images/AdaSupport5-p-500.jpg 500w, images/AdaSupport5.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                      <div class="slide"><img width="Auto" height="Auto" alt="Ada.Support Report Page" src="images/AdaSupport9.jpg" loading="lazy" srcset="images/AdaSupport9-p-500.jpg 500w, images/AdaSupport9.jpg 896w" sizes="(max-width: 479px) 8vw, 4vw" class="photography contain"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/ada-support.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2019</div>
                  <h2 class="post-title">Ada.Support</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_965b0313-fb0c-eb70-9f58-ae64f770d943-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider">
                    <div class="slider-wrap">
                      <div class="slide"><img src="images/nightvisionssmall-min.gif" loading="lazy" width="Auto" height="Auto" alt="Poster for Night Visions at the Museum of Contemporary Arts Toronto" class="photography contain"></div>
                      <div class="slide"><img src="images/finalrender.jpg" loading="lazy" sizes="(max-width: 479px) 32vw, 16vw" srcset="images/finalrender-p-500.jpg 500w, images/finalrender.jpg 792w" alt="Poster for Night Visions at the Museum of Contemporary Arts Toronto" class="photography contain"></div>
                      <div class="slide"><img src="images/Reference.jpg" loading="lazy" alt="Two people working in the Automotive Building Factory, inspiration for the poster Night Visions at the Museum of Contemporary Art" class="photography"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/moca-night-visions.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2020</div>
                  <h2 class="post-title">MOCA Night Visions</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-dab05542-176b-f130-d8ad-fedceeaa5afb-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider">
                    <div class="slider-wrap">
                      <div class="slide"><img src="images/shayapostergif.gif" loading="lazy" width="Auto" height="Auto" alt="Poster for Shaya Ishaq&#x27;s show called Mirror Mirror" class="photography contain"></div>
                      <div class="slide"><img src="images/shayaposter.jpeg" loading="lazy" sizes="(max-width: 479px) 48vw, 24vw" srcset="images/shayaposter-p-500.jpeg 500w, images/shayaposter-p-800.jpeg 800w, images/shayaposter.jpeg 1080w" alt="Poster for Shaya Ishaq&#x27;s show called Mirror Mirror" class="photography"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/mirror-mirror.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2019</div>
                  <h2 class="post-title">Mirror Mirror: Shaya Ishaq</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_7982287c-885f-2f6f-d97e-b99c33d7297b-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="slider">
                    <div class="slider-wrap">
                      <div class="slide"><img src="images/postermockup.jpg" loading="lazy" sizes="(max-width: 479px) 19vw, 10vw" srcset="images/postermockup-p-500.jpg 500w, images/postermockup-p-800.jpg 800w, images/postermockup-p-1080.jpg 1080w, images/postermockup.jpg 1125w" alt="Campaign Concept for EQ Bank" class="photography"></div>
                      <div class="slide"><img src="images/NAC-entry-02-05.jpg" loading="lazy" width="Auto" height="Auto" alt="Campaign Concept for EQ Bank" srcset="images/NAC-entry-02-05-p-500.jpg 500w, images/NAC-entry-02-05-p-800.jpg 800w, images/NAC-entry-02-05-p-1080.jpg 1080w, images/NAC-entry-02-05.jpg 1433w" sizes="(max-width: 479px) 19vw, 10vw" class="photography contain"></div>
                      <div class="slide"><img src="images/NAC-entry-02-02.jpg" loading="lazy" sizes="(max-width: 479px) 19vw, 10vw" srcset="images/NAC-entry-02-02-p-500.jpg 500w, images/NAC-entry-02-02-p-800.jpg 800w, images/NAC-entry-02-02-p-1080.jpg 1080w, images/NAC-entry-02-02.jpg 1433w" alt="Campaign Concept for EQ Bank" class="photography contain"></div>
                      <div class="slide"><img src="images/NAC-entry-02-08.jpg" loading="lazy" sizes="(max-width: 479px) 19vw, 10vw" srcset="images/NAC-entry-02-08-p-500.jpg 500w, images/NAC-entry-02-08-p-800.jpg 800w, images/NAC-entry-02-08-p-1080.jpg 1080w, images/NAC-entry-02-08.jpg 1441w" alt="Campaign Concept for EQ Bank" class="photography contain"></div>
                      <div class="slide"><img src="images/NAC-entry-02-06.jpg" loading="lazy" sizes="(max-width: 479px) 19vw, 10vw" srcset="images/NAC-entry-02-06-p-500.jpg 500w, images/NAC-entry-02-06-p-800.jpg 800w, images/NAC-entry-02-06-p-1080.jpg 1080w, images/NAC-entry-02-06.jpg 1433w" alt="Campaign Concept for EQ Bank" class="photography contain"></div>
                    </div>
                    <div class="slide-control w-clearfix">
                      <div class="slide-nav-left">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">west</span></a>
                      </div>
                      <div class="slide-nav-right">
                        <a href="#" class="slide-arrow"><span class="material-symbols-sharp">east</span></a>
                      </div>
                      <div class="slide-nav-counter w-clearfix">
                        <div class="slide-counter"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/eq-bank.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2018</div>
                  <h2 class="post-title">Take Matters Into Your Own Hands</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-_9f8644b3-205c-446d-7ea1-50bbaa38f5a3-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="book-container">
                      <div class="book-flipper">
                        <div class="spine cover">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge.jpg" loading="eager" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3acb-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 01 Cover" srcset="images/Tokyo-Smoke-Knowledge-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge2.jpg" loading="eager" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3acd-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" alt="How to make a website: Page 02" srcset="images/Tokyo-Smoke-Knowledge2-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge2-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge2.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _2">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge3.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ad0-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 03" srcset="images/Tokyo-Smoke-Knowledge3-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge3-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge3.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge4.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ad2-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 04" srcset="images/Tokyo-Smoke-Knowledge4-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge4-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge4.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _3">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge5.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ad5-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 05" srcset="images/Tokyo-Smoke-Knowledge5-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge5-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge5.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge6.jpg" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/Tokyo-Smoke-Knowledge6-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge6-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge6.jpg 1159w" loading="lazy" alt="How to make a website: Page 06" class="left-side-contain"></div>
                        </div>
                        <div class="spine _4">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge7.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ada-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 07" srcset="images/Tokyo-Smoke-Knowledge7-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge7-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge7.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge8.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3adc-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 08" srcset="images/Tokyo-Smoke-Knowledge8-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge8-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge8.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _5">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge9.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3adf-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 09" srcset="images/Tokyo-Smoke-Knowledge9-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge9-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge9-p-1080.jpg 1080w, images/Tokyo-Smoke-Knowledge9.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge10.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ae1-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 10" srcset="images/Tokyo-Smoke-Knowledge10-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge10-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge10.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _6">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge11.jpg" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" srcset="images/Tokyo-Smoke-Knowledge11-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge11-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge11.jpg 1159w" loading="lazy" alt="How to make a website: Page 11" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge12.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ae6-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/Tokyo-Smoke-Knowledge12-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge12-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge12.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _7">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge13.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3ae9-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/Tokyo-Smoke-Knowledge13-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge13-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge13.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge14.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3aeb-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/Tokyo-Smoke-Knowledge14-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge14-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge14.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _8">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge15.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3aee-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/Tokyo-Smoke-Knowledge15-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge15-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge15.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge16.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3af0-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/Tokyo-Smoke-Knowledge16-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge16-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge16.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div class="spine _9">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge17.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3af3-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/Tokyo-Smoke-Knowledge17-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge17-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge17.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge18.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3af5-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/Tokyo-Smoke-Knowledge18-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge18-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge18.jpg 1159w" class="left-side-contain"></div>
                        </div>
                        <div data-w-id="562e85c8-e376-4365-81e2-79704f9e3af6" class="spine _10">
                          <div class="right-side-front"><img src="images/Tokyo-Smoke-Knowledge19.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3af8-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 11" srcset="images/Tokyo-Smoke-Knowledge19-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge19-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge19.jpg 1159w" class="right-image-contain"></div>
                          <div class="left-side-back"><img src="images/Tokyo-Smoke-Knowledge.jpg" id="w-node-_562e85c8-e376-4365-81e2-79704f9e3afa-4f9e3ac7" sizes="(max-width: 479px) 43vw, (max-width: 767px) 21vw, (max-width: 991px) 22vw, 24vw" loading="lazy" alt="How to make a website: Page 12" srcset="images/Tokyo-Smoke-Knowledge-p-500.jpg 500w, images/Tokyo-Smoke-Knowledge-p-800.jpg 800w, images/Tokyo-Smoke-Knowledge.jpg 1159w" class="left-side-contain"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/tokyo-smoke.html" class="post-text w-inline-block w-clearfix">
                  <div class="post-number">2018</div>
                  <h2 class="post-title">Tokyo Smoke</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
              <div id="w-node-c28cb00c-0745-aea5-a9de-e257d466d717-35d5241b" class="post-block">
                <div class="post-image">
                  <div class="post-padding">
                    <div class="browser-window-container">
                      <div class="browser-full">
                        <div class="browser-controlbar">
                          <div class="browser-icon">
                            <a id="desktop-btn" href="#" class="desktop-btn"><span class="material-symbols-sharp">laptop_windows</span></a>
                          </div>
                          <div class="browser-icon">
                            <a id="mobile-btn" href="#" class="mobile-btn"><span class="material-symbols-sharp">smartphone</span></a>
                          </div>
                        </div>
                        <div class="browser-container">
                          <div class="browser-window">
                            <div class="browser-bar">
                              <div class="text-block">casinoartspace.com</div>
                            </div>
                            <div class="browser-iframe w-embed w-iframe"><iframe class="iframe-settings" src="https://casino-artspace.webflow.io/" title="description"></iframe>
                              <style>.iframe-settings { width:1366px; height:768px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}</style>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="work/casino-artspace.html" class="post-text w-inline-block">
                  <div class="post-number">2017</div>
                  <h2 class="post-title">Casino Artspace</h2>
                  <div class="post-link-icon"><span class="material-symbols-sharp">open_in_new</span></div>
                </a>
              </div>
            </div>
            <a id="loadMore" href="#" class="button w-node-c408817d-14e7-497e-68a9-ee5924738521-35d5241b w-button">Load More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63bdafcb49cc7a0699235f9f" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/strikedesignstudio.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
  <script>
// Check Page Settings
if (Cookies.get("mode") == "lightmode") {
  $('.king-controller').addClass('lightmode');
  $('.material-symbols-outlined').addClass('lightmode');
  $('a').addClass('lightmode');
  $('.color-toggle-on').addClass('lightmode');
  $('.color-toggle-off').addClass('lightmode');
  $('.menu-bg-colour').addClass('lightmode');
  $('.grid-row').addClass('lightmode');
  $('.grid-row.fill').addClass('lightmode');
  $('.slide-nav-dot').addClass('invert');
  $('.inverter').addClass('invert');
}
if (Cookies.get("mode") == "darkmode") {
  $('.king-controller').removeClass('lightmode');
  $('.material-symbols-outlined').removeClass('lightmode');
  $('a').removeClass('lightmode');
  $('.color-toggle-on').removeClass('lightmode');
  $('.color-toggle-off').removeClass('lightmode');
  $('.menu-bg-colour').removeClass('lightmode');
  $('.grid-row').removeClass('lightmode');
  $('.grid-row.fill').removeClass('lightmode');
  $('.slide-nav-dot').removeClass('invert');
  $('.inverter').removeClass('invert');
}
if (Cookies.get("menudropindex") == "dropopenindex") {
  $('.drop-down.index').addClass('dropopenindex');
}
if (Cookies.get("menudropindex") == "dropcloseindex") {
  $('.drop-down.index').removeClass('dropopenindex');
}
if (Cookies.get("menu") == "menuopen") {
  $('.logohidden').addClass('menuopen');
  $('.toggle-arrow-out').addClass('menuopen');
  $('.toggle-arrow-in').addClass('menuopen');
  $('.menu').addClass('menuopen');
}
if (Cookies.get("menu") == "menuclose") {
  $('.logohidden').removeClass('menuopen');
  $('.toggle-arrow-out').removeClass('menuopen');
  $('.toggle-arrow-in').removeClass('menuopen');
  $('.menu').removeClass('menuopen');
}
  if (Cookies.get("sidebar") == "sidebaropen") {
  $('.more-info-open').addClass('sidebaropen');
  $('.more-info-close').addClass('sidebaropen');
  $('.sidebar').addClass('sidebaropen');
  $('.full-screen-toggle').addClass('open');
}
if (Cookies.get("sidebar") == "sidebarclose") {
$('.more-info-open').removeClass('sidebaropen');
  $('.more-info-close').removeClass('sidebaropen');
  $('.sidebar').removeClass('sidebaropen');
  $('.full-screen-toggle').removeClass('open');
}
  if (Cookies.get("grid") == "gridone") {
  $('.post-archive').addClass('one');
  $('.grid-row.one').addClass('fill');
  $('.grid-row.two').removeClass('fill');
  $('.grid-row.three').removeClass('fill');
  $('.post-archive').removeClass('two');
  $('.post-archive').removeClass('three');
  $('.post-image').addClass('fullscreen');
}
if (Cookies.get("grid") == "gridtwo") {
$('.grid-row.one').addClass('fill');
  $('.grid-row.two').addClass('fill');
  $('.grid-row.three').removeClass('fill');
  $('.post-archive').addClass('two');
  $('.post-archive').removeClass('one');
  $('.post-archive').removeClass('three');
  $('.post-image').removeClass('fullscreen');
}
  if (Cookies.get("grid") == "gridthree") {
$('.grid-row.one').addClass('fill');
  $('.grid-row.two').addClass('fill');
  $('.grid-row.three').addClass('fill');
  $('.post-archive').addClass('three');
  $('.post-archive').removeClass('two');
  $('.post-archive').removeClass('one');
  $('.post-image').removeClass('fullscreen');
}
//Menu Drop Index Open Settings
$('.drop-label .index').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("dropopenindex", currentView, { expires: 30 });
  $('.drop-down .index').addClass('dropopenindex');
});
$('.drop-label .index').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("dropcloseindex", currentView, { expires: 30 });
  $('.drop-down .index').removeClass('dropopenindex');
});
//Lightmode Settings
$('.color-toggle-on').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("mode", currentView, { expires: 30 });
  $('.king-controller').addClass('lightmode');
  $('.material-symbols-outlined').addClass('lightmode');
  $('a').addClass('lightmode');
  $('.color-toggle-on').addClass('lightmode');
  $('.color-toggle-off').addClass('lightmode');
  $('.menu-bg-colour').addClass('lightmode');
  $('.grid-row').addClass('lightmode');
  $('.grid-row.fill').addClass('lightmode');
  $('.slide-nav-dot').addClass('invert');
  $('.inverter').addClass('invert');
});
//Darkmode Settings
$('.color-toggle-off').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("mode", currentView, { expires: 30 });
  $('.king-controller').removeClass('lightmode');
  $('.material-symbols-outlined').removeClass('lightmode');
  $('a').removeClass('lightmode');
  $('.color-toggle-on').removeClass('lightmode');
  $('.color-toggle-off').removeClass('lightmode');
  $('.menu-bg-colour').removeClass('lightmode');
  $('.grid-row').removeClass('lightmode');
  $('.grid-row.fill').removeClass('lightmode');
  $('.slide-nav-dot').removeClass('invert');
  $('.inverter').removeClass('invert');
});
//Menu Open Settings
$('.toggle-arrow-out').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("menu", currentView, { expires: 30 });
  $('.logohidden').addClass('menuopen');
  $('.toggle-arrow-out').addClass('menuopen');
  $('.toggle-arrow-in').addClass('menuopen');
  $('.menu').animate({width:'300px'},1000);
  $('.menu').addClass('menuopen');
});
$('.toggle-arrow-in').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("menu", currentView, { expires: 30 });
  $('.logohidden').removeClass('menuopen');
  $('.toggle-arrow-out').removeClass('menuopen');
  $('.toggle-arrow-in').removeClass('menuopen');
  $('.menu').animate({width:'0px'},1000);
  $('.menu').removeClass('menuopen');
});
  //Sidebar Open Settings
$('.more-info-open').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("sidebar", currentView, { expires: 30 });
  $('.more-info-open').addClass('sidebaropen');
  $('.more-info-close').addClass('sidebaropen');
  $('.sidebar').animate({width:'33.33vw'},1000);
  $('.sidebar').addClass('sidebaropen');
  $('.full-screen-toggle').addClass('open');
});
$('.more-info-close').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("sidebar", currentView, { expires: 30 });
  $('.more-info-open').removeClass('sidebaropen');
  $('.more-info-close').removeClass('sidebaropen');
  $('.sidebar').animate({width:'0px'},1000);
  $('.sidebar').removeClass('sidebaropen');
  $('.full-screen-toggle').removeClass('open');
});
//Grid Settings
$('.grid-row.one').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("grid", currentView, { expires: 30 });
  $('.post-archive').addClass('one');
  $('.grid-row.one').addClass('fill');
  $('.grid-row.two').removeClass('fill');
  $('.grid-row.three').removeClass('fill');
  $('.post-archive').removeClass('two');
  $('.post-archive').removeClass('three');
  $('.post-image').addClass('fullscreen');
});
$('.grid-row.two').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("grid", currentView, { expires: 30 });
  $('.grid-row.one').addClass('fill');
  $('.grid-row.two').addClass('fill');
  $('.grid-row.three').removeClass('fill');
  $('.post-archive').addClass('two');
  $('.post-archive').removeClass('one');
  $('.post-archive').removeClass('three');
  $('.post-image').removeClass('fullscreen');
});
  $('.grid-row.three').on('click', function() {
let currentView = $(this).attr('data-view');
  Cookies.set("grid", currentView, { expires: 30 });
  $('.grid-row.one').addClass('fill');
  $('.grid-row.two').addClass('fill');
  $('.grid-row.three').addClass('fill');
  $('.post-archive').addClass('three');
  $('.post-archive').removeClass('two');
  $('.post-archive').removeClass('one');
  $('.post-image').removeClass('fullscreen');
});
  //Full Screen
$('.full-screen-open').on('click', function() {
  Cookies.set("sidebar", "sidebarclose", { expires: 30 });
  Cookies.set("menu", "menuclose", { expires: 30 });
  $('.more-info-open').removeClass('sidebaropen');
  $('.more-info-close').removeClass('sidebaropen');
  $('.sidebar').animate({width:'0px'},1000);
  $('.sidebar').removeClass('sidebaropen');
  $('.logohidden').removeClass('menuopen');
  $('.toggle-arrow-out').removeClass('menuopen');
  $('.toggle-arrow-in').removeClass('menuopen');
  $('.menu').animate({width:'0px'},1000);
  $('.menu').removeClass('menuopen');
  $('.full-screen-toggle').removeClass('open');
});
</script>
  <script>
$(function () {
    $(".post-block").slice(0, 6).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".post-block:hidden").slice(0, 6).slideDown();
        if ($(".post-block:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
</script>
  <script>
$('.spine').on('click', function(e) {
      $( this ).toggleClass("indexzero"); 
      e.preventDefault();
    });
</script>
  <script defer="">
function setupBrowserScript() {
  $(document).ready(function() {
    var browserContainers = document.querySelectorAll(".browser-container");
    var browserIframes = document.querySelectorAll(".browser-iframe");
    var iframeTargets = document.querySelectorAll(".iframe-settings");
    var browserWindows = document.querySelectorAll(".browser-window");
    var aspectRatios = [];
    // Set the aspect ratios for each iframe
    iframeTargets.forEach(function(iframeTarget, i) {
      aspectRatios[i] = iframeTarget.offsetWidth / iframeTarget.offsetHeight;
    });
    function updateIframeScale(index) {
      var parentWidth = browserContainers[index].offsetWidth;
      var targetWidth = iframeTargets[index].offsetWidth;
      var scaleFactor = parentWidth / targetWidth;
      browserIframes[index].style.transform = "scale(" + scaleFactor + ")";
    }
    function updateMaxWidth(index) {
      var height = browserContainers[index].offsetHeight;
      var maxWidth = height * aspectRatios[index];
      browserContainers[index].style.maxWidth = maxWidth + "px";
    }
    function updateHeight(index) {
      var width = browserWindows[index].offsetWidth;
      var height = width / aspectRatios[index];
      browserWindows[index].style.height = height + "px";
    }
    setInterval(function() {
      browserContainers.forEach(function(browserContainer, i) {
        updateIframeScale(i);
        updateMaxWidth(i);
        updateHeight(i);
      });
    }, 100);
    var mobileButtons = document.querySelectorAll(".mobile-btn");
    mobileButtons.forEach(function(mobileButton) {
      mobileButton.addEventListener("click", function() {
        var parentDiv = this.closest(".browser-full");
        if (!parentDiv) return;
        var browserContainer = parentDiv.querySelector(".browser-container");
        var iframeTarget = parentDiv.querySelector(".iframe-settings");
        var index = [].indexOf.call(browserContainers, browserContainer);
        browserContainer.style.maxHeight = "660px";
        browserContainer.style.maxWidth = "400px";
        iframeTarget.style.width = "400px";
        iframeTarget.style.height = "660px";
        aspectRatios[index] = 400 / 660;
      });
    });
    var desktopButtons = document.querySelectorAll(".desktop-btn");
    desktopButtons.forEach(function(desktopButton) {
      desktopButton.addEventListener("click", function() {
        var parentDiv = this.closest(".browser-full");
        if (!parentDiv) return;
        var browserContainer = parentDiv.querySelector(".browser-container");
        var iframeTarget = parentDiv.querySelector(".iframe-settings");
        var index = [].indexOf.call(browserContainers, browserContainer);
        browserContainer.style.maxHeight = "788px";
        browserContainer.style.maxWidth = "1366px";
        iframeTarget.style.width = "1366px";
        iframeTarget.style.height = "788px";
        aspectRatios[index] = 1366 / 788;
      });
    });
  });
}
$(function () {
  $(".post-block").slice(0, 6).show();
  $("#loadMore").on('click', function (e) {
    e.preventDefault();
    $(".post-block:hidden").slice(0, 6).slideDown(function() {
      // Call the setupBrowserScript function again when new content is loaded
      setupBrowserScript();
    });
    if ($(".post-block:hidden").length == 0) {
      $("#loadMore").fadeOut('slow');
    }
    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 1500);
  });
  // Initial setup of the script
  setupBrowserScript();
});
</script>
  <script>
$(document).ready(function() {
  // Loop through each slider on the page
  $('.slider').each(function() {
    // Get the number of slide elements within the current slider
    var $slider = $(this);
    var slideCount = $slider.find('.slider-wrap .slide').length;
    // Store the slide count in a variable
    var numberOfSlides = slideCount;
    // Check if the slider has the class 'sliderbook'
    var isSliderBook = $slider.hasClass('sliderbook');
    // Set the width of the slider-wrap div based on the slider class
    var slideWidthMultiplier = isSliderBook ? 50 : 100;
    $slider.find('.slider-wrap').css('width', numberOfSlides * slideWidthMultiplier + '%');
    // Initialize slide index to 0
    var slideIndex = 0;
    // Add click event to the slide-nav-right div
    $slider.find('.slide-nav-right').click(function() {
      // Move the slide elements to the left by 100% increments
      if (slideIndex < numberOfSlides - 1) {
        $slider.find('.slider-wrap .slide').css('transform', 'translateX(-' + (slideIndex + 1) * 100 + '%)');
        slideIndex++;
      } else {
        // Start the slide again with a transform translatex 0%
        $slider.find('.slider-wrap .slide').css('transform', 'translateX(0)');
        slideIndex = 0;
      }
      // Set active class on the corresponding dot
      setActiveDot(slideIndex);
    });
    // Add click event to the slide-nav-left div
    $slider.find('.slide-nav-left').click(function() {
      // Move the slide elements to the right by 100% increments
      if (slideIndex > 0) {
        slideIndex--;
        $slider.find('.slider-wrap .slide').css('transform', 'translateX(-' + slideIndex * 100 + '%)');
      } else {
        // Move the slide elements to the last slide
        slideIndex = numberOfSlides - 1;
        $slider.find('.slider-wrap .slide').css('transform', 'translateX(-' + slideIndex * 100 + '%)');
      }
      // Set active class on the corresponding dot
      setActiveDot(slideIndex);
    });
    // Add dots for each slide
    for (var i = 0; i < numberOfSlides; i++) {
      $slider.find('.slide-counter').append('<div class="slide-nav-dot"></div>');
    }
    // Add click event to the slide-nav-dots elements
    $slider.find('.slide-nav-dot').click(function() {
      // Get the index of the clicked dot
      var dotIndex = $(this).index();
      // Set the slide index to the dot index
      slideIndex = dotIndex;
      // Move the slide elements to the corresponding slide
      $slider.find('.slider-wrap .slide').css('transform', 'translateX(-' + slideIndex * 100 + '%)');
      // Set active class on the clicked dot
      setActiveDot(slideIndex);
    });
    // Set the active class on the first dot
    setActiveDot(slideIndex);
    // Helper function to set the active class on the corresponding dot
    function setActiveDot(index) {
      $slider.find('.slide-nav-dot').removeClass('active');
      $slider.find('.slide-nav-dot').eq(index).addClass('active');
    }
    // Print the slide count to the console
    console.log(numberOfSlides);
  });
});
</script>
  <script>
// Select all the .slide elements on the page
const slides = document.querySelectorAll('.slider .slide');
// Loop through each slide element
slides.forEach(slide => {
  // Select all the img elements within this slide element
  const images = slide.querySelectorAll('img');
  // Loop through each img element and remove the sizes attribute
  images.forEach(img => {
    img.removeAttribute('sizes');
  });
});
</script>
</body>
</html>