Skip to content

Instantly share code, notes, and snippets.

@linbug

linbug/VeQgpP.markdown

Last active January 25, 2016 01:30
Show Gist options
  • Save linbug/cca6e92027de0b8bf378 to your computer and use it in GitHub Desktop.
Save linbug/cca6e92027de0b8bf378 to your computer and use it in GitHub Desktop.
Download ZIP
VeQgpP
Raw
index.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 href= '/'> New query </a>
<a href = '/about'> About </a>
</nav>
<div class=container>
<div class=content>
<div class="title">
<h1>
RAINFALL TRACKER
</h1>
</div>
<div>
<h2> Search historic rainfall data </h2>
</div>
<div class = entry_box>
<form action="/result" method="post">
<div class = form_input>
<p>Start date:</p>
<input type='date' name = 'start_date' min='1998-01-01' max='2015-09-30'>
</div>
<div class = form_input>
<p>End date:</p>
<input type='date' name = 'end_date' min='1998-01-01' max='2015-09-30' >
</div>
<div class = form_input>
<p>Latitude:</p>
<input type='number' name = 'latitude' min=-49 max=49>
</div>
<div class = form_input>
<p>Longitude:</p>
<input type='number' name = 'longitude' min = -179 max =180>
</div>
<div class = form_input>
<button type="submit" value="Submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
<footer>
<p>
Some footer
</p>
</footer>
</body>
Raw
style.css
body {
margin: 0px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
h1{
text-align:center;
font-size:50px;
margin:10px 0 0 0 ;
}
ul{
display:flex;
justify-content: center;
text-align:center;
list-style: none;
margin:0 0 5px 0;
padding:0;
}
li{
flex:1;
margin:0;
}
.newgame{
background-color:green;
display: flex;
flex-direction:column;
margin: 20px;
padding:10px;
}
.forminputs{
display:flex;
flex-direction:row;
justify-content: center;
margin:0;
}
.questionbox{
border:1px solid black;
margin: 0;
padding:10px;
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;
}
.difficulty{
border: 1px solid black;
margin: 0 0 0 10px;
padding:10px;
}
article {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
}
img.centerpic {
margin: 5px;
max-width: 60%;
}
img.questionpic{
max-height:300px;
}
.explanation{
display:flex;
}
.box{
flex:1;
margin:10px;
background-color:skyblue;
width:50px;
height:50px;
align-items: center;
justify-content: center;
}
div.content {
margin:20px auto;
background-color: red;
display: flex;
flex-direction: column;
}
.imgcontainer {
max-width: 100%;
height: auto;
text-align:center;
margin: 10px;
}
.inputrow{
display:flex;
align-items: center;
justify-content: center;
}
p {
text-align:center;
}
.intro{
text-align:left;
margin: 0 auto;
}
.forminput{
text-align:left;
margin:0;
}
h2{
/* text-align:center; */
margin:20px 0px 10px 0px;
font-size:20px;
}
.question{
text-align:center;
}
.newgameheader{
text-align:center;
margin:0 0 30px 0;
}
h3{
text-align: center
}
header {
background-color: pink;
}
section {
flex: 1;
margin: 0 auto;
max-width: 600px;
border: 1px solid grey;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.box{
}
.buttoncontainer{
text-align:center;
margin:10px 0;
}
.questioncontainer{
background-color:green;
}
.choicesbox{
/* display:flex; */
}
button {
border: 0;
background: #0087cc;
border-radius: 4px;
box-shadow: 0 5px 0 #006599;
cursor: pointer;
color: white;
font: inherit;
margin: 0px;
outline: 0;
padding: 12px 20px;
transition: all .1s linear;
}
button:active {
box-shadow: 0 2px 0 #006599;
transform: translateY(3px);
}
input{
margin:10px;
}
form{
}
footer {
background-color: gold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment