diff --git a/js/hero.js b/js/hero.js new file mode 100644 index 0000000..f77e29d --- /dev/null +++ b/js/hero.js @@ -0,0 +1,17 @@ +var x = window.screen.width > 512 ? 160 : 80; + +var controller = new ScrollMagic.Controller(); + +var hero = new TweenMax.from("#hero", 1, { + x: this.x, + ease: Power1.easeOut +}); + +var heroScene = new ScrollMagic.Scene({ + triggerElement: "#start", + triggerHook: 0, + duration: 320 +}) +.setTween(hero) +.addTo(controller); + diff --git a/js/instafeed.min.js b/js/instafeed.min.js new file mode 100644 index 0000000..62d8662 --- /dev/null +++ b/js/instafeed.min.js @@ -0,0 +1,2 @@ +// Generated by CoffeeScript 1.9.3 +(function(){var e;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?M=["","random"]:M=this.options.sortBy.split("-"),O=M[0]==="least"?!0:!1;switch(M[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",O);break;case"liked":e.data=this._sortBy(e.data,"likes.count",O);break;case"commented":e.data=this._sortBy(e.data,"comments.count",O);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){m=e.data,A=parseInt(this.options.limit,10),this.options.limit!=null&&m.length>A&&(m=m.slice(0,A)),u=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(m=this._filter(m,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){f="",d="",w="",D=document.createElement("div");for(c=0,N=m.length;cy&&(b="landscape"),E=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),d=this._makeTemplate(this.options.template,{model:h,id:h.id,link:h.link,type:h.type,image:v,width:E,height:y,orientation:b,caption:this._getObjectProperty(h,"caption.text"),likes:h.likes.count,comments:h.comments.count,location:this._getObjectProperty(h,"location.name")}),f+=d}D.innerHTML=f,i=[],r=0,n=D.childNodes.length;while(r=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),g.src=v,this.options.links===!0?(t=document.createElement("a"),t.href=h.link,t.appendChild(g),u.appendChild(t)):u.appendChild(g)}_=this.options.target,typeof _=="string"&&(_=document.getElementById(_));if(_==null)throw o='No element with id="'+this.options.target+'" on page.',new Error(o);_.appendChild(u),a=document.getElementsByTagName("head")[0],a.removeChild(document.getElementById("instafeed-fetcher")),S="instafeedCache"+this.unique,window[S]=void 0;try{delete window[S]}catch(P){s=P}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(!this.options.tagName)throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(!this.options.locationId)throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(!this.options.userId)throw new Error("No user specified. Use the 'userId' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))s=n.match(r)[1],o=(i=this._getObjectProperty(t,s))!=null?i:"",n=n.replace(r,function(){return""+o});return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:idiv{margin-bottom:64px}.section-work .videos>div:last-of-type{margin:0}.section-service .square{padding:64px}.section-service h3{color:white;margin-bottom:32px}.section-service button{display:inline-flex;color:white;background-color:var(--purple);margin-top:64px}.section-service button:hover{background-color:var(--pink)}.section-rental{overflow:hidden}.section-rental .parts{position:relative;max-width:720px;min-height:256px;margin:0 auto}.section-rental .parts img:not(#part0){position:absolute;filter:contrast(1.3) saturate(0.6) sepia(0.1)}.section-rental .parts #part0{width:100%}.section-rental .parts #part1{width:29%;left:34%}.section-rental .parts #part2{width:8.5%;left:24%;margin-top:2%}.section-rental .parts #part3{width:19%;left:0;margin-top:2%}.section-rental .parts #part4{width:17%;left:2%;margin-top:15%}.section-rental .parts #part5{width:5.5%;left:70%;margin-top:9%}.section-rental .parts #part6{width:22%;left:64%;margin-top:1%}.section-rental .parts #part7{width:12.5%;left:87.5%;margin-top:1%}.section-rental .parts #part8{width:37%;left:30%;margin-top:28%}.section-rental .parts #part9{width:22.5%;left:0;margin-top:28%}.section-rental .parts #part10{width:49%;left:20%;margin-top:40%}.section-rental .parts #part11{width:14%;left:2%;margin-top:36%}.section-rental .parts #part12{width:27%;left:72%;margin-top:31%}.section-rental .parts #part13{width:24%;left:48%;margin-top:48%}.section-rental .parts #part14{width:19%;left:24%;margin-top:48%}.section-rental .parts #part15{width:4.5%;left:15%;margin-top:47%}.section-rental .parts #part16{width:24%;left:75%;margin-top:48%}.section-rental .parts #part17{width:7.5%;left:2%;margin-top:44%}.section-rental .parts #part18-1{width:14%;left:46%;margin-top:72%}.section-rental .parts #part18-2{width:14%;left:46%;margin-top:86%}.section-rental .parts #part19-1{width:17%;left:22%;margin-top:70%}.section-rental .parts #part19-2{width:17%;left:22%;margin-top:84%}.section-rental .parts #part20{width:13.5%;left:66%;margin-top:73%}.section-rental .parts #part21{width:11.5%;left:6%;margin-top:73%}.section-rental .parts #part22{width:13.5%;left:84%;margin-top:73%}.section-rental .parts #part23{width:28%;left:22%;margin-top:102%}.section-rental .parts #part24{width:37.5%;left:60%;margin-top:100%}.section-rental .parts #part25{width:20%;left:14%;margin-top:105%}.section-rental .parts #part26{width:40%;left:43%;margin-top:106%}.section-rental .parts #part27{width:22.5%;left:20%;margin-top:115%}.section-rental .parts #part28{width:22%;left:47%;margin-top:130%}.section-rental .parts #part29-1{width:3%;left:4%;margin-top:106%}.section-rental .parts #part29-2{width:3%;left:8%;margin-top:106%}.section-rental .parts #part30{width:19%;left:70%;margin-top:116%}.section-rental .parts #part31-1{width:2.5%;left:13%;margin-top:125.5%}.section-rental .parts #part31-2{width:2.5%;left:16%;margin-top:125.5%}.section-rental .parts #part32-1{width:2.75%;left:20%;margin-top:126%}.section-rental .parts #part32-2{width:2.75%;left:24%;margin-top:126%} +html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,input,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,button,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:none;font:inherit;color:var(--black-100);text-decoration:none;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}textarea:focus,input:focus,button:focus{outline:none}.container{max-width:1600px;width:100%;margin-right:auto;margin-left:auto;padding:0 32px;position:relative;box-sizing:border-box}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (max-width: 511px){.hide-xs{display:none !important}}@media only screen and (min-width: 512px){.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-xs{display:none !important}}@media only screen and (max-width: 785px){.hide-sm{display:none !important}}@media only screen and (min-width: 786px){.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-sm{display:none !important}}@media only screen and (max-width: 1023px){.hide-md{display:none !important}}@media only screen and (min-width: 1024px){.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-md{display:none !important}}html{background-color:black;font-family:"Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--beige: #F7EEE0;--yellow: #FEBB28;--orange: #FE6732;--red: #F5303C;--pink: #CE2867;--purple: #571B47;--grey: #3d3d3d}body{overflow-x:hidden}h1,h2,h3,p{margin-block-start:0;margin-block-end:0}h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-2%}h1{font-size:64px}h2{font-size:40px}h3{font-size:32px}p{font-size:18px;font-weight:500;line-height:1.4}button{font-size:18px;font-weight:600;padding:23px 32px;cursor:pointer;transition:background-color 0.2s ease-in-out}[data-aos="fade-in"]{opacity:0;transition-property:opacity}[data-aos="fade-in"].aos-animate{opacity:1}.bg-white{background-color:white}.bg-beige{background-color:var(--beige)}.bg-yellow{background-color:var(--yellow)}.bg-orange{background-color:var(--orange)}.bg-red{background-color:var(--red)}.bg-pink{background-color:var(--pink)}.bg-purple{background-color:var(--purple)}.bg-grey{background-color:var(--grey)}.bg-black{background-color:black}.p-t-l{padding-top:192px}.p-b-l{padding-bottom:192px}.header{position:sticky;top:0;left:0;right:0;height:96px;color:white;z-index:100}.header .container{height:100%;display:flex;align-items:center}.header .container img{cursor:pointer}.header .container ul{display:flex;flex:1;justify-content:flex-end;text-align:right}.header .container ul li{display:inline-flex;margin-left:64px;font-size:18px;font-weight:600;cursor:pointer;transition:color 0.2s ease-in-out}.header .container ul li:nth-of-type(1):hover{color:var(--yellow)}.header .container ul li:nth-of-type(2):hover{color:var(--orange)}.header .container ul li:nth-of-type(3):hover{color:var(--red)}.header .container ul li:nth-of-type(4):hover{color:var(--pink)}.section-start .container{padding:0;overflow:hidden}.section-start .hero{position:relative;width:100%;max-width:100%;display:flex;justify-content:center;overflow:hidden;z-index:1}.section-start .hero video{width:100%;max-width:100%}.section-start .stripe{position:absolute;top:0;bottom:0;left:0;width:160px;display:flex;z-index:-1}.section-start .stripe>div{width:20%}.section-service .container{padding:0}.section-service .square{padding:32px}.section-service h1{color:white;margin-bottom:96px;margin-left:32px}.section-service h2{color:white;margin-bottom:32px}.section-service button{display:inline-flex;color:white;background-color:var(--purple);margin-top:64px}.section-service button:hover{background-color:black}.section-work h1{position:sticky;top:256px;margin-left:64px;color:black;writing-mode:vertical-lr;-webkit-text-orientation:mixed;text-orientation:mixed}.section-work .videos>div{margin-bottom:64px}.section-work .videos>div:last-of-type{margin:0}.section-rental .text{position:sticky;top:256px;padding:32px}.section-rental .text h2{margin-bottom:32px;color:white}.section-rental .text p{color:black}.section-rental .parts{position:relative;max-width:720px;min-height:256px;margin:0 auto}.section-rental .parts img:not(#part0){position:absolute;filter:contrast(1.3) saturate(0.6)}.section-rental .parts #part0{width:100%}.section-rental .parts #part1{width:29%;left:34%}.section-rental .parts #part2{width:8.5%;left:24%;margin-top:2%}.section-rental .parts #part3{width:19%;left:0;margin-top:2%}.section-rental .parts #part4{width:17%;left:2%;margin-top:15%}.section-rental .parts #part5{width:5.5%;left:70%;margin-top:9%}.section-rental .parts #part6{width:22%;left:64%;margin-top:1%}.section-rental .parts #part7{width:12.5%;left:87.5%;margin-top:1%}.section-rental .parts #part8{width:37%;left:30%;margin-top:28%}.section-rental .parts #part9{width:22.5%;left:0;margin-top:28%}.section-rental .parts #part10{width:49%;left:20%;margin-top:40%}.section-rental .parts #part11{width:14%;left:2%;margin-top:36%}.section-rental .parts #part12{width:27%;left:72%;margin-top:31%}.section-rental .parts #part13{width:24%;left:48%;margin-top:48%}.section-rental .parts #part14{width:19%;left:24%;margin-top:48%}.section-rental .parts #part15{width:4.5%;left:15%;margin-top:47%}.section-rental .parts #part16{width:24%;left:75%;margin-top:48%}.section-rental .parts #part17{width:7.5%;left:2%;margin-top:44%}.section-rental .parts #part18-1{width:14%;left:46%;margin-top:72%}.section-rental .parts #part18-2{width:14%;left:46%;margin-top:86%}.section-rental .parts #part19-1{width:17%;left:22%;margin-top:70%}.section-rental .parts #part19-2{width:17%;left:22%;margin-top:84%}.section-rental .parts #part20{width:13.5%;left:66%;margin-top:73%}.section-rental .parts #part21{width:11.5%;left:6%;margin-top:73%}.section-rental .parts #part22{width:13.5%;left:84%;margin-top:73%}.section-rental .parts #part23{width:28%;left:22%;margin-top:102%}.section-rental .parts #part24{width:37.5%;left:60%;margin-top:100%}.section-rental .parts #part25{width:20%;left:14%;margin-top:105%}.section-rental .parts #part26{width:40%;left:43%;margin-top:106%}.section-rental .parts #part27{width:22.5%;left:20%;margin-top:115%}.section-rental .parts #part28{width:22%;left:47%;margin-top:130%}.section-rental .parts #part29-1{width:3%;left:4%;margin-top:106%}.section-rental .parts #part29-2{width:3%;left:8%;margin-top:106%}.section-rental .parts #part30{width:19%;left:70%;margin-top:116%}.section-rental .parts #part31-1{width:2.5%;left:13%;margin-top:125.5%}.section-rental .parts #part31-2{width:2.5%;left:16%;margin-top:125.5%}.section-rental .parts #part32-1{width:2.75%;left:20%;margin-top:126%}.section-rental .parts #part32-2{width:2.75%;left:24%;margin-top:126%}@media only screen and (max-width: 1023px){h1{font-size:48px}h2{font-size:32px}.p-t-l{padding-top:128px}.p-b-l{padding-bottom:128px}}@media only screen and (max-width: 767px){.section-service{padding-bottom:0}}@media only screen and (max-width: 511px){h1{font-size:40px}h2{font-size:28px}.p-t-l{padding-top:64px}.p-b-l{padding-bottom:64px}.section-start .stripe{width:80px}.section-service{padding-bottom:0}} diff --git a/style/sass/main.scss b/style/sass/main.scss index e5172bf..257cd75 100644 --- a/style/sass/main.scss +++ b/style/sass/main.scss @@ -11,6 +11,7 @@ html { --red: #F5303C; --pink: #CE2867; --purple: #571B47; + --grey: #3d3d3d; } body { @@ -29,19 +30,19 @@ h1, h2, h3 { } h1 { - font-size: 80px; -} - -h2 { font-size: 64px; } +h2 { + font-size: 40px; +} + h3 { - font-size: 48px; + font-size: 32px; } p { - font-size: 20px; + font-size: 18px; font-weight: 500; line-height: 1.4; } @@ -54,6 +55,15 @@ button { transition: background-color 0.2s ease-in-out; } +[data-aos="fade-in"] { + opacity: 0; + transition-property: opacity; + + &.aos-animate { + opacity: 1; + } +} + .bg { // background &-white { background-color: white; @@ -83,6 +93,10 @@ button { background-color: var(--purple); } + &-grey { + background-color: var(--grey); + } + &-black { background-color: black; } @@ -103,7 +117,7 @@ button { } .header { - position: fixed; + position: sticky; top: 0; left: 0; right: 0; @@ -127,6 +141,7 @@ button { text-align: right; li { + display: inline-flex; margin-left: 64px; font-size: 18px; font-weight: 600; @@ -154,74 +169,57 @@ button { } .section-start { + .container { + padding: 0; + overflow: hidden; + } + .hero { - max-height: 320px; - padding-right: 64px; - } + position: relative; + width: 100%; + max-width: 100%; + display: flex; + justify-content: center; + overflow: hidden; + z-index: 1; - h1 { - height: 192px; - max-height: 192px; - margin-bottom: 64px; - color: white; - } - - button.primary { - color: black; - background-color: var(--yellow); - margin-right: 32px; - - &:hover { - background-color: var(--orange); - } - } - - button.secondary { - color: var(--beige); - background-color: var(--purple); - - &:hover { - background-color: var(--pink); + video { + width: 100%; + max-width: 100%; } } .stripe { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 160px; display: flex; - flex-direction: column; - flex: 1; - - div { - height: 64px; - width: 100%; - } - } -} + z-index: -1; -.section-work { - h2 { - position: sticky; - top: 256px; - color: white; - writing-mode: vertical-lr; - -webkit-text-orientation: mixed; - text-orientation: mixed - } - - .videos > div { - margin-bottom: 64px; - - &:last-of-type { - margin: 0; + & > div { + width: 20%; } } } .section-service { + .container { + padding: 0; + } + .square { - padding: 64px; + padding: 32px; } - h3 { + h1 { + color: white; + margin-bottom: 96px; + margin-left: 32px; + } + + h2 { color: white; margin-bottom: 32px; } @@ -233,13 +231,46 @@ button { margin-top: 64px; &:hover { - background-color: var(--pink); + background-color: black; + } + } +} + +.section-work { + h1 { + position: sticky; + top: 256px; + margin-left: 64px; + color: black; + writing-mode: vertical-lr; + -webkit-text-orientation: mixed; + text-orientation: mixed; + } + + .videos > div { + margin-bottom: 64px; + + &:last-of-type { + margin: 0; } } } .section-rental { - overflow: hidden; + .text { + position: sticky; + top: 256px; + padding: 32px; + + h2 { + margin-bottom: 32px; + color: white; + } + + p { + color: black; + } + } .parts { position: relative; @@ -249,7 +280,7 @@ button { img:not(#part0) { position: absolute; - filter: contrast(1.3) saturate(0.6) sepia(0.1); + filter: contrast(1.3) saturate(0.6); } #part0 { @@ -478,3 +509,67 @@ button { } } } + +@media only screen and (max-width: 1023px) { + h1 { + font-size: 48px; + } + + h2 { + font-size: 32px; + } + + .p { // padding + &-t { // top + &-l { // large + padding-top: 128px; + } + } + + &-b { // bottom + &-l { // large + padding-bottom: 128px; + } + } + } +} + +@media only screen and (max-width: 767px) { + .section-service { + padding-bottom: 0; + } +} + +@media only screen and (max-width: 511px) { + h1 { + font-size: 40px; + } + + h2 { + font-size: 28px; + } + + .p { // padding + &-t { // top + &-l { // large + padding-top: 64px; + } + } + + &-b { // bottom + &-l { // large + padding-bottom: 64px; + } + } + } + + .section-start { + .stripe { + width: 80px; + } + } + + .section-service { + padding-bottom: 0; + } +} diff --git a/template/landing_page.html b/template/landing_page.html index bb4b730..10ac4a1 100644 --- a/template/landing_page.html +++ b/template/landing_page.html @@ -22,6 +22,7 @@ + @@ -30,129 +31,158 @@ Schnittfest - + -
-
-
-

Film, auf den
Frame genau.

- - -
-
-
-
-
-
-
+
+
+

Film, auf den Frame genau.

+
+
+
+

Film

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+ +
+
+

Animation

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+
+
+

Sound

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+
+
-
-
-
-

Referenzen

+
+
+
+

Referenzen

-
+
-
+
-
+
-
+
-
+
-
-
-
-

Film

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

- -
-
-

Animation

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

-
-
-

Sound

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

-
-
+
+
-
- 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 - 15 - 16 - 17 - 18-1 - 18-2 - 19-1 - 19-2 - 20 - 21 - 22 - 23 - 24 - 25 - 26 - 27 - 28 - 29-1 - 29-2 - 30 - 31-1 - 31-2 - 32-1 - 32-1 +
+
+
+

Rental

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+
+
+
+
+ 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18-1 + 18-2 + 19-1 + 19-2 + 20 + 21 + 22 + 23 + 24 + 25 + 26 + 27 + 28 + 29-1 + 29-2 + 30 + 31-1 + 31-2 + 32-1 + 32-1 +
+
-
+
-->
Spacer
- - - - - + + + + + + + + + +