Free Code Camp: Tribute Page to Octavia E. Butler

In this example below you will see how to do a Free Code Camp: Tribute Page to Octavia E. Butler with some HTML / CSS and Javascript

Tribute Page exercise from freecodecamp.com - STATUS: SUBMITTED

Thumbnail
This awesome code was written by omowale, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright omowale ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Free Code Camp: Tribute Page to Octavia E. Butler</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="center">
  <div id="maintitle">
    <center>
      <h1><b>Octavia E. Butler</b></h1>
      <h2><em>The Woman Who Redefined Sci-Fi</em></h2>
    </center>
  </div>
  <div>
    <img class="img-responsive img-circle"  src="http://img06.deviantart.net/f599/i/2014/127/d/0/octavianaut_by_kimbot-d7hihjm.jpg" alt="Octavia Butler as an astronaught">
    <div class="image description">
      <p align="center">Image Credit:<a href="http://kimbot.deviantart.com/art/Octavianaut-452679250" target="_blank"> Octavianaut by Kimbot</a></p>
    </div>
  </div>

  <div class="center">
  <div id="timeline">
    <h3><b>A Timeline of Butler's Life:</b></h3>
    <ul>
      <li><b>1947</b> - Born in Pasadena, CA.</li>
      <li><b>1953</b> - Gets first library card at the age of 6.</li>
      <li><b>1965</b> - Graduates from John Muir High School.</li>
      <li><b>1969</b> - Attends Screenwriter’s Guild Open Door Program.</li>
      <li><b>1970</b> - Attends Clarion Science Fiction Writers’ Workshop and meets mentor Harlan Ellison.</li>
      <li><b>1976</b> - Releases her first novel <em>Patternmaster</em>.</li>
      <li><b>1979</b> - Experiences career breakthrough with her book, <em>Kindred</em>, allowing Butler to become a full time writer.</li>
      <li><b>1985</b> - Wins Hugo Award, Nebula Award, and Locus Award for her book <em>Bloodchild</em>.</li>
      <li><b>2000</b> - Recieves PEN American Center lifetime achievement award in writing.</li>
      <li><b>2005</b> - Becomes inductee in International Black Writers Hall of Fame. Writes last novel <em>Fledgling</em>.</li>
      <li><b>2006</b> - Dies in Lake Forest Park, Washington.</li>
      <li><b>2010</b> - Posthumously becomes inductee in Science Fiction Hall of Fame.</li>
    </ul>
  </div>

  <div>
    <p><b>Little Known Fact:</b><br>Butler was dyslexic.</p>
  </div>

  <div>
    <p><b>On Sticking With What You Love:</b><br>Butler said in an interview with Joshunda Sanders,</p>
    <div><em>"There will always come a time in writing a novel for instance, a long undertaking like that, when you don’t think you can do it. Or, you think it’s so bad you want to throw it away. I tell the students that there comes a time when you want to
    either burn it or flush it. But if you keep going, you know, that’s what makes you a writer instead of an ‘I wish I was a writer'."</em></div>
    </p>
  </div>

  <div id="extlink">
    <h4>If you enjoyed learning about Octavia E. Butler, explore her works on her <a href="http://octaviabutler.org/" target="_blank">website</a>.</h4></div>
</div>
  
  <div id="creator">
    <center>
    <p>Written and coded by <a href="https://www.freecodecamp.com/ladyoniyide" target="_blank">Omowale Oniyide</a></p></center>
  </div>

</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/omowale/free-code-camp-tribute-page-to-octavia-e-butler-EKQVaO */
 .center {
  margin: auto;
  width: 80%;
  color: #1b1a0f;
  background-color: #fcfcfc;
  font-family: monospace;
  }
  
  body {
  background-image: url("http://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA11213-1600x1200.jpg ");
  }
  
  #maintitle {
  padding-top: 50px;
  padding-bottom: 10px;
  }
  
  #timeline {
  padding-top: 4px;
  padding-bottom: 20px;
  }
  
  #extlink{
  padding-top: 10px;
  }
  
  #creator {
  padding-top: 50px;
  padding-bottom: 10px;
  }

/*Downloaded from https://www.codeseek.co/omowale/free-code-camp-tribute-page-to-octavia-e-butler-EKQVaO */
/* 
FREE CODE CAMP EXERCISE - SUBMITTED
Like this? Tell me on twitter @ladyoniyide

    ___
   |^^^|          
    }_{
    }_{
/|_/---\_|\
I _|\_/|_ I
\| |   | |/
   |   |
   |   |       T
   |   |        E X O R D I U M
   |   |         R
   | | |          M
   | | |           I
   | | |            N
   | | |             U T
   | | |              S
   | | |
   | | |
   | | |
   \ . /
    \./
     Y


*/

Comments