linbug/gPPJbq.markdown

## gPPJbq.markdown

      
    Raw
  

              gPPJbq.markdown
            
          
    gPPJbq

A Pen by Lin on CodePen.
License.

  
## index.html
<body>
  <article>
    <header>Planigale header with associated crap</header>

    <section class=container>
      <div class=About>
        <div>
        <h2>What is Planigale?</h2>
        <p class=intro> Planigale is a matching game using species from the Encyclopedia of Life. Planigale challenges you to match the picture of the species with its Latin name.
          <div>
          <h2> Latin name? </h2>
          <p class=intro>
            All organisms that have been discovered by science have been given a Latin name. These names follow a formal naming system first popularised by the Swedish botanist Carl Linnaeus called <a href='https://en.wikipedia.org/wiki/Binomial_nomenclature'>binomial nomenclature</a>:
          the first word relates to the organism's <a href='https://en.wikipedia.org/wiki/Genus'>genus</a> grouping, and the second name to the <a href=https://en.wikipedia.org/wiki/Species>species</a> grouping. The information in the brackets that comes
          afterwards relates the the person that first described that organism, and in what year. </p>
        </div>
        </div>
        <div class= imgcontainer>
          <img src=https://www.vanaqua.org/files/2513/1723/4688/revit-octopus.jpg class=centerpic>
        </div>
        <div class = "explanation">
          <div class = box><p>Genus</p></div>
          <div class = box><p>Species</p></div>
          <div class = box><p>Described by</p></div>
          <div class = box><p>Year</p></div>
        </div>
      <div>
      <h2> Who made this? </h2>
      <p class=intro> Planigale was a collaborative effort between <a href="http://linbug.github.io">Lin Taylor</a> and <a href = ???>Dave Anderson</a> at the <a href = https://www.recurse.com/>Recurse Center</a></div> </p>
    </section>

    <footer>footer</footer>
  </article>
</body>

## style.css
body {
  margin: 0px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1{

  text-align:center;
  font-size:50px;
  margin: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:5px;
  background-color:skyblue;
  width:50px;
  height:50px;
   align-items: center;
   justify-content: center;
}

div.About {
  margin:50px auto;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.imgcontainer {
  max-width: 100%;
  height: auto;
  text-align:center;
  margin: 10px 0px 0px 0px;
}

p {
   text-align:center;
}

.intro{

  text-align:left;
  margin: 0 auto;
}

h2{
 /* text-align:center; */
  margin:20px 0px 10px 0px;

}

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{


}

footer {
  background-color: gold;
}
	<body>
	<article>
	<header>Planigale header with associated crap</header>

	<section class=container>
	<div class=About>
	<div>
	<h2>What is Planigale?</h2>
	<p class=intro> Planigale is a matching game using species from the Encyclopedia of Life. Planigale challenges you to match the picture of the species with its Latin name.
	<div>
	<h2> Latin name? </h2>
	<p class=intro>
	All organisms that have been discovered by science have been given a Latin name. These names follow a formal naming system first popularised by the Swedish botanist Carl Linnaeus called <a href='https://en.wikipedia.org/wiki/Binomial_nomenclature'>binomial nomenclature</a>:
	the first word relates to the organism's <a href='https://en.wikipedia.org/wiki/Genus'>genus</a> grouping, and the second name to the <a href=https://en.wikipedia.org/wiki/Species>species</a> grouping. The information in the brackets that comes
	afterwards relates the the person that first described that organism, and in what year. </p>
	</div>
	</div>
	<div class= imgcontainer>
	<img src=https://www.vanaqua.org/files/2513/1723/4688/revit-octopus.jpg class=centerpic>
	</div>
	<div class = "explanation">
	<div class = box><p>Genus</p></div>
	<div class = box><p>Species</p></div>
	<div class = box><p>Described by</p></div>
	<div class = box><p>Year</p></div>
	</div>
	<div>
	<h2> Who made this? </h2>
	<p class=intro> Planigale was a collaborative effort between <a href="http://linbug.github.io">Lin Taylor</a> and <a href = ???>Dave Anderson</a> at the <a href = https://www.recurse.com/>Recurse Center</a></div> </p>
	</section>

	<footer>footer</footer>
	</article>
	</body>
	body {
	margin: 0px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	}

	h1{

	text-align:center;
	font-size:50px;
	margin: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:5px;
	background-color:skyblue;
	width:50px;
	height:50px;
	align-items: center;
	justify-content: center;
	}

	div.About {
	margin:50px auto;
	background-color: red;
	display: flex;
	flex-direction: column;
	}

	.imgcontainer {
	max-width: 100%;
	height: auto;
	text-align:center;
	margin: 10px 0px 0px 0px;
	}

	p {
	text-align:center;
	}

	.intro{

	text-align:left;
	margin: 0 auto;
	}

	h2{
	/* text-align:center; */
	margin:20px 0px 10px 0px;

	}

	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{


	}

	footer {
	background-color: gold;
	}