Added steps on homepage

nomadkaraoke · Aug 8, 2019 · 90d963e · 90d963e
1 parent 3b44d34
commit 90d963e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,31 @@ <h1>Vocal Range Detector</h1>
   <body>
     <p id="determine">Determine your vocal range.</p>
     <button id="begin" onclick="location.href = 'first-step.html'">Begin!</button>
+    <br>
+    <br>
+    <br>
+    <div id="steps">
+      <p><u>Steps</u></p>
+      <ol>
+        <li>Base Note</li>
+          <ul>
+            <li>Sing a comfortable note near the middle of your voice range</li>
+          </ul>
+        <br>
+        <li>Sing Higher</li>
+          <ul>
+            <li>Sing from your base note to the top of your vocal range</li>
+          </ul>
+        <br>
+        <li>Sing Lower</li>
+          <ul>
+            <li>Sing from your base note to the bottom of your vocal range</li>
+          </ul>
+      </ol>
+      <br>
+      <br>
+      <br>
+    </div>
   </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -32,3 +32,19 @@ button:active {
   box-shadow: 0 3px #666;
   transform: translateY(4px);
 }
+li {
+  text-align: left; 
+  font-size: 20px;
+}
+ol {
+  display: table;
+  margin: 0 auto;
+}
+#steps {
+  border: 3px;
+  border-style: solid;
+  border-radius: 50px;
+  margin-left: 100px;
+  margin-right: 100px;
+  background-color: #78BF81;
+}