booherbg/files.md

## files.md

      
    Raw
  

              files.md
            
          
    index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Blaine's World</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <main>
      <!-- this will not show up -->
      <a
        href="http://riverkeepers.org"
        target="_blank">
        <img src="./kayak.jpg" alt="Kayaking on the red river" />
      </a>
      <h1>Blaine's Favorite Things</h1>
      <p>I really like this
        <a
          href="https://www.youtube.com/watch?v=CMPIxEWGs5g"
          target="_blank">great song</a> by the Talking Heads</p>

      <div class="video">
        <iframe
          width="280" height="158"
          src="https://www.youtube.com/embed/5aoF3gH6ym0"
          frameborder="0" allowfullscreen>
        </iframe>
      </div>

      <h2>Outdoor Activities</h2>
      <p>I enjoy many outdoor activities.
        Here are some of my favorite</p>
      <ul>
        <li>Biking</li>
        <li>Hike around</li>
        <li>Go to the park</li>
      </ul>

      <h2>Programming Languages</h2>
      <p>There are only two kinds of
        programming languages, those that
        people hate, and those that are never
        used.</p>
      <ol>
        <li>JavaScript</li>
        <li>Python</li>
        <li>HTML/CSS</li>
        <li>Ruby</li>
      </ol>
    </main>
  </body>
</html>
style.css:
body {
  /* this is a css */
  background-color: #c5fcef;
  color: #313657;
  font-family: "Courier New", Courier, monospace;

  /* EVERYTHING IS A BOX */

  /* MARGIN */
  /* BORDER */
  /* PADDING */
  /* CONTENT */
  /* PADDING */
  /* BORDER */
  /* MARGIN */
}

main {
  width: 80%;
  max-width: 600px;
  margin: auto;
}

img {
  width: 100%;
}

a {
  color: #bf2e02;
  font-weight: bold;
}

a:hover {
  color: white;
  background-color: black;
}

/* only apply these rules to any
   html elements with class="video"
*/
.video {
  text-align: center;
}

h1 {
  border: 5px dashed black;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

h2 {
  border-bottom: 3px dashed black;
  text-align: center;
}