diff --git a/audio/ocean-waves.mp3 b/audio/ocean-waves.mp3
new file mode 100644
index 0000000..a6118c8
Binary files /dev/null and b/audio/ocean-waves.mp3 differ
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..48abe70
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,89 @@
+body {
+ color: black;
+ text-align: center;
+ margin: auto;
+ font-size: 1em;
+ font-family: 'Raleway', sans-serif;
+}
+
+nav {
+ text-align: center;
+ background-color: black;
+ padding: 2% 0 0 0;
+}
+
+nav ul {
+ padding: 0 0 30px 0;
+ list-style: none;
+}
+
+nav li {
+ vertical-align: text-top;
+ display: inline-block;
+ margin: 0 -3px 0 0;
+}
+
+nav a {
+ padding: 15px 40px;
+ color: white;
+ text-decoration: none;
+}
+
+nav a:hover {
+ color: gray;
+}
+
+h1 {
+ font-size: 2em;
+ text-transform: uppercase;
+ margin: 2% 0 1% 0;
+}
+
+h2 {
+ font-size: 18px;
+ font-weight: normal;
+ margin: 1% 0 2% 0;
+}
+
+form fieldset {
+ border: none;
+ margin: auto;
+ background: #99CCFF;
+ border-style: dotted;
+ border-width: 3px;
+ border-radius: 5px;
+ line-height: 30px;
+ width: 60%;
+ padding-bottom: 1.5%;
+}
+
+form legend {
+ font-size: 24px;
+ font-weight: bold;
+ padding-bottom: 10px;
+}
+
+p {
+ line-height: 3em;
+}
+
+label {
+ padding: 0 1% 0 1%;
+}
+
+form button {
+ background: black;
+ border-color: white;
+ border-radius: 20px;
+ border-radius: 20px;
+ color: white;
+ display: block;
+ margin: auto;
+ padding: 6px 20px;
+ text-transform: uppercase;
+}
+
+form button:hover {
+ background: gray;
+ cursor: pointer;
+}
diff --git a/css/reset.css b/css/reset.css
new file mode 100755
index 0000000..af94440
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..5023d8d
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,72 @@
+body {
+ width: 100%;
+ margin: auto;
+ background-color: white;
+ font-size: 1em;
+ font-family: 'Raleway', sans-serif;
+}
+
+nav {
+ text-align: center;
+ background-color: black;
+ padding: 2% 0 0 0;
+}
+
+nav ul {
+ padding: 0 0 30px 0;
+ list-style: none;
+}
+
+nav li {
+ vertical-align: text-top;
+ display: inline-block;
+ margin: 0 -3px 0 0;
+}
+
+nav a {
+ padding: 15px 40px;
+ color: white;
+ text-decoration: none;
+}
+
+nav a:hover {
+ color: gray;
+}
+
+main {
+ overflow: hidden;
+ background: url("../img/beach.jpg");
+ margin: 3% 0 10% 0;
+}
+
+h1 {
+ text-align: center;
+ margin-top: 5%;
+ color: #51818;
+ font-size: 2em;
+ text-transform: uppercase;
+ letter-spacing: .05em;
+}
+
+video {
+ float: left;
+ margin: 12% 0 0 .5%;
+}
+
+canvas {
+ float: right;
+ margin: 3% 3% 3% 0;
+ padding: 3% 0 3% 0;
+}
+
+button {
+ float: left;
+ margin: 2% 0 0 3.25%;
+ width: 376px;
+ padding: 10px 0 10px 0;
+ background-color: black;
+ font-family: 'Raleway', sans-serif;
+ color: white;
+ font-size: 1.25em;
+ letter-spacing: .02em;
+}
diff --git a/css/video.css b/css/video.css
new file mode 100644
index 0000000..335a887
--- /dev/null
+++ b/css/video.css
@@ -0,0 +1,67 @@
+:-webkit-full-screen #myvideo {
+ width: 100%;
+ height: 100%;
+}
+
+body {
+ margin: auto;
+ font-family: 'Raleway', sans-serif;
+ font-size: 1em;
+}
+
+nav {
+ text-align: center;
+ background-color: black;
+ padding: 2% 0 0 0;
+ z-index: -100;
+ opacity: 0.8;
+}
+
+nav ul {
+ padding: 0 0 30px 0;
+ list-style: none;
+}
+
+nav li {
+ vertical-align: text-top;
+ display: inline-block;
+ margin: 0 -3px 0 0;
+}
+
+nav a {
+ padding: 15px 40px;
+ color: white;
+ text-decoration: none;
+}
+
+nav a:hover {
+ color: gray;
+}
+
+video {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ z-index: -99;
+ background: url('img/palm.png') no-repeat;
+ background-size: cover;
+}
+
+section {
+ background-color: white;
+ width: 30%;
+ opacity: 0.8;
+ margin: 10% 5% 0 20%;
+ padding: 2% 5% 2% 2%;
+ font-family: 'Raleway', sans-serif;
+}
+
+h1{
+ font-size: 1.5em;
+ text-transform: uppercase;
+ margin-bottom: 5%;
+}
diff --git a/form.html b/form.html
new file mode 100644
index 0000000..cf98716
--- /dev/null
+++ b/form.html
@@ -0,0 +1,51 @@
+
+
+
+
+ Contact Us
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/beach.jpg b/img/beach.jpg
new file mode 100644
index 0000000..ac02858
Binary files /dev/null and b/img/beach.jpg differ
diff --git a/img/palm.png b/img/palm.png
new file mode 100644
index 0000000..8557f5d
Binary files /dev/null and b/img/palm.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e2da8c9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+ Access your Camera
+
+
+
+
+
+
+
+
+
+ place yourself in paradise
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.jade b/index.jade
new file mode 100644
index 0000000..842335e
--- /dev/null
+++ b/index.jade
@@ -0,0 +1,53 @@
+!!! 5
+html (lang='en')
+ head
+ title On advertising
+ meta(charset='utf-8')
+ body
+ nav
+ ul
+ li
+ a(aria-labelledby='home', href='#') Home
+ li
+ a(aria-labelledby='reading', href='#') Reading
+ li
+ a(aria-labelledby='writing', href='#') Writing
+ li
+ a(aria-labelledby='about', href='#') About
+ header
+ img(src='#')
+ h1
+ | A working library collects reading and writing
+ em from
+ | Mandy Brown
+ main
+ time(datetime='2009-03-09') 09 MAR 09
+ h1 On advertising
+ article
+ p
+ | Let’s pretend, for a moment, that the reading experience on the web is dependent upon an advertising economy, that there is no other model for supporting reading save the ever more noisome sale of cellulite creams and cell phones, that our ingenuity has been so fully drained we cannot envision any other scenario by which capitalism and reading could coexist.
+ p
+ | Through this premise we find ourselves in a familiar conundrum: it is the reading experience that brings people to the web, thereby making them available to the siren song of the advertisers; but it is the advertisers, who, in their effort to gain purchase over ever more significant corners of our brains, must distract and diminish the reading experience lest they be ignored. The story goes that every so often an advertiser surprises with a particularly innovative method of annoyance, after which a certain amount of time passes and we learn—automatically, involuntarily—to tune them out.
+ p
+ | There is no end to this, in that short of eviscerating the content all together (and removing any impetus the reader might have to visit in the first place), our attention to the advertisements is always waning. Sadly, our attention elsewhere also suffers and declines; instead of staying still to read, we skitter from place to place, like frightened prey assured the predators are near. Okay
+ p
+ | So, let’s stop pretending, shall we? Any economy which charges ever less for ever more intrusive ads will eventually be successful not in creating wealth but in driving the readers away, until the only ones left to heed the ads are all the other ads, the cell phones searching in vain for a target market among the cellulite.
+ p
+ | Wasn’t the web supposed to be better than this? Wasn’t there a promise that we could generate money and meaning, not merely the former? I’m still looking; but when I find it I will part with every penny I have.
+ footer
+ h1 A working letter
+ p Occasional thoughts delivered to your inbox
+ input(type='email', value='email address', aria-labelledby='email address')
+ input(type='submit', value='subscribe')
+ ul(role='contentinfo')
+ li
+ a(href='#') RSS
+ li
+ a(href='#') Colophon
+ li
+ a(href='#') Copyright
+ | © 2008-2014 Mandy Brown
+ li
+ a(href='#') mandy@aworkinglibrary.com
+ li
+ a(href='#'') @aworkinglibrary
diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..388f9c2
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,34 @@
+window.addEventListener("DOMContentLoaded", function() {
+
+ var canvas = document.getElementById("canvas"),
+ context = canvas.getContext("2d"),
+ video = document.getElementById("video"),
+ videoObj = { "video": true },
+ errBack = function(error) {
+ console.log("Video capture error: ", error.code);
+ };
+
+ document.getElementById("snap").addEventListener("click", function() {
+ context.drawImage(video, 0, 0, 640, 480);
+});
+
+ if(navigator.getUserMedia) {
+ navigator.getUserMedia(videoObj, function(stream) {
+ video.src = stream;
+ video.play();
+ }, errBack);
+ } else if(navigator.webkitGetUserMedia) {
+
+ navigator.webkitGetUserMedia(videoObj, function(stream){
+ video.src = window.webkitURL.createObjectURL(stream);
+ video.play();
+ }, errBack);
+ }
+ else if(navigator.mozGetUserMedia) {
+ navigator.mozGetUserMedia(videoObj, function(stream){
+ video.src = window.URL.createObjectURL(stream);
+ video.play();
+ }, errBack);
+ }
+
+}, false);
diff --git a/js/localstorageform.js b/js/localstorageform.js
new file mode 100644
index 0000000..eafcc32
--- /dev/null
+++ b/js/localstorageform.js
@@ -0,0 +1,29 @@
+var firstname = document.getElementById('first-name');
+var lastname = document.getElementById('last-name');
+var email = document.getElementById('email');
+var phone = document.getElementById('phone');
+var textbox = document.getElementById('textbox');
+
+firstname.value = localStorage.getItem('first-name');
+lastname.value = localStorage.getItem('last-name');
+email.value = localStorage.getItem('email');
+phone.value = localStorage.getItem('phone');
+textbox.value = localStorage.getItem('textbox');
+
+firstname.addEventListener('input', function () {
+ localStorage.setItem('first-name', firstname.value);
+}, false);
+
+lastname.addEventListener('input', function () {
+ localStorage.setItem('last-name', lastname.value);
+}, false);
+
+email.addEventListener('input', function () {
+ localStorage.setItem('email', email.value);
+}, false);
+
+phone.addEventListener('input', function () { localStorage.setItem('phone', phone.value);
+}, false);
+
+textbox.addEventListener('input', function () { localStorage.setItem('textbox', textbox.value);
+}, false);
diff --git a/js/video.js b/js/video.js
new file mode 100644
index 0000000..c3dae44
--- /dev/null
+++ b/js/video.js
@@ -0,0 +1,10 @@
+var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+ elem.requestFullscreen();
+} else if (elem.msRequestFullscreen) {
+ elem.msRequestFullscreen();
+} else if (elem.mozRequestFullScreen) {
+ elem.mozRequestFullScreen();
+} else if (elem.webkitRequestFullscreen) {
+ elem.webkitRequestFullscreen();
+}
diff --git a/readmemd.md b/readmemd.md
new file mode 100644
index 0000000..97f3bfa
--- /dev/null
+++ b/readmemd.md
@@ -0,0 +1,20 @@
+# HTML 5 as a Platform
+#### By Marissa and Monica
+
+
+## Overview
+
+This web application has three different sections:
+
+1. Camera access: access your camera through this application and place yourself on the beach
+2. Video: Check out a video of the beach accompanied with the sounds of waves
+3. Contact form with audio: Contact the "resort" (creators of the website) with a form. Local storage is also used to make sure the user does not lose any information.
+
+### Collaborators
+Marissa Felitto and Monica Davidson
+
+#### Sources
+http://www.w3schools.com
+http://www.anotheruiguy.com
+http://www.colorpicker.com
+http://codepen.io/dudleystorey/pen/knqyK
\ No newline at end of file
diff --git a/video.html b/video.html
new file mode 100644
index 0000000..6455a63
--- /dev/null
+++ b/video.html
@@ -0,0 +1,46 @@
+
+
+
+
+ Welcome
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Welcome
+ Come visit us at M&M Island!
+
+
+
+
+
+
diff --git a/video/video.mp4 b/video/video.mp4
new file mode 100644
index 0000000..14d7aaa
Binary files /dev/null and b/video/video.mp4 differ
diff --git a/video/video.webm b/video/video.webm
new file mode 100644
index 0000000..8557f5d
Binary files /dev/null and b/video/video.webm differ