done

.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/base.css

@@ -0,0 +1,51 @@
+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;
+}
+
+/*base styles*/
+body{
+  background: white;
+  font-family: 'Gruppo';
+  text-align: center;
+}

css/layout.css

@@ -0,0 +1,62 @@
+header{
+  background-color: rgb(127, 171, 141);
+  left: 0;
+  text-align: left;
+  top: 0;
+  position: fixed;
+  z-index: 200;
+  color: white;
+}
+
+footer{
+  background-color: rgb(127, 171, 141);
+  bottom: 0;
+  left: 0;
+  padding: 0.1em 0 0.1em 0;
+  position: fixed;
+  z-index: 100;
+}
+
+footer p{
+  color: white;
+  font-size: 1.2em;
+}
+
+.center-box{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.content-container{
+  position: absolute;
+  background-size: cover;
+  bottom: 0rem;
+  min-height: 100%;
+  min-width: 100%;
+  right: 0rem;
+  width: auto;
+}
+
+.account-page{
+  overflow: hidden;
+  color: black;
+  position: relative;
+  top: 5em;
+  z-index: -1;
+}
+
+.smallVideo{
+  min-width: 30%;
+  width: 30%;
+}
+
+.share-box{
+  margin: 0 auto;
+  margin-top: 2em;
+  width: 20%;
+}
+
+.video-box{
+  margin-top: 10em;
+}
+

css/mediaq.css

@@ -0,0 +1,132 @@
+/*DESKTOP*//*DESKTOP*//*DESKTOP*//*DESKTOP
+@media (max-width: 900px){
+}
+/*TABLET*//*TABLET*//*TABLET*//*TABLET*/
+@media (max-width: 1100px){
+  ul{
+    font-size: 1.2em;
+  }
+
+  .tagLine{
+    font-size: 2.9em;
+  }
+
+  .registerButton{
+    font-size: 1.5em;
+    width: 40%;
+    padding: 0.6em;
+  }
+
+  .serviceInfo{
+    font-size: 2em;
+    height: auto;
+    top: 2.2em;
+    margin-top: 10.4em;
+    margin-bottom: 1em;
+  }
+
+  .orange-text{
+    font-size: 1em;
+  }
+
+  form{
+    bottom: 5.5em;
+    left: 0;
+    margin-left: 8.3em;
+  }
+
+  fieldset{
+    width: 60%;
+  }
+
+  input{
+    border: 2px solid white;
+    width: 60%;
+  }
+
+  footer{
+    height: 2em;
+  }
+
+  .orange-text{
+    font-size: 1.4em;
+  }
+}
+/*MOBILE*//*MOBILE*//*MOBILE*//*MOBILE*/
+@media (max-width: 600px){
+
+  header{
+    padding-bottom: .7em;
+    text-align: center;
+  }
+
+  ul{
+    font-size: 1.1em;
+    margin-top: 1em;
+    margin-right: 2.5em;
+  }
+
+  .tagLine{
+    color: black;
+    font-size: 2.5rem;
+  }
+
+  .registerButton{
+    width: 70%;
+    padding: 0.6em;
+  }
+
+  .serviceInfo{
+    font-size: 1.8em;
+    height: auto;
+    top: 2.2em;
+    margin-top: 10em;
+  }
+
+  .over-video{
+    margin-top: -21rem;
+    background: rgba(255, 255, 255, 0.13);
+    width: 100%;
+    height: 15em;
+  }
+
+  .info-tag{
+    font-size: 0.9em;
+    margin-top: 2em;
+  }
+
+  .orange-text{
+    font-size: 1em;
+  }
+
+  form{
+    bottom: 12em;
+    left: -6em;
+    z-index: 101;
+  }
+
+  fieldset{
+    width: 80%;
+  }
+
+  input{
+    border: 2px solid white;
+    width: 60%;
+  }
+
+  input[type="submit"]{
+    border-radius: .5em;
+    width: 20%;
+  }
+
+  button{
+    border: none;
+    border-radius: .5em;
+    padding: .2em;
+    width: 20%;
+  }
+
+  footer{
+    height: 1.6em;
+  }
+}