Skip to content

Instantly share code, notes, and snippets.

@linbug

linbug/MKybrJ.markdown

Last active December 17, 2015 22:04
Show Gist options
  • Save linbug/5d3e386eb8e6b81e0480 to your computer and use it in GitHub Desktop.
Save linbug/5d3e386eb8e6b81e0480 to your computer and use it in GitHub Desktop.
Download ZIP
MKybrJ
Raw
index.html
<body>
<article>
<header>
<h1>
Planigale
</h1>
<ul>
<li> New game
</li>
<li> About
</li>
</ul>
</header>
<section class=container>
<div class=content>
<h2 class=question>
Which species is in the picture?
</h2>
<div class=questioncontainer>
<div class=forminputs>
<div class=questionbox>
<img class=questionpic src="http://ocean.si.edu/sites/default/files/styles/colorbox_full/public/photos/5a%20-%20Hippocampus%20guttulatus%20-%201000px.jpg?itok=3iHYQFVH">
</div>
<div class=questionbox>
<div>
<div class=inputrow>
<input type="radio" name="difficulty" value="easy">
<p class=forminput>Easy (unlimited hints!)</p>
</div>
<br>
<div class=inputrow>
<input type="radio" name="difficulty" value="medium">
<p class=forminput>Medium (limited hints!)</p>
</div>
<br>
<div class=inputrow>
<input type="radio" name="difficulty" value="hard">
<p class=forminput>Hard (hints be damned!)</p>
</div>
<br>
<div class=buttoncontainer>
<button name = "submit" type="submit" value="0" >Submit!</button>
</div>
</div>
</div>
</div>
</div>
<div class=buttoncontainer>
<p> You have X hints left! </p>
<button type="submit" name = "hint" value="True">Hint</button>
</div>
</section>
<footer>footer</footer>
</article>
</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