Labyrinth

index.html

<div id="main">
  <header>
    <img src="https://www.logolynx.com/images/logolynx/22/22b01f0e3564bdd24e81534c024be9dc.png" alt="Labyrinth logo"/>
    <h1 id="title"> A Tribute to the Movie</h1>
    <p id="tribute-info">a Jim Henson Film - 1986 <a id="tribute-link" href="https://en.wikipedia.org/wiki/Labyrinth_(film)" target="_blank" >Wikipedia: Labyrinth (film)</a></p>
    
  </header>
  <main>
    <div id="img-div">
      <!-- TODO: Needs alt -->
      <!-- TODO: resize relative to #img-div with a max of original size -->
      <!-- TODO: Center image within #img-div -->
      <div id="img-div-content">
      <img id="image" src="https://image-ticketfly.imgix.net/00/02/77/24/43-og.jpg?w=500&h=334&fit=crop&crop=top" alt="Labyrinth poster image with Davide Bowie and Jennifer Connelly" />
      <label id="img-caption">Labyrinth is a Jim Henson movie made in 1986 - starring David Bowie and Jennifer Connely. The movie is about a girl, Sarah, who must solve a labyrinth to save her baby brother from the Goblin King. During a tantrum, she unwittingly wished her younger brother, Toby, away. The Goblin King granted her wish and sent goblins to whisk Toby away to the Goblin King's castle. Sarah is then challenged to navigate a labyrinth to reach the castle and save her brother within 13 hours.</label>
      </div>
    </div>
    <div id="characters-cont">
    <h2>Characters</h2>
    <article id="characters">
      <section id="char-sarah">
        <img src="https://78.media.tumblr.com/8b13141b5a2e9f8f72ed1fdaf59df97a/tumblr_inline_mkwbwjoAOV1qz4rgp.jpg" alt="image of sarah"/>
        <p>Sarah is the protagonist in Labyrinth. The fifteen year old girl is frustrated with her father, step-mother, and balling baby brother, Toby. After being consigned to babysit, she wishes Toby away. To save him she must traverse a labyrinth and confront the Goblin King.</p>
      </section>
      <section id="char-jareth">
        <img src="https://cdn-stream.httpid.com/c201/wp-content/uploads/2016/06/Labyrinth-Bowie_010-1200x520.jpg" alt="image of jareth, the goblin king" />
        <p>Jareth, the Goblin King, is the powerful antagonist who has some infatuation with Sarah. She repeatedly resists his attempts to woo her with promises of fulfilling all her dreams including kidnapping her younger brother. While Sarah strives toward the castle, Jareth makes frequent attempts to block her path.</p>
      </section>
      <section id="char-hoggle">
        <img src="https://i.imgur.com/Ew9QQns.jpg" alt="image of hoggle" />
        <p>Hoggle is a irritable dwarf who initially wants nothing to do with Sarah. Jareth uses Hoggle to try and slow Sarah down from navigating the labyrinth, but Sarah's persistence and no-nonsense approach starts to win him over. Ultimately, he becomes Sarah's close ally and friend.</p>
      </section>
      <section id="char-didymus">
        <img src="http://www.newyorkcouture.net/blog/wp-content/uploads/2009/02/sirdidymus.jpg" alt="image of didymus" />
        <p>Sir Didymus is a goofy fox-terrier and self-proclaimed knight sworn to guard a bridge and initially inhibits Sarah's progress. After a fight with Ludo, they earn Didymus' respect. After politely asking him to allow them through he agrees, and joins them on their quest to save Toby.</p>
      </section>
      <section id="char-ludo">
        <img src="http://3.bp.blogspot.com/-SZoamxfmdSg/T17G-vyVonI/AAAAAAAAAQc/ZaF-RsnXJ2A/s640/labyrinth_ludo.jpg" alt="image of ludo" />
        <p>Ludo is a troll whose roar can control rocks. After Sarah rescued him from some goblins, he calls Sarah friend and helps her on her journey. His massive strength is invaluable in some key battles, but his gentleness is what makes him one of Sarah's closest friends.</p>
      </section>
      <section id="char-goblins">
        <img src="http://cdn.collider.com/wp-content/uploads/2016/06/labyrinth-goblin-slice.jpg" alt="a picture of goblins" />
        <p>The goblins are the minions of the Goblin King. They aren't overly intelligent and provide some comical relief. In the movie they assist in kidnapping Toby, lounge around the castle, torment Ludo, and fight in a battle against Sarah and her companions.</p>
      </section>
    </article>
    </div>
  </main>
  <footer>
    
  </footer>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

labyrinth.markdown

Labyrinth

A Pen by morganda on CodePen.

License.

style.css

body {
  padding: 0px;
  margin: 0px;
}

#main {
  margin: auto;
  display: flex;
  flex-direction: column;
}

#tribute-info{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
}

#characters-cont {
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  max-width: 1024px;
  margin: auto;
  padding: 20px;
}

#characters {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  margin: auto;
  margin-top: 25px;
}
header {
  margin-bottom: 25px;
}
header, footer{
  display: flex;
  flex-direction: column;
  text-align: center;
}

#img-div {
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  color: #DDDDDD;
  margin: 25px auto 25px auto;
  background-color: #222222;
  padding: 20px;
  text-align: center;
}

#img-div-content {
  max-width: 1000px;
  margin: auto;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}