Zipcoder
diff --git a/‎css/style.css‎
Lines changed: 118 additions & 0 deletions b/‎css/style.css‎
Lines changed: 118 additions & 0 deletions
diff --git a/‎images/logos/js_logo.png‎
5.69 KB b/‎images/logos/js_logo.png‎
5.69 KB
diff --git a/‎images/logos/spring_logo.png‎
10.7 KB b/‎images/logos/spring_logo.png‎
10.7 KB
diff --git a/‎images/logos/zip_logo.jpg‎
57 KB b/‎images/logos/zip_logo.jpg‎
57 KB
diff --git a/‎index.html‎
Lines changed: 29 additions & 0 deletions b/‎index.html‎
Lines changed: 29 additions & 0 deletions
@@ -0,0 +1,118 @@
+/* ZipcodeWilmington 2015 */
+
+/* ===================================== FONTS ========================================= */
+@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
+
+
+/* ===================================== GLOBAL STYLE ========================================= */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body { font: 14px/1.4 arial, sans-serif; background-color: #F5F5F5;);}
+
+article, aside, figure, footer, header, nav, section { display: block; }
+a:link, a:visited {
+    text-decoration: none;
+
+    color: inherit;
+}
+
+a:hover, a:active {
+    text-decoration: none;
+
+    color: inherit;
+}
+
+.group:before,
+.group:after {
+    content:"";
+    display:table;
+}
+.group:after {
+    clear:both;
+}
+.group {
+    zoom:1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+#main:focus {
+    outline: none;
+}
+
+
+/* ===================================== HEADER STYLE ========================================= */
+
+.main-header {
+    width: 100%;
+    height: 150px;
+    
+    background-color: #144e64;}
+
+.main-header .title {
+    float: left;
+    text-transform: uppercase;
+
+    font-family: 'Droid Sans', sans-serif;
+    font-weight: 400;
+    font-size: 1em;
+
+    width: 55%;
+
+    padding-left: 5%;
+
+    color: #fff;
+
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.main-header .zip-link {
+    float: right;
+
+    width: 16%;
+    height: 100%;
+
+    background-color: white;
+}
+
+.main-header .lesson-link {
+    float: right;
+
+    width: 16%;
+    height: 100%;
+
+    background-color: #3c790a;
+}
+
+.main-header div {
+    /* fix blurriness of children due to them
+       being placed on half pixels */
+    -webkit-transform-style: preserve-3d;
+    -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+}
+
+.main-header div img {
+    display: block;
+
+    margin: auto;
+
+    width: 55%;
+
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* page styles */
+article {margin: 5%;}
+article p { margin-bottom: 20px;}
+section {margin: 5%;}
+h1 {font-weight: bold;}
+#result {border: 1px #aaa solid; padding:10px; height:30px; background:#eee;}
+
+
+
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="./css/style.css" type="text/css" rel="stylesheet">
+    <title>Morse Code Translator | Zipcode Wilmington</title>
+</head>
+<body>
+    <header class="main-header group">
+        <div class="title"><h1>Zipcode Wilmington<br>Javascript Lab - Spring 2016</h1></div>
+        <div class="lesson-link"><img src="./images/logos/js_logo.png" alt="Javascript"/></div>
+        <div class="zip-link"><img src="./images/logos/zip_logo.jpg" alt="Zipcode Wilmington"/></div>
+    </header>
+
+    <article>
+	    <h1>Instructions</h1>
+		<p>Write a program that converts English text to Morse code. Use <code>prompt()</code> to recieve user input and <code>conole.log()</code> to display output. Code using '.' for a dot, '-' or '_' for a dash, separating letters by spaces and words by '/' or '|'.</p>
+		<p>The program should be able to convert strings consisting of A-Z, 0-9, and basic punctuation.</p>
+		<p>Use <code>document.getElementById('result').innerHTML = <i>your_output</i>;</code> to write program output to page.</p>
+	</article>
+
+    <section>
+    	<h1>Translation</h1>
+    	<div id="result"></div>
+    </section>
+
+ 	<script type="text/javascript" src="js/morse.js"></script>
+</body>
+</html>