Help Matcher App

by abbylangner

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="appcontainer">
    </div>
    <div id="index">
      <nav id="mainnav">
        <a href="index">Home</a>
        <a href="account">Account</a>
      </nav>
      <h1>Help Matcher</h1>
      <p>Are you...</p>
      <p class="wizard-button"><a href="seeking">Seeking Help</a></p>
      <p class="wizard-button"><a href="providing">Providing Help</a></p>
    </div>
  </body>
</html>

CSS

div{
  display:none;
}
#appcontainer > div{
  display: block;
}
#appcontainer{
  height: 6in;
  width: 3in;
  margin: 20px auto;
  border: 6px outset #666;
  border-radius: 20px;
  padding: 10px;
  background-color: #9df;
  color: #c8d;
  text-align: center;
}
a, button{
  display: inline-block;
  text-decoration: none;
  background-color: #c8d;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  border: 2px outset #c8d;
}
h1{
  margin: 40px 10px;
}
.wizard-button a{
  margin-top: 20px;
  padding: 20px;
  width: 150px;
}
#providers a{
  width: 100px;
  margin: 2px;
}

img{
  max-width: 100%;
}
.logo{
  max-width: 60px;
}
figure img{
  max-width: 120px;
}

#mainnav{
  font-size: 14px;
}

a, button, img{
  vertical-align: middle;
}

JavaScript

$(document).ready(function(){
	$("a").on("click", function(e){
  	e.stopPropagation();
  	$("body").append($("#appcontainer > div"));
    $("#appcontainer").append()
  });

});