Kathy Short Tribute

index.html

<div class="container-fluid">
<div class="dark-background box">
  <div class="dark-background semilight-text text-center">
  <h1>Kathy Short</h1>
<img class="" 			src="http://www.coe.arizona.edu/sites/coe/files/people/short.png"alt="Kathy Short"></a>
<h2>The Mother of Inquiry</h2>
</div>
  <div id="box" class="box semidark-background light-text text-center">
  <h3>Accomplishments</h3>
  <p>
  <p>Professor in the program of Language, Reading and Culture at the University of Arizona.</p>
    <p>Director of <a href="#" class="highlight-text">Worlds of Words</a>, an initiative to build bridges across global cultures through children’s literature.</p>
    <p>Served as President of the U.S. national section of the International Board of Books for Young People.</p>
    <p>Served as President of the National Council of Teachers of English.</p>
    <p>Named the 2011 Outstanding Educator of the Language Arts by the National Council of Teachers of English.</p>
    <p>Serves on various book award committees including the Caldecott Medal.</p>
</p>
</div>
</div>
</div>

kathy-short-tribute.markdown

Kathy Short Tribute

A Pen by Glen Pamment on CodePen.

License.

style.css

@import 'https://fonts.googleapis.com/css?family=Kavivanar:400';

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


h1 {
    font-family: "le-monde-courrier-std", sans serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.20;
    opacity: 1.00;
    margin-top: 20px;
    margin-bottom: 30px;
    letter-spacing: -0.72px;
    word-spacing: 0.00px;
    text-transform: none;
}

h2 {
    font-family: "le-monde-courrier-std-2", sans serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.20;
    opacity: 1.00;
    margin-top: 30px;
    margin-bottom: 5px;
    letter-spacing: -0.72px;
    word-spacing: 0.00px;
    text-transform: none;
}

h3 {
    font-family: "le-monde-courrier-std-2", sans serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.20;
    opacity: 1.00;
    margin-top: 30px;
    margin-bottom: 5px;
    letter-spacing: 0.00px;
    word-spacing: 0.00px;
    text-transform: none;
}

p {
    font-family: "Kavivanar", handwriting;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.60;
    opacity: 0.70;
    margin-top: 0px;
    margin-bottom: 25px;
    letter-spacing: -0.30px;
    word-spacing: -0.10px;
    text-transform: none;
}
.dark-background {
  background-color:#112D4E;
}
.semidark-background{
  background-color:#3F72AF;
}
.light-text {
  color:#F9F7F7;
}
.semilight-text {
  color:#DBE2EF;
}
.highlight-text{
  color:#112D4E
}
.box {
  border-style: solid;
  border-color: #112D4E
  padding: 60px;
  margin: 20px 20px 100px 20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />