Commit 7169b89f authored by Porter Libby's avatar Porter Libby
Browse files

start updating frame to match dana's blueprint

parent 377983f9
......@@ -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>
......
.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
......@@ -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;
......
......@@ -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", "");
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment