Pinacoteca di Brera

<!DOCTYPE html> <html lang="en" debug="true"> <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>Pinacoteca di Brera</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/main.css">   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>  </head> <body> <div id="viewport">  </div> <div id="viewport3D"> </div> <div id="viewportMobile"> </div> <div id="fromYearContainer"> </div> <div id="departContainer"> </div> <div id="mapContainer"> </div> <div id="lavoroContainer"> <svg version="1.1" id="lavoroFlower" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="534.333px" viewBox="0 0 320 534.333" enable-background="new 0 0 320 534.333" xml:space="preserve">  <path fill="#938B8B" d="M162.445,198.309c0,30.253,0.47,60.784-2.194,90.76c-2.82,31.225-10.107,59.813-19.038,86.874 c-16.061,48.711-41.681,97.282-39.879,157.511c0.078,1.388,1.567,0.971,1.567-0.139c-1.88-60.507,24.209-109.772,40.349-158.76 c8.618-26.09,15.356-53.707,18.333-83.544c3.056-30.531,2.429-61.894,2.429-92.842C163.933,196.644,162.445,197.06,162.445,198.309z " /> <g id="pinaLeaf"> <path fill="#A4947D" d="M225.048,110.89l-0.402-7.609c-3.025-22.817-18.7-33.954-31.819-34.476 c-2.171-0.059-4.168-0.127-6.071-0.026c-15.044,0.794-21.965,7.662-29.659,17.953l5.829,110.413 C209.47,160.7,224.561,132.851,225.048,110.89z" /> <path fill="#CEC3B7" d="M92.069,117.91l-0.402-7.609c0.606-23.008,15.021-35.734,28.013-37.634 c2.152-0.287,4.132-0.565,6.034-0.665c15.044-0.794,22.65,5.307,31.384,14.73l5.829,110.413 C112.805,165.803,94.867,139.698,92.069,117.91z" /> </g> <g id="mediaLeaf"> <path fill="#A4947D" d="M211.273,291.83l6.952,3.119c21.678,7.733,38.747-1.121,45.205-12.553c1.044-1.904,2.017-3.65,2.797-5.388 c6.167-13.745,3.219-23.039-2.419-34.584l-100.878-45.26C174.083,255.215,191.961,281.362,211.273,291.83z" /> <path fill="#DAD3C9" d="M265.784,170.333l6.952,3.119c20.19,11.051,24.924,29.688,20.678,42.112 c-0.728,2.046-1.385,3.934-2.165,5.672c-6.167,13.745-15.069,17.723-27.442,21.187l-100.878-45.26 C213.708,166.898,245.125,162.867,265.784,170.333z" /> </g> <g id="biblioLeaf"> <path fill="#DAD3C9" d="M58.354,178.211l-6.695,3.637c-19.293,12.551-22.6,31.493-17.424,43.56c0.881,1.985,1.68,3.817,2.589,5.491 c7.192,13.238,16.37,16.528,28.97,19.044l97.154-52.783C110.02,170.834,78.388,169.199,58.354,178.211z" /> <path fill="#A4947D" d="M121.926,295.222l-6.695,3.637c-21.029,9.356-38.72,1.822-46.027-9.087 c-1.186-1.819-2.288-3.486-3.198-5.16c-7.192-13.238-4.958-22.729-0.212-34.668l97.154-52.783 C156.231,255.891,140.389,283.319,121.926,295.222z" /> </g> <text id="pinaTx" class="leafTx" transform="matrix(1 0 0 1 126.2973 130.9361)" fill="#FFFFFF" font-family="'Raleway'" font-size="12">PINACOTECA</text> <text id="mediaTx" class="leafTx" transform="matrix(1 0 0 1 207.2973 204.7557)" fill="#A4947D" font-family="'Raleway'" font-size="12">MEDIATECA</text> <text id="biblTx" class="leafTx" transform="matrix(1 0 0 1 69.2973 264.1667)" fill="#FFFFFF" font-family="'Raleway'" font-size="12">BIBLIOTECA</text> </svg> </div> <div id="ascoltoContainer"> <div class="ascoltoPicLeft"></div> <div class="ascoltoPicRight"></div> <div class="centContainer"> <img src="media/img/svg/mybrera_logo.svg" alt="" class="centerLogo"> <h1>L'ASCOLTO VISIBILE</h1> <p>La chiave della valorizzazione passa attraverso il riconoscimento <br> e il rispetto per il valore e le diverse competenze <br> di tutti coloro che lavorano nelle tre teche.</p> <p>myBrera rende visibile il ruolo di tutta la squadra <br> attraverso i ritratti scattati da James O'Mara e i racconti di ognuno di loro.</p> <p><span><strong>James M. Bradburne</strong></span> <br> <span style="font-size: x-small;">Direttore Generale Pinacoteca di Brera e Biblioteca Nazionale Braidense</span></p> </div> </div> <div id="creditsContainer"> <img src="media/img/svg/credits_root.svg" id="creditsRoot" alt=""> <div id="creCentContainer"> <img src="media/img/svg/mybrera_logo.svg" alt="" class="centerLogo"> <h1>CREDITS</h1> <p> Photographs<br> Audiovisual production and post production<br> <strong>James O'Mara<br> Kate McBride</strong></p> <br> <p> Art Direction and Design <br> User Experience<br> Data visualization<br> Web development<br> <strong><a href="https://www.vivaonweb.com/" target="_blank">VIVA! srl</a><br> Valentina Pagani Donadelli<br> Vadym Popov<br> Andrea Vitale<br> Barbara Vitale </strong></p><br> </div> </div> <header> <div id="logo"> <img src="media/img/svg/mybrera_logo.svg" alt="myBrera logo"> </div> <div id="ascolto-link-mobile">l'ascolto visibile</div> <nav id="navigation"> <ul> <li class="nav-item" id="nav1">lavoro a brera e</li> <li class="nav-item" id="nav2">mi occupo di<span class="nav-line">     </span> </li> <li class="nav-item" id="nav3">dall'anno<span class="nav-line">   </span> .</li> <li class="nav-item" id="nav4">vengo da<span class="nav-line">     </span> e</li> <li class="nav-item" id="nav5">amo questo capolavoro!</li> </ul> </nav> <div id="navBurger"> <img src="media/img/svg/mnav.svg" alt=""> </div> </header> <div id="mobilenav"> <div id="closeMobileNav" class="closeCross"> <img src="media/img/svg/cross.svg" alt=""> </div> <ul> <li class="nav-item" id="mnav1">lavoro a brera <br>e</li> <li class="nav-item" id="mnav2">mi occupo di</li> <li class="nav-item" id="mnav3">dall'anno <span class="nav-line">        </span> .</li> <li class="nav-item" id="mnav4">vengo da <span class="nav-line">            </span> <br>e</li> <li class="nav-item" id="mnav5">amo questo capolavoro!</li> </ul> <div class="social-buttons"> <a href="https://www.facebook.com/PinacotecadiBrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/002-facebook-letter-logo.svg"/></a> <a href="https://twitter.com/museobrera" target="_blank"><img class="socimg" src="media/img/svg/sm/003-twitter-letter-logo.svg"/></a> <a href="https://www.instagram.com/pinacotecabrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/001-pinterest.svg"/></a> </div> <div id="mcredits-link">credits</div> <a href="//www.iubenda.com/privacy-policy/8230783" class="iubenda-white no-brand iubenda-embed cookieprivacy" title="Privacy Policy">privacy e cookie policy</a> </div> <aside id="right-side"> <div class="right-side-line right-top-line"></div> <div class="social-buttons"> <a href="https://www.facebook.com/PinacotecadiBrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/002-facebook-letter-logo.svg"/></a> <a href="https://twitter.com/museobrera" target="_blank"><img class="socimg" src="media/img/svg/sm/003-twitter-letter-logo.svg"/></a> <a href="https://www.instagram.com/pinacotecabrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/001-pinterest.svg"/></a> </div> <div class="right-side-line" id="rln1"></div> <div id="museum-url"> <div class="mus-url" id="biblioteca-nav"><strong>biblioteca</strong></div>  <div class="mus-url" id="pinacoteca-nav"><strong>pinacoteca</strong></div>  <div class="mus-url" id="mediateca-nav"><strong>mediateca</strong></div> </div> <div class="right-side-url" id="credits-link">credits</div> </aside> <aside id="left-side"> <div id="lln1" class="left-side-line"></div> <div class="left-side-url" id="colto-link">l'ascolto visibile</div> <div id="lln2" class="left-side-line"></div> <div class="left-side-url" id="pina-link"><a href="http://www.pinacotecabrera.org/">pinacotecabrera.org</a></div> </aside> <div id="mobilePortaits"> <div id="mobilePortHeader">header</div> <div id="closeMp" class="closeCross"> <img src="media/img/svg/cross.svg" alt=""> </div> <div id="mobilePortContainer"> </div> </div> <div id="artworkCardContainer" class="cardContainer"> <div id="artworkBigPicture" class="bigPicture"> <div id="artworkBigPictureInner" class="bigPictureInner"> </div> </div> <div id="artworkCardDescription" class="cardDescription"> <div id="closeartworkCard" class="closeCross"> <img src="media/img/svg/cross.svg" alt=""> </div> <div id="artworkMainPicture" class="mainPicture"> </div> <div id="artworkCardSubHeader" class="cardSubHeader"> </div> <div id="artworkCardHeader" class="cardHeader"> </div> <div id="artworkCardText" class="cardText"> </div> <div id="artworkIconBlock" class="iconBlock"> </div> <aside id="right-side-ce"> <div class="right-side-line right-top-line"></div> <div class="social-buttons" id=""> <a href="https://www.facebook.com/PinacotecadiBrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/002-facebook-letter-logo.svg"/></a> <a href="https://twitter.com/museobrera" target="_blank"><img class="socimg" src="media/img/svg/sm/003-twitter-letter-logo.svg"/></a> <a href="https://www.instagram.com/pinacotecabrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/001-pinterest.svg"/></a> </div> <div class="right-side-line"></div> <div id="scheda-opera-url"> <a id="scheda-opera-text" href="" target="_blank">SCHEDA OPERA</a> </div> </aside> </div> </div> <div id="personCardContainer" class="cardContainer"> <div id="personBigPicture" class="bigPicture"> <div id="personBigPictureInner" class="bigPictureInner"> </div> </div> <div id="personCardDescription" class="cardDescription"> <div id="closePersonCard" class="closeCross"> <img src="media/img/svg/cross.svg" alt=""> </div> <div id="personMainPicture" class="mainPicture"> </div> <div id="personCardSubHeader" class="cardSubHeader"> </div> <div id="personCardHeader" class="cardHeader"> </div> <div class="qm-open"> <img src="media/img/svg/qm_open.svg" alt=""> </div> <div id="personCardText" class="cardText"> </div> <div class="qm-close"> <img src="media/img/svg/qm_close.svg" alt=""> </div> <div id="personIconBlock" class="iconBlock"> <div class="perIcon" id="deptIcon"> <div class="mobLine"></div> <img src="media/img/svg/dept_name.svg" alt=""> <div id="deptText">Department</div> </div> <div class="perIcon" id="yearIcon"> <div class="mobLine"></div> <img src="media/img/svg/yearsofwork.svg" alt=""> <div id="yearsOfWork">5</div> <div class="iconText">Anni a Brera</div> </div> <div class="perIcon" id="locaIcon"> <div class="mobLine"></div> <img src="media/img/svg/region_name.svg" alt=""> <div id="locaText" class="iconText">Location</div> </div> <div class="perIcon" id="likeIcon"> <div class="mobLine"></div> <img src="media/img/svg/likes.svg" alt=""> <div id="likeText" class="iconText">Artwork of chocie</div> </div> <div class="perIcon" id="mvideoIcon"> <div class="mobLine"></div> <img src="media/img/svg/video.svg" alt=""> <div id="likeText" class="iconText">GUARDA IL VIDEO</div> </div> </div> <aside id="right-side-de"> <div class="right-side-line right-top-line"></div> <div class="social-buttons" id=""> <a href="https://www.facebook.com/PinacotecadiBrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/002-facebook-letter-logo.svg"/></a> <a href="https://twitter.com/museobrera" target="_blank"><img class="socimg" src="media/img/svg/sm/003-twitter-letter-logo.svg"/></a> <a href="https://www.instagram.com/pinacotecabrera/" target="_blank"><img class="socimg" src="media/img/svg/sm/001-pinterest.svg"/></a> </div> <div class="right-side-line"></div> <div id="person-video-url"> <img src="media/img/svg/video.svg" alt=""> <div id="person-video-text">GUARDA IL VIDEO</div> </div> <div id="mute-button"> <svg version="1.0" id="volumesvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="226px" height="226px" viewBox="0 0 226 226" enable-background="new 0 0 226 226" xml:space="preserve"> <path id="volume-v2" class="volumepaths" fill-rule="evenodd" clip-rule="evenodd" d="M164.18,179.82l-6.77-6.01c18.53-13.96,30.47-35.99,30.47-60.69 s-11.94-46.73-30.47-60.69l6.77-6.01c19.86,15.61,32.59,39.69,32.59,66.7C196.77,140.12,184.04,164.21,164.18,179.82z" /> <path id="volume-v1" class="volumepaths" fill-rule="evenodd" clip-rule="evenodd" d="M150.61,167.77l-6.85-6.08c15.94-10.56,26.34-28.49,26.34-48.57 s-10.4-38.01-26.34-48.58l6.85-6.08c17.22,12.29,28.38,32.26,28.38,54.66C178.99,135.51,167.83,155.49,150.61,167.77z" /> <path id="volume-v0" class="volumepaths" fill-rule="evenodd" clip-rule="evenodd" d="M136.84,155.55l-7.05-6.26c13.52-6.87,22.52-20.73,22.52-36.17 c0-15.45-9-29.3-22.52-36.17l7.05-6.26c14.7,8.78,24.36,24.66,24.36,42.43S151.54,146.77,136.84,155.55z" /> <path id="volume-dynamic" class="volumepaths" fill-rule="evenodd" clip-rule="evenodd" d="M114.84,185.14l-43.85-38.93H40.88 c-3.02,0-4.22-0.55-4.22-4.22V84.24c0-3.24,0.96-4.22,4.22-4.22h30.11l43.85-38.93l7.02,3.16v137.74L114.84,185.14z M113.42,172.6 V53.64L75.4,87.4l-2.8,1.06H45.1v49.31h27.5l2.8,1.07L113.42,172.6z" /> </svg> </div> </aside> </div> </div> <div id="video-container"> <div id="closeVideo" class="closeCross"> <img src="media/img/svg/cross.svg" alt=""> </div> <video controls="controls" autoplay src="" id="current-video"></video> </div>  <footer> <a href="//www.iubenda.com/privacy-policy/8230783" class="iubenda-white no-brand iubenda-embed" title="Privacy Policy">privacy e cookie policy</a> </footer> <div id="preloader"> <style> #preloader { background-color: white; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } #preloaderstatus { position: absolute; text-align: center; margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); } </style> <div id="preloaderstatus">loading...</div> </div> <script src="js/mybrera.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-107401895-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments) }; gtag('js', new Date()); gtag('config', 'UA-107401895-1'); </script> <script type="text/javascript"> var _iub = _iub || []; _iub.csConfiguration = { cookiePolicyId: 8230783, siteId: 919224, lang: "it" }; </script> <script type="text/javascript" src="//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js" charset="UTF-8" async></script> </body> </html>

CINXE.COM

Pinacoteca di Brera