ux-webapp-wires.html

<!DOCTYPE html>
<html class="full" lang="en">

<head class="">

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=yes, minimal-ui">

	<meta name="description" content="___________">
	<meta name="author" content="Constant Mori Connie Leung HalloConnie CCHGF">

  <!-- Reveal meta -->
	<link rel="stylesheet" href="css/reveal/reveal.css">
	<link rel="stylesheet" href="css/reveal/theme/2001.css" id="theme">

	<!-- CUSTOM -->
	<link rel="stylesheet" href="css/reveal/styling.css">
	<link rel="stylesheet" media="all" href="css/reveal/media2.css">

	<!-- Typefaces -->
	<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Quicksand:300|Source+Code+Pro:200|Roboto:400,300,500,700" rel="stylesheet">
  <!-- 
	font-family: 'Cormorant Garamond',serif;
	font-family: 'Quicksand', sans-serif;
	font-family: 'Source Code Pro', monospace;
	-->

	<!-- PLUGINS -->
	<!--link rel="stylesheet" href="reveal/lib/ven/animateCSS/animate.min.css">
	<link rel="stylesheet" href="reveal/lib/ven/animateCSS/animate.css"-->

	<!-- Overlay -->
	<!--link rel="stylesheet" href="reveal/lib/ven/overlay/overlay.css"-->

	<!-- Full Page Carousel Slider -->
	<!--link rel="stylesheet" href="css/full-slider.css"-->


	<title>UX  Wires</title>

  <!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">

	<!-- Layout Padding -->
	<link href="css/the-big-picture.css" rel="stylesheet">

	<!-- React.js -->
	<!--script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
	<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
	<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
	<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
	<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script-->

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<style>
		/* nav style */

		html,
		body,
		.full {
			background: transparent;
		}

		body,
		.reveal {
			padding: 0;
			margin: 0;
		}

		h3 {
			color: rgba(254,254,254,0.85);
		}

		hr.notes {
			border-top: transparent;
		}

		.categories.fontsize h2.headers {
			font-size: 0.75em;
			border-top: 0.5px solid rgba(0, 0, 0, 0.05);
		}

		h3.sub-header-title.category {
			background-color: rgba(153, 153, 153, 0.5);
			font-size: 0.3em;
			letter-spacing: 0.25em;
			padding: 1%;
			text-align: center;
			margin: 0 auto;
			border: 1px solid rgba(153, 153, 153, 0.85);
			border-style: groove;
			display: block;
			margin-bottom: 1%;
			margin-top: -4%;
		}

		hr.sub-header-title.category.webapp {
			width: 18%;
			border-top: 1px solid rgba(153, 153, 153, 0.85);
			border-style: groove;
		}

		h3.sub-header-title.category.webapp {
			width: 12%;
			font-weight: bolder;
		}
		/* container category */

		.container.sub-header-title.category,
		.row.sub-header-title.category {
			width: 100%;
			margin: 0 auto;
			display: block;
			text-align: center;
			margin-top: -5%;
			margin-bottom: -0.25em;
			opacity: 0.6;
			font-size: 85%;
		}

		.col-xs-1.col-sm-1.sub-header-title.category.webapp.links hr {
			width: 30%;
			float: right;
			margin-top: 90%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}

		.col-md-1.col-lg-1.sub-header-title.category.webapp.links hr {
			width: 30%;
			float: right;
			margin-top: 100%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}

		.col-xs-1.col-sm-1.sub-header-title.category.webapp.rechts hr {
			width: 30%;
			float: right;
			margin-top: 90%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}

		.col-md-1.col-lg-1.sub-header-title.category.webapp.rechts hr {
			width: 30%;
			float: left;
			margin-top: 100%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}

		.col-xs-6.sub-header-title.category.webapp.mitte,
		.col-sm-6.sub-header-title.category.webapp.mitte,
		.col-md-4.sub-header-title.category.webapp.mitte,
		.col-lg-4.sub-header-title.category.webapp.mitte {
			background-color: rgba(21, 88, 76, 0.5);
			padding: 2% 0 0.25% 0;
			font-size: 50%;
			vertical-align: middle;
			margin: 4em 0 -0.5em 0;
		}

		h3.category.webapp {
			letter-spacing: 0.5em;
		}

		/* header description */
		.container.description.inverted.sub-header-title {
			width: 100%;
			font-size: 80%;
			font-size: 70%;
			font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
			color: rgba(240, 248, 255, 0.99);
			letter-spacing: 0.2em;
			text-transform: uppercase;
			font-weight: initial;
			padding: 0 10%;
		}

		.col-xs-12.description.inverted.sub-header-title p,
		.col-xs-12.col-sm-12.col-md-12.col-lg-12.description.inverted.sub-header-title p {
			line-height: 1.85em;
			word-wrap: break-word;
			word-break: break-word;
		}

		@media (min-width: 768px) {
			.container {
				width: 750px;
			}
		}
		@media (min-width: 992px) {
			.container {
				width: 970px;
			}
		}
		@media (min-width: 1200px) {
			.container {
				width: 1170px;
			}
		}

		.reveal .controls .navigate-left {
    	top: -2.5em;
			left: -26.5em;
			position: absolute;
		}
		.reveal .controls .navigate-right {
    left: 2.5em;
    top: -2.5em;
		position: absolute;
		}
	</style>

</head>

<body class="">

	<!-- Page Content -->
	<div class="reveal">
		<div class="slides">

			<!-- Hero -->
			<section id="hero" data-background-color="rgba(51,51,51,0.95)" data-background="rgba(51,51,51,1)">
				<div class="container info" style="width:100%;margin-top:1.5em;">
					<!-- info content -->
					<div class="row info content" style="width:110%;height:3.75em;margin-left:-1.35em;">
						<p class="concept" style="font-family:'Futura', sans-serif;font-size:2.45em;letter-spacing: 0;line-height: 1.25em;margin:0;padding:0 0.25em;color: rgba(240, 248, 255, 1);width:100%;background:transparent;border:transparent;box-shadow:none;">
								<span style="animation: fadein 2s;transition: opacity 2s ease-in;">A </span>
								<span style="animation: fadein 4s;transition: opacity 4s ease-in;">Sports </span>
								<span style="animation: fadein 6s;transition: opacity 6s ease-in;">Fantasy </span>
								<span style="animation: fadein 8s;transition: opacity 8s ease-in;">App </span>
						</p>
					</div>
				</div>
			</section>
			<!-- #Hero -->

			<!-- Hero -->
			<section id="hero-bg" data-background="https://upload.wikimedia.org/wikipedia/commons/3/3b/Phenakistoscope_3g07692d.gif">
			</section>
			<!-- #Hero -->

			<!-- Sign In -->
			<section id="signin" class="app wires" data-background-iframe="proj/uxweb/signin.mp4" style="margin-top:-2.75em;width:160%;margin-left:-30%;">
			</section>
			<!-- #sign in -->

			<!-- invite -->
			<section id="invite" class="app invite" data-background-iframe="proj/uxweb/mailbox-invite.mp4"  style="width:140%;margin-left:-20%;">
			</section>
			<!-- #invite -->

			<!-- webapp -->
			<section id="webapp" class="app webapp" data-background-iframe="proj/uxweb/webapp-dashboard.mp4"  style="width:140%;margin-left:-20%;">
			</section>
			<!-- #webapp -->

		</div><!-- /.slides -->

		<!-- The navigational controls UI -->
		<aside class="controls">
			<button class="navigate-left" aria-label="previous slide" style="">
				<i class="fa fa-chevron-left btn" aria-hidden="true"></i>
			</button>
			<button class="navigate-right enabled" aria-label="next slide" style="">
				<i class="fa fa-chevron-right" aria-hidden="true"></i>
			</button>
			<button class="navigate-up" aria-label="above slide" style="background:transparent;border:transparent;">
				<i class="fa fa-chevron-up" aria-hidden="true"></i>
			</button>
			<button class="navigate-down" aria-label="below slide" style="background:transparent;border:transparent;">
				<i class="fa fa-chevron-down" aria-hidden="true"></i>
			</button>
		</aside>
		<!-- /.controls -->

		<!-- Custom Navigations -->
		<!-- Top Right Corner Hamburger -->
		<aside class="control-menu" style="">
			<a href="menu.html" data-preview-link>
				<img class="animated pulse" src="reveal/assets/img/plus.png" />
			</a>
		</aside>
		<!-- /.control-menu -->

	</div>
	<!-- /.reveal -->

  <!-- jQuery -->
	<script src="js/jquery.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="js/bootstrap.min.js"></script>

	<!-- Reveal JavaScript -->
	<script src="js/reveal/lib/head.min.js"></script>
	<script src="js/reveal/reveal.js"></script>
	<script src="js/reveal/bg-iframe.js"></script>

	<!-- Overlay -->
	<!--script src="reveal/lib/ven/overlay/modernizr.overlay.js"></script>
	<script src="reveal/lib/ven/overlay/classie.js"></script>
	<script src="reveal/lib/ven/overlay/overlay.js"></script-->

	<script>
		// Full list of configuration options available at:
		// https://github.com/hakimel/reveal.js#configuration
		Reveal.initialize({
			// Display controls in the bottom right corner
			controls: true,

			// Display a presentation progress bar
			progress: false,

			// If true; each slide will be pushed to the browser history
			history: true,

			center: true,

			// Loops the presentation, defaults to false
			loop: true,

			// Flags if mouse wheel navigation should be enabled
			mouseWheel: true,

			// Apply a 3D roll to links on hover
			rollingLinks: true,

			// UI style
			theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
			// theme: query.theme || 'default', // default/neon

			// Transition style
			transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/fade/none

			// Optional reveal.js plugins

			dependencies: [
				{
					src: 'reveal/lib/js/classList.js'
					, condition: function () {
						return !document.body.classList;
					}
				}
				, {
					src: 'reveal/plugin/markdown/marked.js'
					, condition: function () {
						return !!document.querySelector('[data-markdown]');
					}
				}
				, {
					src: 'reveal/plugin/markdown/markdown.js'
					, condition: function () {
						return !!document.querySelector('[data-markdown]');
					}
				}
					, //{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
				{
					src: 'reveal/plugin/zoom-js/zoom.js'
					, async: true
				}
				, /*{
					src: 'reveal/plugin/notes/notes.js'
					, async: true
				}
				,*/ {
					src: 'reveal/plugin/external/external.js'
					, async: true
				}
				, {
					src: 'reveal/plugin/wave/webcam-swiper-0.1.js'
					, async: true
				} //,
						// Chart.min.js
						// { src: 'plugin/reveal-chart/plugin/chartjs/Chart.min.js', async: true },
						// the plugin
						// { src: 'plugin/reveal-chart/plugin/chartjs/charted.js', async: true }
				]
		});
		/*
		Reveal.addEventListener("slidechanged",function(){
			setTimeout(function(){ // Needed because the charter.js isnt loaded and executed by that time.
				// To access them
				// The RevealChart contains iframe ids as properties (replacing '-' with '_')
				console.log(RevealChart.some_selector.canvas);
			},500);
		},false);
		*/
	</script>

</body>

</html>