Embedded media branch

css/main.css

@@ -1,10 +1,74 @@
-/******************************************************************************
- * WATS1010: Introduction to Web Development
- * Embedded Media Assignment
- *
- * Site Styles
- *****************************************************************************/
-
- html {
-     color: green;
- }
+/* Main CSS file */
+html {
+padding: 0;
+}
+body {
+font-family: Areal, Helvetica, Sanserif; size: 12:px;
+margin-top:0;
+}
+header {
+ height: 400px; 
+  background-image: URL(../img/monkey_flight.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: cover;
+}
+
+section {
+width: 960px;
+}
+nav {
+
+}
+.main-nav {
+font-weight: bold; 
+}
+.main-nav li {
+ background-color: none; display: inline; padding: .2em 1em; 
+}
+.main-nav li a{
+color: white; text-decoration: none;
+}
+
+
+
+#social {
+background: pink;
+position: absolute;
+top: 50px;
+right: 0;
+width: 25px;
+transition: 2s width;
+}
+#social:hover {
+width: 250px;
+}
+#social ul {
+list-style-type: none;
+padding: 0;
+}
+#social li {
+margin: 0;
+padding: 0;
+}
+h1 {
+size: 24px; color: pink;
+}
+.download-button {
+font-weight: bold;
+}
+ul {
+width: 100%; 
+}
+.weybec-people li{
+ display: inline; float: left; padding: 1em; margin-bottom: 10px;
+}
+.weybec-people img{
+max-width: 200px; 
+}
+
+footer {
+height: 200px; padding-top: 20px;
+background-image: URL(../img/monkaa_title.jpg);
+margin-bottom: 0;
+}

index.html

@@ -8,7 +8,7 @@
         <meta name="description" content="Monkaa is a blue-furred, pink-faced monkey who consumes a crystallized meteorite, making him invincibly strong and too hot to handle. Watch and download the animated short film here--for free!">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- TODO: Make a favicon that better represents the page. -->
-        <link rel="shortcut icon" href="favicon.ico">
+        <link rel="shortcut icon" href="img/favicon.ico">
         <link rel="stylesheet" href="css/main.css">
     </head>
 
@@ -52,7 +52,10 @@ <h2>Share</h2>
             <h2>Watch</h2>
             <!-- TODO: Embed the .webm and .mp4 video with full controls for a
                  convenient and attractive video viewing experience. -->
-
+            <video controls poster="media/video/video_poster.png">
+			<source src="media/video/monkaa_1080p-1.mp4" type="video/mp4">
+			<source src="media/video/monkaa_1080p-1.webm" type="video/webm">
+			</video>
             <!-- TODO: Style an elegant download link to download the video. -->
             <h3>Download the video</h3>
             <p>
@@ -67,7 +70,10 @@ <h3>Download the video</h3>
             <h2>Listen</h2>
             <!-- TODO: Embed an audio player so users can play back the
                  soundtrack MP3 directly on the page. -->
-
+               <audio controls >
+			<source src="media/audio/monkaa_soundtrack.mp3" type="audio/mp3">
+			Audio not supported by your browser.
+			</audio>
             <!-- TODO: Style an elegant download link to download the video. -->
             <p>
                 <a class="download-button" href="media/audio/monkaa_soundtrack.mp3">Download as MP3</a>
@@ -86,17 +92,17 @@ <h2>About</h2>
                      each headshot below. Images are located in the
                      ``img/weybec/`` directory. -->
                 <li>
-                    <img class="headshot" src="TODO" alt="Pratik Solanki headshot"><br>
+                    <img class="headshot" src="img/weybec/pratik_solanki.jpg" alt="Pratik Solanki headshot"><br>
                     Pratik Solanki<br>
                     Co-Founder
                 </li>
                 <li>
-                    <img class="headshot" src="TODO" alt="Nita Ravalji headshot"><br>
+                    <img class="headshot" src="img/weybec/Nita-ravalji1.jpg" alt="Nita Ravalji headshot"><br>
                     Nita Ravalji<br>
                     Co-Founder
                 </li>
                 <li>
-                    <img class="headshot" src="TODO" alt="Niyal Parmar headshot"><br>
+                    <img class="headshot" src="img/weybec/niyal_parmar.jpg" alt="Niyal Parmar headshot"><br>
                     Niyal Parmar<br>
                     Co-Founder
                 </li>