Bluecore Learn Frontend Exam One

First time HTML and CSS test

by Mike Rispoli

HTML

<body>
  <div id="wrapper">
    <h1>My Super Awesome Webpage</h1>
    <p>This is a test of the great skills you have acquired this far in front end fundamentals. It's <em>your</em> job to build this simple little page yourself using what you have learned. Don't get frustrated, there is always a path forward just use your
      jedi mind tricks and the great <strong><a href="http://www.stackoverflow.com">stack overflow</a></strong> if you get stuck. <strong>Remember: No Peeking At The Page Source.</strong></p>

    <img class="banner-images" alt="use the force luke, you should add alt tags to everything for people using screen readers ;)" src="http://img.memecdn.com/use-the-force-luke_o_320659.gif" />

    <div id="about-you" class="section">
      <h2>About You</h2>
      <img id="profile-image" src="http://www.bluecore.com/wp-content/uploads/2016/03/Michael-Rispoli-Funny-400x400.jpg" />
      <p>I think you should use this section to get a little creative and talk a little about yourself and link it to an image of yourself somewhere out there on the interwebs. You can do this by right-clicking and copying the image source from one web page
        to your own. It's a little tricky getting the text to sit next to the image like this but I have faith in you both. You can also write your own message here instead of using this one.</p>
    </div>

    <img class="banner-images" alt="inception" src="https://media.giphy.com/media/z1meXneq0oUh2/giphy.gif" />

    <div id="resume" class="section">
      <h2>Dream Resume</h2>
      <p>I liked hearing about you so much I decided I wanted you to list some professional accomplishments. Except I'm not really interested in what you have done but rather what you <em>will</em> do. After you copy this paragraph modify the lists below
        to show me what your resume will look like when you are 40. <em>A person's dreams often tell us more than their reality.</em></p>
      <ul>
        <li>Won Pulitzer Prize for Literature in...

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #fff;
}

.banner-images {
  display: block;
  width: 100%;
  margin: 40px auto;
}

.section {
  margin: 20px auto;
}

#profile-image {
  width: 200px;
  float: left;
  margin: 0 20px 40px 0;
}

#resume li {
  list-style: square;
  padding: 10px 0;
}