Skip to content

Instantly share code, notes, and snippets.

View samsjchi's full-sized avatar

Sam Chi samsjchi

56 followers · 81 following
  • New York, NY
View GitHub Profile
@samsjchi
samsjchi / qualcomm-cineflex.html
Last active July 27, 2018 15:13
Qualcomm Cineflex (crop fix)
<html>
<head>
<title><%= title="" %=""></%=></title>
<style>
body{margin:0}.c-content{background:#000;overflow:hidden;margin:0;padding-bottom:56.25%;height:0}.c-video-wrapper{margin:0;width:100%}.c-video{display:block;width:100%;max-height:100vh}
</style>
<div class="js-external-css">
<style>
@samsjchi
samsjchi / bbva1-impacthd-subtitles.html
Last active July 19, 2018 15:40
BBVA Compass Impact+ HD (Unit 1 w/ subtitles)
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
body{margin:0;font-weight:100;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif}a,body{color:#fff}a{text-decoration:none}h1,h2{margin:0;line-height:1.5}.c-video-wrapper{position:relative;height:0;width:100%;margin:0;float:left;overflow:hidden;z-index:1;transition-duration:.5s;transition-timing-function:ease-in-out;transition-property:opacity,-webkit-transform,-webkit-filter;transition-property:transform,filter,opacity;transition-property:transform,filter,opacity,-webkit-transform,-webkit-filter;opacity:.85;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(5px);filter:blur(5px);border:1px solid rgba(0,0,0,.1);padding-bottom:56.25%}@media (min-width:600px){.c-video-wrapper{padding-bottom:57%}}.is-viewable .c-video-wrapper{opacity:1;-webkit-transform:none;transform:none;-webkit-filter:blur(0);filter:blur(0)}.c-video{position:
@samsjchi
samsjchi / bbva2-impacthd-subtitles.html
Last active July 19, 2018 15:41
BBVA Compass Impact+ HD (Unit 2 w/ subtitles)
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
body{margin:0;font-weight:100;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif}a,body{color:#fff}a{text-decoration:none}h1,h2{margin:0;line-height:1.5}.c-video-wrapper{position:relative;height:0;width:100%;margin:0;float:left;overflow:hidden;z-index:1;transition-duration:.5s;transition-timing-function:ease-in-out;transition-property:opacity,-webkit-transform,-webkit-filter;transition-property:transform,filter,opacity;transition-property:transform,filter,opacity,-webkit-transform,-webkit-filter;opacity:.85;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(5px);filter:blur(5px);padding-bottom:56.25%}@media (min-width:600px){.c-video-wrapper{padding-bottom:57%}}.is-viewable .c-video-wrapper{opacity:1;-webkit-transform:none;transform:none;-webkit-filter:blur(0);filter:blur(0)}.c-video{position:absolute;width:100%;height:100%;
@samsjchi
samsjchi / qualcomm-impacthd-v2.html
Created July 24, 2018 18:59
Qualcomm Impact+ HD v2
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
body{margin:0;font-weight:100;font-family:-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Segoe UI,Arial,sans-serif}a,body{color:#fff}a{text-decoration:none}h1,h2{margin:0;line-height:1.5}.c-video-wrapper{position:relative;height:0;width:100%;margin:0;float:left;overflow:hidden;z-index:1;transition-duration:.5s;transition-timing-function:ease-in-out;transition-property:opacity,-webkit-transform,-webkit-filter;transition-property:transform,filter,opacity;transition-property:transform,filter,opacity,-webkit-transform,-webkit-filter;opacity:.85;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(5px);filter:blur(5px);border:1px solid rgba(0,0,0,.1);padding-bottom:56.25%}@media (min-width:600px){.c-video-wrapper{padding-bottom:56.15%}}.is-viewable .c-video-wrapper{opacity:1;-webkit-transform:none;transform:none;-webkit-filter:blur(0);filter:blur(0)}.c-video{positi
@samsjchi
samsjchi / hpe-cineflex-1.html
Last active August 3, 2018 18:47
HPE Cineflex (Unit 1)
<html>
<head>
<title><%= title="" %=""></%=></title>
<style>
body{margin:0}.c-content{background:#000;overflow:hidden;margin:0;padding-bottom:56.25%;height:0}.c-video-wrapper{margin:0;width:100%}.c-video{display:block;width:100%}
</style>
<div class="js-external-css">
<style>
@samsjchi
samsjchi / hpe-cineflex-2.html
Last active August 3, 2018 18:48
HPE Cineflex (Unit 2)
<html>
<head>
<title><%= title="" %=""></%=></title>
<style>
body{margin:0}.c-content{background:#000;overflow:hidden;margin:0;padding-bottom:56.25%;height:0}.c-video-wrapper{margin:0;width:100%}.c-video{display:block;width:100%}
</style>
<div class="js-external-css">
<style>
@samsjchi
samsjchi / jpmc-cards-business.html
Last active July 27, 2018 20:06
JPMC Cards Unit (Business)
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
*{-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}body{margin:0;font-family:Neutral Std,-apple-system,BlinkMacSystemFont,Helvetica Neue,Roboto,Segoe UI,Arial,sans-serif}.c-content{background:#585858;overflow:hidden;position:absolute;width:100%;line-height:1.25}.c-cards{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 0 50px 20px;margin:0;list-style-type:none;overflow-x:scroll;overflow-y:visible;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;position:relative;left:90%;transition:left .5s ease-in-out}.c-cards::-webkit-scrollbar,.c-cards::-webkit-scrollbar-thumb,.c-cards::-webkit-scrollbar-track{display:none}.c-cards>li::first-child{margin-left:275px}.c-cards>li::last-child{margin-right:275px}.is-viewabl
@samsjchi
samsjchi / jpmc-cards-technology.html
Last active July 27, 2018 20:06
JPMC Cards Unit (Technology)
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
*{-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}body{margin:0;font-family:Neutral Std,-apple-system,BlinkMacSystemFont,Helvetica Neue,Roboto,Segoe UI,Arial,sans-serif}.c-content{background:#585858;overflow:hidden;position:absolute;width:100%;line-height:1.25}.c-cards{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 0 50px 20px;margin:0;list-style-type:none;overflow-x:scroll;overflow-y:visible;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;position:relative;left:90%;transition:left .5s ease-in-out}.c-cards::-webkit-scrollbar,.c-cards::-webkit-scrollbar-thumb,.c-cards::-webkit-scrollbar-track{display:none}.c-cards>li::first-child{margin-left:275px}.c-cards>li::last-child{margin-right:275px}.is-viewabl
@samsjchi
samsjchi / jpmc-cards-science.html
Last active July 27, 2018 20:06
JPMC Cards Unit (Science)
<html>
<head>
<title><%= title="" %=""></%=></title>
<meta name="ad.size" content="width=300,height=250">
<style>
*{-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden}body{margin:0;font-family:Neutral Std,-apple-system,BlinkMacSystemFont,Helvetica Neue,Roboto,Segoe UI,Arial,sans-serif}.c-content{background:#585858;overflow:hidden;position:absolute;width:100%;line-height:1.25}.c-cards{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0 0 50px 20px;margin:0;list-style-type:none;overflow-x:scroll;overflow-y:visible;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;position:relative;left:90%;transition:left .5s ease-in-out}.c-cards::-webkit-scrollbar,.c-cards::-webkit-scrollbar-thumb,.c-cards::-webkit-scrollbar-track{display:none}.c-cards>li::first-child{margin-left:275px}.c-cards>li::last-child{margin-right:275px}.is-viewabl
@samsjchi
samsjchi / uber-cineflex.html
Last active October 10, 2018 20:27
Uber Cineflex Unit
<html>
<head>
<title><%= title="" %=""></%=></title>
<style>
body{margin:0}.c-content{background:#000;overflow:hidden;margin:0;padding-bottom:56.25%;height:0}.c-video-wrapper{margin:0;width:100%}.c-video{display:block;width:100%}
</style>
<div class="js-external-css">
<style>