
<!-- 

Designed by 

          ....              s                                                   ....                                .                         
    .x~X88888Hx.         :8      .uef^"                                   .x~X88888Hx.        oec :     oec :    @88>                       
   H8X 888888888h.      .88    :d88E                     .u    .         H8X 888888888h.     @88888    @88888    %8P                        
  8888:`*888888888:    :888ooo `888E            .u     .d88B :@8c       8888:`*888888888:    8"*88%    8"*88%     .          .        .u    
  88888:        `%8  -*8888888  888E .z8k    ud8888.  ="8888f8888r      88888:        `%8    8b.       8b.      .@88u   .udR88N    ud8888.  
. `88888          ?>   8888     888E~?888L :888'8888.   4888>'88"     . `88888          ?>  u888888>  u888888> ''888E` <888'888k :888'8888. 
`. ?888%           X   8888     888E  888E d888 '88%"   4888> '       `. ?888%           X   8888R     8888R     888E  9888 'Y"  d888 '88%" 
  ~*??.            >   8888     888E  888E 8888.+"      4888>           ~*??.            >   8888P     8888P     888E  9888      8888.+"    
 .x88888h.        <   .8888Lu=  888E  888E 8888L       .d888L .+       .x88888h.        <    *888>     *888>     888E  9888      8888L      
:"""8888888x..  .x    ^%888*    888E  888E '8888c. .+  ^"8888*"       :"""8888888x..  .x     4888      4888      888&  ?8888u../ '8888c. .+ 
`    `*888888888"       'Y"    m888N= 888>  "88888%       "Y"         `    `*888888888"      '888      '888      R888"  "8888P'   "88888%   
        ""***""                 `Y"   888     "YP'                            ""***""         88R       88R       ""      "P'       "YP'    
                                     J88"                                                     88>       88>                                 
                                     @%                                                       48        48                                  
                                   :"                                                         '8        '8                                  
http://otheroffice.net

Built by


      ...               ..                  ....      ..            ...                                 ...            ..      .     
   xH88"`~ .x8X      :**888H: `: .xH""    +^""888h. ~"888h      .x888888hx    :   x8h.     x8.      .zf"` `"tu      x88f` `..x88. .> 
 :8888   .f"8888Hf  X   `8888k XX888     8X.  ?8888X  8888f    d88888888888hxx  :88888> .x8888x.   x88      '8N.  :8888   xf`*8888%  
:8888>  X8L  ^""`  '8hx  48888 ?8888    '888x  8888X  8888~   8" ... `"*8888%`   `8888   `8888f    888k     d88& :8888f .888  `"`    
X8888  X888h       '8888 '8888 `8888    '88888 8888X   "88x: !  "   ` .xnxx.      8888    8888'    8888N.  @888F 88888' X8888. >"8x  
88888  !88888.      %888>'8888  8888     `8888 8888X  X88x.  X X   .H8888888%:    8888    8888     `88888 9888%  88888  ?88888< 888> 
88888   %88888        "8 '888"  8888       `*` 8888X '88888X X 'hn8888888*"   >   8888    8888       %888 "88F   88888   "88888 "8%  
88888 '> `8888>      .-` X*"    8888      ~`...8888X  "88888 X: `*88888%`     !   8888    8888        8"   "*h=~ 88888 '  `8888>     
`8888L %  ?888   !     .xhx.    8888       x8888888X.   `%8" '8h.. ``     ..x8>   8888    8888      z8Weu        `8888> %  X88!      
 `8888  `-*""   /    .H88888h.~`8888.>    '%"*8888888h.   "   `88888888888888f  -n88888x>"88888x-  ""88888i.   Z  `888X  `~""`   :   
   "888.      :"    .~  `%88!` '888*~     ~    888888888!`     '%8888888888*"     `%888"  4888!`  "   "8888888*     "88k.      .~    
     `""***~"`            `"     ""            X888^"""           ^"****""`         `"      ""          ^"**""        `""*==~~`      
                                               `88f                                                                                  
                                                88                                                                                   
                                                ""                                                                                   
http://builtbycapsule.com

-->

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Other Office | Fern</title>


  <meta property="og:url" content="https://otheroffice.net" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Other Office">
  <meta property="og:description" content="Other Office is the design practice of Simon Sweeney and Shauna Buckley. We make identities, websites, installations and printed matter.">
    <meta property="og:image" content="https://otheroffice.net/media/pages/settings/4294381347-1629428276/img_2976.jpg">
    <meta property="og:site_name" content="Other Office" />

    
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Other Office">
  <meta name="twitter:description" content="Other Office is the design practice of Simon Sweeney and Shauna Buckley. We make identities, websites, installations and printed matter.">
    <meta name="twitter:image" content="https://otheroffice.net/media/pages/settings/4294381347-1629428276/img_2976.jpg">
    <meta name="twitter:url" content="https://otheroffice.net" />

    <link rel="icon" 
        type="image/png" 
        href="https://otheroffice.net/media/pages/settings/4294381347-1629428276/img-2976-32x.jpg">
  

  <link href="https://otheroffice.net/css/main.css" rel="stylesheet">


</head>
<body class="" 
data-color="
white
"
style="
--bg: white;
">


<nav class="nav">
    <a href="/" class="nav__item nav__item--left nav__item--other">Other</a>
    <a href="/" class="nav__item nav__item--right nav__item--office">Office</a>

    <a href="https://twitter.com/otheroffice_" target="_blank" class="nav__item nav__item--left nav__item--all">Twitter</a>
    <a href="https://twitter.com/otheroffice_" target="_blank" class="nav__item nav__item--right nav__item--projects">@otheroffice_</a>

    <a href="mailto:info@otheroffice.net" class="nav__item nav__item--left nav__item--e">Contact Us</a>
    <a href="mailto:info@otheroffice.net" class="nav__item nav__item--right nav__item--mail">info@otheroffice.net</a>

    <a href="/about" class="nav__item nav__item--left nav__item--about">About</a>
    <a href="/about" class="nav__item nav__item--right nav__item--us">Us</a>

    <a href="https://www.instagram.com/other_office/" target="_blank" class="nav__item nav__item--left nav__item--insta">Instagram</a>
    <a href="https://www.instagram.com/other_office/" target="_blank" class="nav__item nav__item--right nav__item--gram">@other_office</a>

</nav>

<img class="cursor cursor--other" src="/cursor.png" alt="">

<div class="project__title">
    Fern</div>

<div class="gallery">
        <div class="slides-container">

            
                                    <div class="slide">
                        <video playsinline muted loop autoplay>
                            <source src="https://otheroffice.net/media/pages/work/fern/637759988-1629428200/fern_1.mov" type="video/mp4">
                        </video>
                    </div>
                
            
                                    <div class="slide">
                        <video playsinline muted loop autoplay>
                            <source src="https://otheroffice.net/media/pages/work/fern/1638075172-1629428209/fern_2.mov" type="video/mp4">
                        </video>
                    </div>
                
            
                                    <div class="slide">
                        <img class="" src="https://otheroffice.net/media/pages/work/fern/2225490205-1629428194/fern-1-2000x.jpg">
                    </div>
                
            
                                    <div class="slide">
                        <img class="" src="https://otheroffice.net/media/pages/work/fern/4268104317-1629428203/fern-3-2000x.jpg">
                    </div>
                
            
                                    <div class="slide">
                        <img class="" src="https://otheroffice.net/media/pages/work/fern/3271963597-1629428194/fern-2-2000x.jpg">
                    </div>
                
            
                                    <div class="slide">
                        <img class="" src="https://otheroffice.net/media/pages/work/fern/914789645-1629428203/fern-6-2000x.jpg">
                    </div>
                
            
                                    <div class="slide">
                        <img class="" src="https://otheroffice.net/media/pages/work/fern/1898377181-1629428203/fern-5-2000x.jpg">
                    </div>
                
            
                                    <div class="slide">
                        <img class="" src="https://otheroffice.net/media/pages/work/fern/1279706733-1629428203/fern-4-2000x.jpg">
                    </div>
                
            
            <div class="slide">
                <div class="text">
                    
                    
                    <div class="text__copy">   
                        <p>Titles and credits for Johnny Kelly’s incredible short film FERN commissioned by Channel 4 and produced by Nexus Studios.</p>                    </div>

                                    </div>
            </div>


        </div>

        <div class="arrows">
            <a class="prev" href="">&larr;</a>
            <a class="next" href="">&rarr;</a>
        </div>
        <div class="arrows arrows--bottom">
            <a class="prev" href="">&rarr;</a>
            <a class="next" href="">&larr;</a>
        </div>
    
        <div class="pager">
            1 / X
        </div>

    </div>


<div class="project__nav">
            <a href="https://otheroffice.net/work/ace-tate" class="project__next" href="">Next Project</a>
                <a href="https://otheroffice.net/work/raid" class="project__prev" href="">Previous Project</a>
    </div>

<div class="project__nav project__nav--bottom">
            <a href="https://otheroffice.net/work/ace-tate" class="project__prev" href="">Ace & Tate</a>
                <a href="https://otheroffice.net/work/raid" class="project__next" href="">Raid</a>
    </div>


<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>

<script src="https://otheroffice.net/js/script.js"></script><script src="https://otheroffice.net/js/sketch.js"></script>
</body>
</html>