HTML5 as platform

.gitignore

@@ -0,0 +1 @@
+*.mp4

README.md

@@ -0,0 +1,4 @@
+#HTML5 as a platform
+##By Emmanuel Santos and Ben Spears.
+
+We have created a mock up for a home page on a site that would be a subscription based music **video** service. This page shows the use of the html5 video element with an autoplay feature which is also muted with no controls, so it can be used as a background for the site. The account creation link leads to a form to fill out, which uses validation to make sure each field is completed, as well as the correct semantic meaning for each type of input field.

css/layout.css

@@ -0,0 +1,56 @@
+body{
+  background: rgb(36, 52, 41);
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  font-family: 'Gruppo', cursive;
+  margin: 0rem;
+  -moz-background-size:cover;
+  -webkit-background-size:cover;
+}
+
+header[role="banner"]{
+  background-color: rgba(127, 171, 141, 0.96);
+  box-shadow: 0 0 0.9rem rgb(86, 100, 90);
+  left: 0rem;
+  position: fixed;
+  top: 0rem;
+  z-index: 10000;
+}
+
+nav  ul{
+  bottom: 0rem;
+  color: white;
+  position: absolute;
+  right: 0rem;
+}
+
+nav  ul  li{
+  display: inline;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+}
+nav  ul  li:hover{
+  color: black;
+  cursor: pointer;
+  transition: color 0.5s;
+}
+
+.el-footer{
+  background-color: rgba(127, 171, 141, 1);
+  bottom: 0rem;
+  left: 0rem;
+  padding: 0.1rem 0 0.1rem 0;
+  position: fixed;
+  z-index: 10000;
+}
+
+.el-footer p{
+  color: white;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.feat-box{
+  width: 100%;
+}

css/module.css

@@ -0,0 +1,127 @@
+.main-logo{
+  color: white;
+  font-size: 3rem;
+  padding: 0 0 0.5rem 0.4rem;
+}
+
+section{
+  margin-top: -20rem;
+}
+
+/*Form*/
+
+form{
+  bottom: 10.9rem;
+  left: 32rem;
+  position: fixed;
+  width: 100%;
+  visibility: hidden;
+}
+
+select,
+input,
+label{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.3rem;
+  text-align: center;
+}
+
+fieldset{
+  background-color: rgba(198, 229, 198, 0.93);
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  box-shadow: 0 0 2rem rgb(86, 100, 90);
+  width: 20%;
+}
+
+fieldset p{
+  text-align: center;
+  margin: 0.5rem 0 0.5rem 0.3rem;
+}
+
+legend{
+  background: white;
+  border-top-right-radius: 0.5rem;
+  color: rgb(18, 18, 39);
+  padding: 0.6rem;
+}
+
+
+input[type="submit"]{
+  margin-top: 0.5rem;
+}
+
+button{
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 0.2rem;
+  margin-top: 0.4rem;
+}
+
+#show-R-Form{
+  background-color: rgb(127, 171, 141);
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5rem rgb(86, 100, 90);
+  color: azure;
+  font-size: 1.5rem;
+  position: absolute;
+  right: 36.5rem;
+  text-align: center;
+  top: 25rem;
+  width: 10%;
+  z-index: 9999;
+}
+#show-R-Form:hover{
+  box-shadow: 0 0 1rem rgb(86, 100, 90);;
+  color: black;
+  cursor: pointer;
+  transition: color 0.5s, box-shadow 0.5s;
+}
+
+video{
+  color: white;
+  background-size: cover;
+  bottom: 0rem;
+  min-height: 100%;
+  min-width: 100%;
+  position: absolute;
+  right: 0rem;
+  width: auto;
+  z-index: -100;
+}
+
+.serviceInfo{
+  background-color: rgb(36, 52, 41);
+  bottom: 0rem;
+  color: white;
+  font-size: 2.2rem;
+  height: 10rem;
+  padding-top: 0.5rem;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.info-tag{
+  color: azure;
+  font-size: 1.2rem;
+  margin-left: 0.3rem;
+  text-align: center;
+}
+
+.tagLine{
+  color: white;
+  font-size: 5rem;
+  margin-top: 28rem;
+  text-align: center;
+  z-index: 100;
+}
+
+.orangeB{
+  color: orange;
+}
+
+

css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+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, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+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;
+}

index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>MyVidz</title>
+    <link rel="stylesheet" type="text/css" href="css/reset.css">
+    <link rel="stylesheet" type="text/css" href="css/layout.css">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/module.css">
+    <link href='http://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <header role="banner" class="feat-box">
+      <h1 class="main-logo">My Vidz</h1>
+      <nav>
+        <ul role="list">
+          <li>Menu</li>
+          <li>About</li>
+          <li>Login</li>
+        </ul>
+      </nav>
+    </header>
+    <div id="alert-box">
+      <h4 role="alert">Register to get free email notifications</h4>
+    </div>
+    <section>
+      <h1 class="tagLine">Have Access to your favorite Videos</h1>
+      <div role="button">
+        <p id="show-R-Form">Register Now</p>
+      </div>
+      <video id="bgvid" autoplay="autoplay" muted="muted">
+        <source src="videos/video.mp4" type="video/mp4">
+        <p>Sorry, this video isn't compatible with your Browser. Please Download Chrome.</p>
+      </video>
+    </section>
+    <section class="serviceInfo">
+      <hgroup>
+        <h1>Be the first to know what your favorite Artist is up to.</h1>
+        <h3 class="info-tag">Sign up to recieve updates whenever a new video is posted to our Website.<br> You can also recieve free <span class="orangeB">downloads</span> and access to more <span class="orangeB">videos</span>.</h3>
+      <hgroup>
+    </section>
+    <form id="register-form">
+      <fieldset role="main">
+        <legend>Register For Free</legend>
+          <label for="first-name">First Name</label>
+          <input type="text" id="first-name" required aria-required="true" maxlength="15">
+          <label for="last-name">Last Name</label>
+          <input type="text" id="last-name" required aria-required="true" maxlength="10">
+          <label for="email">E-mail</label>
+          <input type="email" id="email" required aria-required="true">
+          <label for="password">Password</label>
+          <input type="password" id="password" require aria-required="true">
+          <label for="phone">Telephone #</label>
+          <input type="tel" id="phone" required aria-required="true" maxlength="13">
+          <p>Optional:</p>
+          <select name="gender">
+            <option value="male">Male</option>
+            <option value="female">Female</option>
+          </select>
+          <input  type="submit" name="Register">
+          <button id="hide-form">Exit</button>
+      </fieldset>
+    </form>
+    <footer class="el-footer feat-box">
+      <p>&copy;Mini Website. All Rights Reserved</p>
+    </footer>
+    <script src="js/jquery-1.11.2.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>

js/main.js

@@ -0,0 +1,15 @@
+var showForm = function(){
+  var registerForm = document.getElementById('register-form');
+  registerForm.style.visibility = "visible";
+};
+
+document.getElementById('show-R-Form').addEventListener('click', showForm, false);
+
+$('#show-R-Form').on('click', function(){
+  $(this).fadeOut();
+});
+
+$('#hide-form').on('click', function(e){
+  $('#register-form').fadeOut();
+  e.preventDefault();
+});