Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added audio/ocean-waves.mp3
Binary file not shown.
89 changes: 89 additions & 0 deletions css/layout.css
Original file line number Diff line number Diff line change
@@ -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;
}
48 changes: 48 additions & 0 deletions css/reset.css
Original file line number Diff line number Diff line change
@@ -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;
}
72 changes: 72 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
67 changes: 67 additions & 0 deletions css/video.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
:-webkit-full-screen #myvideo {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the properties in this document are double indented. Please fix.

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%;
}
51 changes: 51 additions & 0 deletions form.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Contact Us</title>

<link rel="stylesheet" href="css/reset.css">
<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="video.html">About</a></li>
<li><a href="form.html">Contact</a></li>
</ul>
</nav>
</header>

<form id="contact">
<h1>Contact Us</h1>
<h2>Want more information on our resort? Give us your contact info below!</h2>
<fieldset>
<legend>User Information</legend>

<p><label for="first-name">First Name</label>
<input id="first-name" name="first-name" type="text" placeholder="First Name" required autofocus>

<label for="last-name">Last Name</label>
<input id="last-name" name="last-name" type="text" placeholder="Last Name" required autofocus></p>

<p><label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Email" required autofocus></p>

<p><label for="phone">Phone Number</label>
<input id="phone" name="phone" type="tel" placeholder="Ex: 123-456-78910" maxlength="12"required pattern="^[0-9]+[\- ]*[0-9]+$" autofocus></p>

<p><label for="textbox">Where are you from?</label>
<input id="textbox" name="textbox" type="text" placeholder="City, State, Country" required autofocus></p>

<button type=submit id="submit" value="submit">Submit</button>
</fieldset>
</form>

<script src='js/localstorageform.js' type='text/javascript'></script>

</body>
</html>
Binary file added img/beach.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/palm.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>Access your Camera</title>

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="video.html">About</a></li>
<li><a href="form.html">Contact</a></li>
</ul>
</nav>
<h1>place yourself in paradise</h1>
</header>

<main id="main">
<video id="video" width="440" height="280" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap">Snap Photo</button>
</main>

<script src="js/camera.js"></script>

</body>
</html>
Loading