<body>
  <div id="header">
    <p id="name">Belle Gold</p>
    <a href="#"><p id="email">belle.gold@storybrooke.org</p></a>
  </div>
  
  <div class="right">
    <h4>Experiences</h4>
    <p>Co-owner, Mr. Gold's Pawnshop and Antiquities Dealer</p>
    <ul>
      <li>Maintained store in absence of Mr. Gold</li>
      <li>Advised potential customers of the best item</li>
    </ul>
    <p>Babysitter</p>
    <ul>
      <li>Watched the children while parents were out saving Storybrooke</li>
    </ul>
    <p>Librarian, Storybrooke Public Library</p>
    <ul>
      <li>Re-launched Storybrooke Public Library</li>
      <li>Research spells and solutions for the sheriff</li>
    </ul>
    <h4>Skills</h4>
    <p>Knowledgeable about all kinds of magic</p>
    <p>Cleaning and organizing large places</p>
    <p>Reading</p>
  </div>
  
  <div class="left"></div>
  
  <footer>
    <div id="footer">
      <p>815 Murray Rd. Storybrooke, Maine 21117 </p>
    </div>
  </footer>
  <p id="copyright">&copy; BritishPandaChick. All Rights Reserved</p>
</body>
div {
  border-radius: 5px;
}

/* Header */
#header {
  background-color: #F5F5DC;
  height: 60px;
  width: 97.5%;
  position: fixed;
  z-index: 1;
  margin-top: -20px;
  margin-bottom: 10px;
}

#name {
  float: left;
  margin-left: 5px;
  padding-top: 5px;
  font-size: 16px;
  font-family: Georgia;
}

#email {
  float: right;
  margin-right: 5px;
  padding-top: 5px;
  font-size: 16px;
  font-family: Georgia;
  color: black;
}

/* Experiences */
.right {
  position: relative;
  width: 88%;
  height: 400px;
  float: right;
  background-color: gray;
  margin-top: 50px;
  margin-bottom: 10px;
}

h4 {
  margin-left: 5px;
  margin-bottom: 15px;
  font-family: Georgia;
}

.right p {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: -10px;
  font-family: Georgia;
}

li {
  list-style-type: square;
}

a:hover {
  font-weight: bold;
}

/* Color bar */
.left {
  width: 10%;
  height: 400px;
  float: left;
  background: #008080;
  position: relative;
  margin-top: 50px;
  margin-bottom: 10px;
}

/* Footer */
#footer {
  height: 50px;
  background: #F5F5DC;
  clear: both;
  position: relative;
  font-family: Georgia;
  font-size: 14px;
  text-align: center;
}

#footer p {
  position: relative;
  padding-top: 15px;
}

#copyright {
  font-size: 15px;
  font-family: Georgia;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.