Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sheyna and Loann's HTML platform #14

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
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
74 changes: 74 additions & 0 deletions SheynaLoann/Camera.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>Sheyna and Loann</title>
<meta name="viewport" content="width=device-width">

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

Copy link
Contributor

Choose a reason for hiding this comment

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

Adding unnecessary lines makes it harder to read. Please clean up all the extra empty lines throughout this document.

</head>

Copy link
Contributor

Choose a reason for hiding this comment

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

remove this line.

<body>

<!--header-->

<header class="main-header col span_3_of_3">
<nav class="main-nav">
<h1>Music Swap</h1>
<ul>
<li><a href="index.html">Latest News</a></li>
<li><a href="#">Collaborations</a></li>
<li><a href="#">New Artists</a></li>
<li><a href="#">Log In</a></li>
<li><a href="Profile.html">Sign Up</a></li>
</ul>
</nav>
</header>

<header class="main-nav col span_3_of_3">
<h2>Take a Profile Picture</h2>
</header>

<!--main-->

<main class="profile section group">

<!--profile image column at right-->

<section class="camera col span_1_of_3">
<h2 hidden>Input</h2>
<div id="webcam" class="cameraPic"></div>
</section>

<section class="camera col span_1_of_3">
<h2 hidden>Output</h2>
<canvas id="canvas" class="cameraPic"></canvas>

<menu>
<button id="takeSnapshot" class="center">Take Snapshot</button>
</menu>
</section>

</main>

<br class="breaker" />

<!--footer-->

<section class="col span_3_of_3">
<footer class="main-footer section group">
<footnote><strong>Students: Sheyna and Loann</strong><footnote>
</footer>
</section>


<script src="js/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/getUserMedia.js"> </script>
<script src="js/snapShot.js"> </script>

</body>
</html>
124 changes: 124 additions & 0 deletions SheynaLoann/Index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
Copy link
Contributor

Choose a reason for hiding this comment

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

Please properly indent everything in this document.

<html>
<head>
Copy link
Contributor

Choose a reason for hiding this comment

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

The tags in the head need to be indented.

<title>Sheyna and Loann</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
</head>

<body>

<!--logo-->

<header class="main-header col span_3_of_3">
<nav class="main-nav">
<h1>Music Swap</h1>
<ul>
<li><a href="#">Latest News</a></li>
<li><a href="#">Collaborations</a></li>
<li><a href="#">New Artists</a></li>
<li><a href="#">Log In</a></li>
<li><a href="Profile.html">Sign Up</a></li>
</ul>
</nav>
</header>

<!--album 1-->


<div class="col span_3_of_3">

<section class="col span_1_of_3">

<figure>
<img class="album1" src="images/cover.jpg" alt="album"/>

<audio id="music" preload="true">
<source src="http://tinysong.com/1hr8j"></audio>

<div id="audioplayer"><button id="pButton" class="play" onclick="play()"></button></div>

<span class="artist-title"><h5>Artist<h5></span>
<span class="video-title"><h5>Song Title<h5></span>
<span class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eros orci, luctus et turpis at, feugiat commodo nisl. Vivamus varius.</p>
</figure>
</section>


<!--album 2 -->

<section class="audio col span_1_of_3">

<figure>
<img class="album" src="images/cover.jpg" alt="album"/>

<audio id="music" controls="controls">
<source src="video/audio.mp4" type="audio/mp4">
</audio>

<span class="artist-title"><h5>Artist<h5></span>
<span class="video-title"><h5>Song Title<h5></span>
<span class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eros orci, luctus et turpis at, feugiat commodo nisl. Vivamus varius.</p>
</figure>
</section>

<!--album-->


<section class="audio col span_1_of_3">

<figure>
<img class="album" src="images/cover.jpg" alt="album"/>

<audio id="music" controls="controls"><source src="video/audio.mp4" type="audio/mp4"></audio>
<span class="artist-title"><h5>Artist<h5></span>
<span class="video-title"><h5>Song Title<h5></span>
<span class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eros orci, luctus et turpis at, feugiat commodo nisl. Vivamus varius.</p>
</figure>
</section>

</div>

<!--video player-->

<article class="video wrapper span_8_of_8">

<div class="player col span_5_of_8">
<video id="video" controls>
<source src="video/test.mp4" type="video/mp4">
<div id="video controls">
<!--play/pause control-->
<button type="button" id="play-pause">Play</button>
<!--vol control-->
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
<!--fullscreen control-->
<button type="button" id="full-screen">Full-Screen</button>
</div>
</div>

<!--video information-->

<section class="info col span_3_of_8">
<span class="artist-title"><h5>Artist<h5></span>
<span class="video-title"><h5>Song Title<h5></span>
<span class="description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eros orci, luctus et turpis at, feugiat commodo nisl. Vivamus varius.</p>
</section>
</article>

<br class="breaker" />

<!--
<footer class="main-footer section group">
<section class="col span_3_of_3">
<footnote><a href="#"><strong>Students: Sheyna and Loann</strong><footnote>
</section>
</footer>
-->

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

</body>

</html>
Loading