Skip to content

Instantly share code, notes, and snippets.

@linbug

linbug/QyNNPd.markdown

Created December 17, 2015 22:07
Show Gist options
  • Save linbug/261b60f8af1379345a41 to your computer and use it in GitHub Desktop.
Save linbug/261b60f8af1379345a41 to your computer and use it in GitHub Desktop.
Download ZIP
QyNNPd
Raw
index.html
<body>
<article>
<header>
<h1>
Planigale
</h1>
<!-- <div class=headerlinks>
<ul>
<li> New game
<li> About
</div> -->
</header>
<section class=container>
<div class=content>
<div>
<h2> Planigale challenges you to match the picture of the species with its Latin name.</h2>
<div class=newgame>
<h2 class=newgameheader> Play a game of Planigale!
</h2>
<div class=forminputs>
<div class=numquestions>
<h3> Number of questions </h3>
<input type="text" name="num_questions" value="3">
</div>
<div class=difficulty>
<h3>
Difficulty
</h3>
<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>
</div>
<div class=buttoncontainer>
<button type="submit" value="Play Planigale">Go!</button>
</div>
</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;
}
.newgame{
background-color:green;
display: flex;
flex-direction:column;
margin: 20px;
padding:10px;
}
.forminputs{
display:flex;
flex-direction:row;
justify-content: center;
margin:0;
}
.numquestions{
border:1px solid black;
margin: 0 10px 0 0;
padding:10px;
display:flex;
flex-direction:column;
}
.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%;
}
.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;
}
.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;
}
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;
}
footer {
background-color: gold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment