KenyonSample2

by jimskon

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="ExampleStyle.css">
<title>Your Title Here</title>
</head>
<body>
  <img src="https://cs.kenyon.edu/pub/Main/IntroToCSF2018/kenyon.png" align="left">
  <img src="https://cs.kenyon.edu/pub/Main/IntroToCSF2018/Pixel.jpg" align="right">

<br />
<h1>This is a Header</h1>
<h2>This is a Medium Header</h2>
<br />
<hr>
<br />
<a href="http://kenyon.edu">Kenyon College</a> - A link<br />
Send me mail at <a href="mailto:skonjp@kenyon.edu">
mailto:skonjp@kenyon.edu</a>.

<p> This is a new paragraph!
<p> <b>This is a new paragraph!</b>
<br> <b><i>This is a new sentence without a paragraph break, in bold italics.</i></b>

<hr>
<h3>Unordered List</h3>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<h3>Ordered List</h3>
<ol>
  <li>Math</li>
  <li>Computer Science</li>
  <li>Philosophy</li>
</ol>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

</body>
</html>

CSS

h1, h2 {
    color: yellow;
    text-align: center;
}

h3 {
    color: lawngreen;
}

li {
    color: olive;
    font-family: Arial, Helvetica, sans-serif;
}

img { 
    width: 30%; 
}

body {
    background-color: blueviolet;
}

p {
  color:aliceblue;
}

table {
    border-collapse: collapse;
    font-family: arial, sans-serif;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #dddddd;
}