start updating frame to match dana's blueprint

index.html

@@ -26,6 +26,7 @@
         <link rel="apple-touch-icon" href="icon.png">
         <link rel="stylesheet" href="publiic/css/fonts.css">
         <link rel="stylesheet" href="public/css/keyb.css">
+        <link rel="stylesheet" href="public/css/input.css">
         <link rel="stylesheet" href="public/css/main.css">
         
         <!-- LOCAL JS -->
@@ -122,11 +123,15 @@
             <!-- Block 1 -->
             <div class='block' id="block1">
                 
-                <div style='position:absolute' id='search_parent'>
-                    <span class='section-prompt'></br>1. Type the name of a major you are interested in</span>
+                <div style='position:absolute' id='search_parent' >
+                    <span class='section-prompt'></br>1. What major are you interested in?</span>
+                </div>
+                <div style='position:absolute; left:30%; margin-top:200px;font-size:20px;'>
+                    <span>Not sure? See <mark><a href='https://earlham.edu/academics/majors-minors/'>full list</a></mark></span>
                 </div>
                 <script>
                     var parent = document.getElementById('search_parent');
+                    
                     create_searchbar(parent,'major_selection');
                     if (('ontouchstart' in document.documentElement)){
                         $("#search_parent #searchbar").keyboard({
@@ -175,6 +180,25 @@
             <!-- Block 3 -->
             <div class='block' id="block3">
                 <span class='section-prompt'>3. What would you like to do for fun?</span>
+                <div>
+                    <input type="checkbox" id="campuslife1" name="campuslife1" value="campuslife1">
+                    <label for="campuslife1"> option 1</label><br>
+
+                    <input type="checkbox" id="campuslife2" name="campuslife2" value="campuslife2">
+                    <label for="campuslife2"> option 2</label><br>
+
+                    <input type="checkbox" id="campuslife3" name="campuslife3" value="campuslife3">
+                    <label for="campuslife3"> option 3</label><br>
+
+                    <input type="checkbox" id="campuslife4" name="campuslife4" value="campuslife4">
+                    <label for="campuslife4"> option 4</label><br>
+
+                    <input type="checkbox" id="campuslife5" name="campuslife5" value="campuslife5">
+                    <label for="campuslife5"> option 5</label><br>
+                </div>
+                <div>
+
+                </div>
             </div>
 
             <!-- Block 4 -->
@@ -184,9 +208,17 @@
                 <div class='inner-nav'> <!-- Nav options for this block -->
                     <button type="button" class="btn btn-labeled btn-dark btn-explore">
                         <span class="btn-label"><i class="fa fa-globe"></i></span><br> Explore</button>
+                </div>
+            </div>
+
+            <!-- Block 5 -->
+            <div class='block' id="block5">
+                <span class='section-prompt'>4. What would you like to become?</span>
+                <br>
+                <div class='inner-nav'> <!-- Nav options for this block -->
 
                     <button type="button" class="btn btn-labeled btn-dark btn-finish">
-                        <span class="btn-label"><i class="fa fa-check"></i></span><br> Finish!</button>
+                        <span class="btn-label"><i class="fa fa-check"></i></span><br> Finish and see results!</button>
                 </div>
             </div>
         </div>

public/css/input.css

+ 
+
+.wrapper {
+    background-color: #FFF;
+    border-radius: 2px;
+    box-shadow: 0px 2px 1px 0px #DDD;
+    box-sizing: border-box;
+    height: 300px;
+    left: 50%;
+    margin: -150px 0 0 -150px;
+    position: absolute;
+    top: 50%;
+    width: 300px;
+  }
+  input {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    border-bottom: 2px solid #6F263D;
+  }
\ No newline at end of file

public/css/main.css

@@ -20,6 +20,7 @@ body{
     width: 100%;
     height: 100%;
     font-family: Sentinel-Light;
+    color: #6F263D;
 }
 .fa{
     font-size: 25px;
@@ -39,6 +40,8 @@ body{
 }
 #searchbar{
     width: 50%;
+    font-size: 20px;
+
 }
 #searchbarautocomplete-list{
     cursor: pointer;
@@ -76,7 +79,7 @@ body{
     text-align: center;
 }
 .section-prompt{
-    font-size: 25px;
+    font-size: 30px;
     font-family: Sentinel-Semibold;
     padding: 40px 20px;
 

public/js/searchBar.js

@@ -10,6 +10,7 @@ function create_searchbar(parent, key){
     search_container.classList = "";
     var search = document.createElement("INPUT");
     search.id = 'searchbar'
+    search.placeholder = "e.g. Computer Science";
     search.classList = "";
     search.setAttribute("type", "text");
     search.setAttribute("value", "");