-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 19.3 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tompkins Farm Music</title><meta name="description" content="Tompkins Farm Music LLC - an independent music publisher focused on communication and artist development."><link rel="icon" href="./img/TFM4-transparent-black-3000.svg"><style>:root{--color-dark:#151955;--color-light:#f0f3ff;--color-light-rgb:240,243,255;--color-bg1:#4f4fff;--color-bg1-rgb:50,50,255;--color-bg2:#dbe0ff;--color-bg3:#dee8fc;--nav-height:calc(var(--vh) * 8);--nav-height-neg:calc(var(--nav-height) * -1);--nav-half:calc(var(--nav-height) / 2);--nav-half-neg:calc(var(--nav-half) * -1);--vh100:calc(var(--vh) * 100);--content-height:calc(var(--vh100) - var(--nav-height));--content-height-nav-half:calc(var(--vh100) - var(--nav-half))}body{margin:0;font-family:'Arial Narrow',Helvetica,sans-serif;font-size:1.3em;color:var(--color-dark)}.noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}#content{position:absolute;top:var(--nav-half);height:var(--content-height-nav-half);overflow:auto;scroll-behavior:smooth;overflow-x:hidden;width:100vw}.buffer{margin-left:14vw;margin-right:14vw}::-moz-selection{background:var(--color-bg1);color:var(--color-light)}::selection{background:var(--color-bg1);color:var(--color-light)}a{color:var(--color-bg1)}nav a{color:var(--color-dark)}.active{color:var(--color-bg1);font-weight:bolder;text-shadow:1px 1px 2px var(--color-bg3),-1px -1px 2px var(--color-bg3),0 0 2px var(--color-bg3)}nav{position:absolute;width:100%;top:var(--nav-half-neg);height:var(--nav-height);background:#fff}nav ul{list-style:none;padding:0;padding-left:calc(var(--vh) * 8);font-size:calc(var(--vh) * 2.5);margin:0;height:var(--nav-height);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}nav a{text-decoration:none;-webkit-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}#nav-hider{display:-ms-grid;display:grid;position:absolute;z-index:2;top:var(--nav-half-neg);width:var(--nav-height);height:var(--nav-height);line-height:calc(var(--nav-height) - var(--vh));font-size:var(--nav-height);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}#nav-hider:not(:checked)::before{content:'«';-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}#nav-hider:not(:checked):not(:focus),#nav-hider:not(:checked):not(:focus)~nav{top:0}#nav-hider:not(:checked):not(:focus)~#content{top:var(--nav-height);height:var(--content-height)}#nav-hider:not(:checked):not(:focus)~#content>#jumbo{height:var(--content-height)}#nav-hider:checked{top:var(--nav-half);background:url(img/burger.svg) center/contain no-repeat;border-radius:var(--vh);opacity:0;-webkit-animation:movebutton 1s forwards;animation:movebutton 1s forwards}#nav-hider:checked~nav{-webkit-animation:hide 1s forwards;animation:hide 1s forwards}#nav-hider:checked~#content{-webkit-animation:grow 1s forwards;animation:grow 1s forwards}#nav-hider:not(:checked){-webkit-animation:movebuttonback 1s forwards;animation:movebuttonback 1s forwards}#nav-hider:not(:checked):focus~#content{-webkit-animation:shrink 1s forwards;animation:shrink 1s forwards}#nav-hider:not(:checked):focus~nav{-webkit-animation:unhide 1s forwards;animation:unhide 1s forwards}@-webkit-keyframes movebutton{100%{opacity:1;top:0}}@keyframes movebutton{100%{opacity:1;top:0}}@-webkit-keyframes hide{100%{top:var(--nav-height-neg)}}@keyframes hide{100%{top:var(--nav-height-neg)}}@-webkit-keyframes grow{100%{top:0;height:var(--vh100)}}@keyframes grow{100%{top:0;height:var(--vh100)}}@-webkit-keyframes movebuttonback{100%{top:0}}@keyframes movebuttonback{100%{top:0}}@-webkit-keyframes unhide{100%{top:0}}@keyframes unhide{100%{top:0}}@-webkit-keyframes shrink{100%{top:var(--nav-height);height:var(--content-height)}}@keyframes shrink{100%{top:var(--nav-height);height:var(--content-height)}}.page{min-height:var(--content-height);position:relative}#jumbo>div{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--content-height);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;-ms-flex-pack:distribute;justify-content:space-around}#jumbo>div>img{display:block;max-height:calc(var(--vh) * 90);max-width:84vw;margin:auto}#jumbo>img{top:0;position:fixed;height:var(--vh100);min-width:100vw;z-index:-3;opacity:.25}h1{text-align:center;padding-top:40px;font-size:2.3em}hr{background:var(--color-dark);padding:1.5px;border:none}#about .buffer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row;-ms-flex-pack:distribute;justify-content:space-around}#about .buffer>div{width:30%}#about .buffer>img{width:60%;border-radius:10px}#roster{background:-o-linear-gradient(var(--color-light),var(--color-bg2),var(--color-bg3),var(--color-bg2),var(--color-light));background:-webkit-gradient(linear,left top,left bottom,from(var(--color-light)),color-stop(var(--color-bg2)),color-stop(var(--color-bg3)),color-stop(var(--color-bg2)),to(var(--color-light)));background:linear-gradient(var(--color-light),var(--color-bg2),var(--color-bg3),var(--color-bg2),var(--color-light))}#rostercontainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.rosterbox{position:relative;height:250px;width:350px;border-radius:10px;margin:10px;background-size:cover!important}.rostertext{position:absolute;bottom:5%;width:100%;text-align:center;color:var(--color-bg1);text-shadow:-2px -1px 3px var(--color-bg2),2px 1px 3px var(--color-light);font-size:1.3em;font-weight:700}.overlay{opacity:0;position:absolute;height:100%;width:100%;background:var(--color-bg1);border-radius:10px;z-index:1}.overlay:hover{cursor:pointer;opacity:.3}#contact{background:-o-linear-gradient(rgba(var(--color-light-rgb),0),rgba(var(--color-light-rgb),1),var(--color-bg3),var(--color-light));background:-webkit-gradient(linear,left top,left bottom,from(rgba(var(--color-light-rgb),0)),color-stop(rgba(var(--color-light-rgb),1)),color-stop(var(--color-bg3)),to(var(--color-light)));background:linear-gradient(rgba(var(--color-light-rgb),0),rgba(var(--color-light-rgb),1),var(--color-bg3),var(--color-light))}#contactcontainer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#contactlinks{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;text-align:center;gap:30px}#socials{display:-ms-grid;display:grid;grid-template-areas:'one two' 'three four';gap:20px}#socials img{width:90px}#contactlogo img{height:400px}#formsection{text-align:center}#formsection input,textarea{background:var(--color-light);color:var(--color-dark);border:rgba(var(--color-bg1-rgb),.4) groove;border-radius:5px}::-webkit-input-placeholder{color:rgba(var(--color-bg1-rgb),.4)}::-moz-placeholder{color:rgba(var(--color-bg1-rgb),.4)}:-ms-input-placeholder{color:rgba(var(--color-bg1-rgb),.4)}::-ms-input-placeholder{color:rgba(var(--color-bg1-rgb),.4)}::placeholder{color:rgba(var(--color-bg1-rgb),.4)}#formsection input:focus,textarea:focus{outline:0}#formsection button{background:var(--color-bg1);color:var(--color-light);border:var(--color-bg1) outset;border-radius:10px;cursor:pointer}#formsection button,#formsection input,form,textarea{font-size:22px}#footer{padding:calc(var(--vh) * 4);background:-o-linear-gradient(var(--color-light),rgba(var(--color-light-rgb),.4),rgba(var(--color-light-rgb),.2),rgba(var(--color-light-rgb),.1),rgba(var(--color-light-rgb),.05),rgba(var(--color-light-rgb),0));background:-webkit-gradient(linear,left top,left bottom,from(var(--color-light)),color-stop(rgba(var(--color-light-rgb),.4)),color-stop(rgba(var(--color-light-rgb),.2)),color-stop(rgba(var(--color-light-rgb),.1)),color-stop(rgba(var(--color-light-rgb),.05)),to(rgba(var(--color-light-rgb),0)));background:linear-gradient(var(--color-light),rgba(var(--color-light-rgb),.4),rgba(var(--color-light-rgb),.2),rgba(var(--color-light-rgb),.1),rgba(var(--color-light-rgb),.05),rgba(var(--color-light-rgb),0));text-align:center;color:var(--color-dark)}@media only screen and (max-width:640px){.buffer{margin-left:14vw;margin-right:14vw}#about .buffer{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-flow:column!important;flex-flow:column!important}#about .buffer>*{width:100%!important}.rosterbox{height:210px;width:294px}#contactcontainer{font-size:smaller}#contactlogo img{height:300px}}@media only screen and (max-height:480px){nav ul{font-size:2vw}}@media only screen and (max-width:480px) and (orientation:landscape){nav ul{font-size:2vw}}@media only screen and (max-aspect-ratio:9/18){nav ul{font-size:5vw}}</style></head><script async src="https://www.googletagmanager.com/gtag/js?id=G-9RSPTCMWR3"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-9RSPTCMWR3")</script><body><script>var vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); window.addEventListener('resize', () => { vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); });</script><div id="wrap"><input type="checkbox" id="nav-hider"><nav><ul><li><a href="#jumbo" class="noselect">TOP</a></li><li><a href="#about" class="noselect">ABOUT</a></li><li><a href="#roster" class="noselect">ROSTER</a></li><li><a href="#contact" class="noselect">CONTACT</a></li></ul></nav><div id="content"><div class="page" id="jumbo"><div><img class="noselect" src="./img/TFM4-transparent-black-3000.svg" alt="TFM logo"></div><img class="noselect" src="./img/nyc0.webp" alt="NYC background image"></div><div class="page" id="about"><h1>WELCOME TO THE FARM!<br><br></h1><div class="buffer"><div><h2>ABOUT US<br><hr></h2><p>Tompkins Farm Music is a boutique New York-based music publisher with a global mindset. We focus on worldwide administration, licensing and placements of music in film, television and advertising. Our catalog is diverse and includes exceptional songwriters from the 1940s to the present who have contributed to the Great American Songbook and popular culture.</p></div><img class="noselect" src="./img/mamaroneck_neighborhood.webp" alt="image of Mamaroneck Avenue"></div></div><div class="page" id="roster"><h1>OUR CATALOG</h1><div id="rostercontainer"><div class="rosterbox" style="background:url(img/sylvia.webp) no-repeat"><span role="img" aria-label="Sylvia Fine"></span><div class="rostertext noselect">SYLVIA FINE</div><a href="https://en.wikipedia.org/wiki/Sylvia_Fine" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/ray.webp) no-repeat"><span role="img" aria-label="Ray Charles"></span><div class="rostertext noselect">RAY CHARLES</div><a href="https://en.wikipedia.org/wiki/Ray_Charles_(musician,_born_1918)" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/fullforce.webp) no-repeat"><span role="img" aria-label="Full Force"></span><div class="rostertext noselect">FULL FORCE</div><a href="https://fullforce6.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/cavalier.webp) no-repeat"><span role="img" aria-label="Cavalier Films"></span><div class="rostertext noselect">CAVALIER FILMS</div><a href="" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/bobby.webp) no-repeat"><span role="img" aria-label="Bobby Rosengarden"></span><div class="rostertext noselect">BOBBY ROSENGARDEN</div><a href="https://en.wikipedia.org/wiki/Bobby_Rosengarden" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/joncharles.webp) no-repeat"><span role="img" aria-label="Jonathan Charles"></span><div class="rostertext noselect">JONATHAN CHARLES</div><a href="./index.html" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/mlumbo.webp) no-repeat"><span role="img" aria-label="M'lumbo"></span><div class="rostertext noselect">M'LUMBO</div><a href="https://www.mlumbo.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/buick6.webp) no-repeat"><span role="img" aria-label="Buick 6"></span><div class="rostertext noselect">BUICK 6</div><a href="https://www.facebook.com/Buick6Music" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/courtney.webp) no-repeat"><span role="img" aria-label="Courtney Jones"></span><div class="rostertext noselect">COURTNEY JONES</div><a href="https://www.facebook.com/pages/category/Musician-Band/Courtney-Jones-Music-38021533555/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/neil.webp) no-repeat"><span role="img" aria-label="Neil Rosengarden"></span><div class="rostertext noselect">NEIL ROSENGARDEN</div><a href="https://neilrosengarden1.bandcamp.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/milton.webp) no-repeat"><span role="img" aria-label="Milton"></span><div class="rostertext noselect">MILTON</div><a href="https://www.miltonmusic.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/lipbone.webp) no-repeat"><span role="img" aria-label="Lipbone Redding"></span><div class="rostertext noselect">LIPBONE REDDING</div><a href="https://www.lipbone.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/squealer.webp) no-repeat"><span role="img" aria-label="Squealer"></span><div class="rostertext noselect">SQUEALER</div><a href="./index.html" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/davestruestory.webp) no-repeat"><span role="img" aria-label="Dave's True Story"></span><div class="rostertext noselect">DAVE'S TRUE STORY</div><a href="https://www.davestruestory.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/kelly.webp) no-repeat"><span role="img" aria-label="Kelly Flint"></span><div class="rostertext noselect">KELLY FLINT</div><a href="https://www.facebook.com/pages/category/Musician-band/Kelly-Flint-13589161766/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/peter.webp) no-repeat"><span role="img" aria-label="Peter Malick"></span><div class="rostertext noselect">PETER MALICK</div><a href="https://en.wikipedia.org/wiki/Peter_Malick" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/sixthletter.webp) no-repeat"><span role="img" aria-label="The Sixth Letter"></span><div class="rostertext noselect">THE SIXTH LETTER</div><a href="https://www.thesixthletter.co.uk/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/marc.webp) no-repeat"><span role="img" aria-label="Marc Berger"></span><div class="rostertext noselect">MARC BERGER</div><a href="https://marcbergermusic.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/julie.webp) no-repeat"><span role="img" aria-label="Julie Corbalis"></span><div class="rostertext noselect">JULIE CORBALIS</div><a href="https://juliecorbalis.com/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/linda.webp) no-repeat"><span role="img" aria-label="Linda Draper"></span><div class="rostertext noselect">LINDA DRAPER</div><a href="https://www.lindadraper.net/" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/alectro.webp) no-repeat"><span role="img" aria-label="Alectro"></span><div class="rostertext noselect">ALECTRO</div><a href="https://soundcloud.com/goalectro" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/al.webp) no-repeat"><span role="img" aria-label="Al Somma"></span><div class="rostertext noselect">AL SOMMA</div><a href="http://www.alsomma.com/index.htm" target="_blank"><div class="overlay"></div></a></div><div class="rosterbox" style="background:url(img/riviera.webp) no-repeat"><span role="img" aria-label="Riviera"></span><div class="rostertext noselect">RIVIERA</div><a href="https://hyperfollow.com/itsrivieramusic" target="_blank"><div class="overlay"></div></a></div></div><br></div><div class="page" id="contact"><h1>CONTACT US</h1><div class="buffer"><div id="contactcontainer"><div id="contactlogo"><img class="noselect" src="./img/TFM4-transparent-black-3000.svg" alt="TFM logo"></div><div id="contactlinks"><div>📧<a href="mailto:tompkinsfarmhand@gmail.com" target="_blank">tompkinsfarmhand@gmail.com</a></div><div id="socials"><a href="https://www.instagram.com/tompkinsfarmmusic/" target="_blank"><img class="noselect" src="./img/Instagram_Glyph_Gradient_RGB.webp" alt="Instagram"></a><a href="https://twitter.com/tmpkinsfarmusic" target="_blank"><img class="noselect" src="./img/Twitter social icons - rounded square - blue.webp" alt="Twitter"></a><a href="https://open.spotify.com/user/31j3ulspyyflrml5cuwm7tucmaqu" target="_blank"><img class="noselect" src="./img/spotify-contact.webp" alt="Spotify"></a><a href="https://www.youtube.com/channel/UCxsryHLtDTsLgPG3_cP310Q" target="_blank"><img class="noselect" src="./img/youtube-contact.webp" alt="Youtube"></a></div></div></div></div><div id="formsection"><form action="https://getform.io/f/68506130-5f38-4dad-a55f-2eaccea57292" method="POST"><h3>OR, SEND US A MESSAGE DIRECTLY:</h3><br><input type="text" name="name" placeholder="Your name..."><br><input type="email" name="email" placeholder="Your email..."><br><textarea name="message" placeholder="Message..."></textarea><br><button type="submit">Send</button><br><br></form></div></div><div id="footer">© 2022 Tompkins Farm Music, LLC</div></div></div><script>window.addEventListener('DOMContentLoaded', () => { const observer = new IntersectionObserver(entries => { for (entry of entries) { const id = entry.target.getAttribute('id'); if (entry.isIntersecting) { document.querySelector(`nav a[href="#${id}"]`).classList.add('active'); } else { document.querySelector(`nav a[href="#${id}"]`).classList.remove('active'); } } });[document.getElementById('jumbo'), document.getElementById('about'), document.getElementById('roster'), document.getElementById('contact')].forEach((e) => { observer.observe(e); }); });</script><script async src="//static.getclicky.com/101377088.js"></script></body></html>