30daysofreading

30daysofreading.markdown

30daysofreading

A Pen by Zircoz on CodePen.

License.

index.html

<div class="container">
<img src="https://raw.githubusercontent.com/Zircoz/30daysofreading/master/empty-shelves.jpg" alt="Empty-Shelves" style="width:100%;">
<div class="text">
  <b>Shelves will be filled soon!</b>
  <br>
  <br>
  <h3><i>www.100daysofreading.com</i></h3>
</div>
</div>
<div class="footer">
  <a href="www.twitter.com/zircoz">Contact Us<a>
</div>

style.css

body,html {
  height: 100%;
  margin: 0;
}
.container {
  position: relative;
  max-width: 800px; /* Maximum width */
  margin: 0 auto;
}

.container .text {
  position: absolute; /* Position the background text */
  top: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0); /* Black background with 0.5 opacity */
  color: black; /* Grey text */
  
  width: 100%;
}


.text {
  margin-top: 39%;
  text-align: center;
}

.text>b {
  font-size: 40px;
  font-family: 'Open Sans', sans-serif;
}

.text{
  font-family: 'Lato', sans-serif;
}

.footer {
  
  height: 10%;
  bottom: 0;
  background-color: #4d3626;
  margin-top: 0;
  text-align: center;
  
  
  
}

.footer>a {
  text-decoration: none;
  bottom: 0;
  
  font-family: 'Lato';
  color: white;
  font-size: 2em;
}