linbug/MKQxxo.markdown

## index.html
<html>
<head>
    <link rel="stylesheet" href="static/style.css"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>

  <nav>

      <a class = nav_link href= '/'> NEW QUERY </a>
      <a class = nav_link href = '/about'> ABOUT </a>

    </nav>

  <div class=container>
    <div class=content>

       <div class="title">
          <h1>
          rainfall tracker.
          </h1>
       </div>
       <div>
           <h2> Search worldwide historic rainfall data </h2>
       </div>

       <div class = entry_box>
            <form action="/result" method="post">
              <div class = form_input>
                <p class= input_text>Start date:</p>
                <input type='date' name = 'start_date' min='1998-01-01' max='2015-09-30'
                class = input_form>
              </div>
              <div class = form_input>
                <p class = input_text>End date:</p>
                <input type='date' name = 'end_date' min='1998-01-01' max='2015-09-30'
                class = input_form>
              </div>
              <div class = form_input>
                <p class = input_text>Latitude:</p>
                <input type='number' name = 'latitude' min=-49 max=49 placeholder = -73.95
                class = input_form>
              </div>
              <div class = form_input>
                <p class = input_text >Longitude:</p>
                <input type='number' name = 'longitude' min = -179 max =180 placeholder = 40.79
                class = input_form>
              </div>
              <div class = button_box>
                <button type="submit" value="Submit">Submit</button>
              </div>


        </form>
       </div>

    </div>
  </div>


  <footer>
    <p>
    Some footer
    </p>
  </footer>
</body>
</html>

## MKQxxo.markdown

      
    Raw
  

              MKQxxo.markdown
            
          
    MKQxxo

A Pen by Lin on CodePen.
License.

  
## style.css
html{

  min-height:100%;
}

body {
/*   margin: 0px; */
  height: 100vh;

/*   display: flex;
  flex-direction: column; */
}

h2{
  text-align: center;

}

h1{
  text-align: center;
}

nav{
  height:3em;
  background-color: orange;
  display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
  align-items: center;
}

.nav_link{
  margin: 1.5em;

}

.container{
  height: 100%;
 background-color: skyblue;
  display:flex;
 align-items: center;
  justify-content: center;

}

.content{
  background-color:green;

}
.entry_box{
  margin: 20px;
  background-color: red;
  display: flex;
  padding: 1em;
  justify-content: center;
}

.form_input{
  display: flex;


}

input{
  height: 3em;
  width: 12em;
}

.input_text{
  flex:1;
}

.input_form{
  flex:1;

}

.button_box{
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 1em 0 0 0;
}

footer{
  background-color: gold;
  margin: 0px;
  display: flex;
justify-content: center;
  align-items: center;


}
	<html>
	<head>
	<link rel="stylesheet" href="static/style.css"/>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>

	<nav>

	<a class = nav_link href= '/'> NEW QUERY </a>
	<a class = nav_link href = '/about'> ABOUT </a>

	</nav>

	<div class=container>
	<div class=content>

	<div class="title">
	<h1>
	rainfall tracker.
	</h1>
	</div>
	<div>
	<h2> Search worldwide historic rainfall data </h2>
	</div>

	<div class = entry_box>
	<form action="/result" method="post">
	<div class = form_input>
	<p class= input_text>Start date:</p>
	<input type='date' name = 'start_date' min='1998-01-01' max='2015-09-30'
	class = input_form>
	</div>
	<div class = form_input>
	<p class = input_text>End date:</p>
	<input type='date' name = 'end_date' min='1998-01-01' max='2015-09-30'
	class = input_form>
	</div>
	<div class = form_input>
	<p class = input_text>Latitude:</p>
	<input type='number' name = 'latitude' min=-49 max=49 placeholder = -73.95
	class = input_form>
	</div>
	<div class = form_input>
	<p class = input_text >Longitude:</p>
	<input type='number' name = 'longitude' min = -179 max =180 placeholder = 40.79
	class = input_form>
	</div>
	<div class = button_box>
	<button type="submit" value="Submit">Submit</button>
	</div>



	</form>
	</div>

	</div>
	</div>


	<footer>
	<p>
	Some footer
	</p>
	</footer>
	</body>
	</html>
	html{

	min-height:100%;
	}

	body {
	/* margin: 0px; */
	height: 100vh;

	/* display: flex;
	flex-direction: column; */
	}

	h2{
	text-align: center;

	}

	h1{
	text-align: center;
	}

	nav{
	height:3em;
	background-color: orange;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	align-items: center;
	}

	.nav_link{
	margin: 1.5em;

	}

	.container{
	height: 100%;
	background-color: skyblue;
	display:flex;
	align-items: center;
	justify-content: center;

	}

	.content{
	background-color:green;

	}
	.entry_box{
	margin: 20px;
	background-color: red;
	display: flex;
	padding: 1em;
	justify-content: center;
	}

	.form_input{
	display: flex;


	}

	input{
	height: 3em;
	width: 12em;
	}

	.input_text{
	flex:1;
	}

	.input_form{
	flex:1;

	}

	.button_box{
	display:flex;
	align-items: center;
	justify-content: center;
	padding: 1em 0 0 0;
	}

	footer{
	background-color: gold;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;


	}