Show OHIO page

geeli123 · Feb 27, 2017 · ab73d4c · ab73d4c
1 parent decf70f
commit ab73d4c
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 1 deletion.
diff --git a/img/bowtie.png b/img/bowtie.png
diff --git a/show/2016/index.html b/show/2016/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+
+		<!-- Always force latest IE rendering engine or request Chrome Frame -->
+		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+		<meta name="description" content="Sponsor HackOHI/O 2016: The Ohio State Hackathon">
+		<meta name="keywords" content="Hackathon, OHIO, HackOHIO, 2016">
+		<meta name="author" content="OHI/O">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>ShowOHI/O 2016 - OHI/O</title>
+
+		<link rel="icon" href="../img/favicon.ico">
+		<link rel="shortcut icon" href="../img/favicon.ico">
+
+		<link rel="stylesheet" href="../style/font-awesome-4.5.0/css/font-awesome.min.css">
+		<link rel="stylesheet" type="text/css" href="../style/showohio.css">
+
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+			ga('create', 'UA-51284668-6', 'auto');
+			ga('send', 'pageview');
+		</script>
+	</head>
+	<body>
+			<div class="tv">
+		  <div class="screen mute" id="tv"></div>
+
+		<div class="content">
+			<div class="main">
+				<h1><img src="../img/bowtie.png" class="bowtie"> ShowOHI/O 2016</h1>
+				<h3>April 2016 - location will be announced shortly</h3>
+				<p>Have you built something you are proud of? Found an awesome insight in some twitter data you scraped? Made a VR horror game to blow any scary movie out of the water? This April OHI/O will be hosting a showcase event to give you the opportunity to demo your work, receive constructive feedback from Columbus tech and analytics professionals and mingle with other creative minds like you. The event is set to take place in mid-April in the Maker-Space of one of Columbus's awesome tech firms.</p>
+
+				<p>If you think you would be interested in bringing your project to ShowOHI/O, please fill out the interest form below so we can keep in touch with you about details of the event as it draws closer.</p>
+
+				<p><strong>Note that filling out this form will give you priority once registration goes live in mid March.</strong></p>
+
+				<br>
+
+				<p><a class="button" style="width: 50%;" href="http://go.osu.edu/hackwithus">ShowOHI/O interest form</a></p>
+
+				<br><br><br><br><br><br><br><br>
+
+				<a class="social-media-image" href="https://www.facebook.com/hackohio"><i class="fa fa-facebook fa-2x"></i></a><a class="social-media-image" href="https://twitter.com/hackohio"><i class="fa fa-twitter fa-2x"></i></a><a class="social-media-image" href="https://www.instagram.com/hackohio/"><i class="fa fa-instagram fa-2x"></i></a><a class="social-media-image" href="https://www.youtube.com/channel/UCJJzEGEjQrpVTY3zEQS0BpA"><i class="fa fa-youtube fa-2x"></i></a><a class="social-media-image" href="https://medium.com/@hackohio"><i class="fa fa-medium fa-2x"></i></a>
+
+				<h2>
+					Have questions or comments? Get in touch at <a href="mailto:[email protected]">[email protected]</a>.
+				</h2>
+			</div>
+		</div>
+
+		<div class="cover"></div>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+		<script>
+			var tag = document.createElement('script');
+					tag.src = 'https://www.youtube.com/player_api';
+
+			var firstScriptTag = document.getElementsByTagName('script')[0];
+					firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+			var tv, playerDefaults = {
+						autoplay: 0,
+						autohide: 1,
+						modestbranding: 0,
+						rel: 0,
+						showinfo: 0,
+						controls: 0,
+						disablekb: 1,
+						enablejsapi: 0,
+						iv_load_policy: 3
+					};
+
+			var vid = { 'videoId': 'CMHpWSEIsVs', 'startSeconds': 0, 'suggestedQuality': 'hd720' };
+
+			$('.hi em:last-of-type').html(vid.length);
+
+			function onYouTubePlayerAPIReady() {
+			  tv = new YT.Player('tv', {
+			  	events: {
+			  		'onReady': onPlayerReady,
+			  		'onStateChange': onPlayerStateChange
+			  	},
+			  	playerVars: playerDefaults
+			 	});
+			}
+
+			function onPlayerReady() {
+			  tv.loadVideoById(vid);
+			  tv.mute();
+			}
+
+			function onPlayerStateChange(e) {
+			  if (e.data === 1) {
+			    $('#tv').addClass('active');
+			    $('.hi em:nth-of-type(2)').html(vid + 1);
+			  } else if (e.data === 2) {
+			    $('#tv').removeClass('active');
+
+			    tv.loadVideoById(vid);
+			    tv.seekTo(vid.startSeconds);
+			  }
+			}
+
+			function vidRescale() {
+			  var w = $(window).width() + 200,
+			    h = $(window).height() + 200;
+
+			  if (w/h > 16/9) {
+			    tv.setSize(w, w / 16 * 9);
+			    $('.tv .screen').css({'left': '0px'});
+			  } else {
+			    tv.setSize(h / 9 * 16, h);
+			    $('.tv .screen').css({ 'left': -($('.tv .screen').outerWidth() - w) / 2 });
+			  }
+			}
+
+			$(window).on('load resize', vidRescale);
+		</script>
+	</body>
+</html>
diff --git a/show/index.html b/show/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>You are being redirected...</title>
+    <meta http-equiv="refresh" content="0; url=/show/2016">
+  </head>
+
+  <body>
+    <p>You are being redirected...</p>
+  </body>
+</html>
diff --git a/style/showohio.css b/style/showohio.css
@@ -0,0 +1,141 @@
+body {
+	margin: 0;
+	background-color: rgb(0,0,0);
+	color: white;
+	font-family: 'proximanova', Proxima Nova, Helvetica, sans-serif;
+}
+
+h1 {
+	font-weight: 600;
+	letter-spacing: 1px;
+	font-size: 36pt;
+	margin: 0;
+	text-transform: uppercase;
+	line-height: 37pt;
+	margin-bottom: 26px;
+	box-sizing: border-box;
+}
+
+h2 {
+	margin: 12px 0;
+	font-weight: 200;
+	font-size: 14pt;
+	box-sizing: border-box;
+}
+
+a {
+	color: white;
+	text-decoration: none;
+	border-bottom: solid white 1px;
+}
+
+a.social-media-image {
+  padding-right: 20px;
+	border-bottom: solid white 0px;
+}
+
+span.lt {
+	font-weight: 200;
+}
+
+span.bld {
+	font-weight: 400;
+}
+
+.content {
+	/* max-width: 768px; */
+	/* width: 80%; */
+	margin: auto;
+}
+
+.button {
+	background-color: #BB0000;
+	border: none;
+	color: white;
+	padding: 15px 32px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 18px;
+  width: 100px;
+}
+
+.main {
+	position: absolute;
+	top:  50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	max-width: 768px;
+	/* box-sizing: border-box; */
+	width: 80%;
+	z-index: 99;
+}
+
+@media screen and (max-width: 720px) {
+	.main {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: auto;
+		padding: 30px;
+		transform: translate(0, 0);
+	}
+}
+
+.cover {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	content: "";
+	background: rgba(0, 0, 0, 0.5);
+}
+
+.logo.lt {
+	font-weight: 200;
+}
+
+#ytplayer {
+  opacity:0.4;
+  position: fixed;
+  z-index: -99;
+  width: 100%;
+  height: 100%
+}
+
+.bowtie {
+	height: 34px;
+	vertical-align: baseline;
+}
+
+.tv {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+}
+
+.tv .screen {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+
+	margin: auto;
+
+	opacity: 0;
+	transition: opacity .5s;
+}
+.tv .screen.active {
+   opacity: 1;
+ }
diff --git a/style/sponsor.css b/style/sponsor.css
@@ -80,4 +80,4 @@ span.bld {
 	z-index: -99;
 	width: 100%;
 	height: 100%
-}
+}