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;
}