<!DOCTYPE html>
<html>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-7">
<head>
<title>Lists, Tables and Forms</title>
<link rel="stylesheet" href="tables_list_forms.css">
</style>
</head>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: #666666;
background-color: #f8f8f8;}
li {
list-style-image: url("icon-plus.png");
14
line-height: 1.6em;}
table {
border-spacing: 0px;}
th, td {
padding: 5px 30px 5px 10px;
border-spacing: 0px;
font-size: 90%;
margin: 0px;}
th, td {
text-align: left;
background-color: #e0e9f0;
border-top: 1px solid #f1f8fe;
border-bottom: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;}
tr.head th {
color: #fff;
background-color: #90b4d6;
border-bottom: 2px solid #547ca0;
border-right: 1px solid #749abe;
border-top: 1px solid #90b4d6;
text-align: center;
text-shadow: -1px -1px 1px #666666;
letter-spacing: 0.15em;}
td {
text-shadow: 1px 1px 1px #ffffff;}
tr.even td, tr.even th {
background-color: #e8eff5;}
tr.head th:first-child {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;}
tr.head th:last-child {
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;}
fieldset {
width: 310px;
margin-top: 20px;
border: 1px solid #d6d6d6;
background-color: #ffffff;
line-height: 1.6em;}
legend {
font-style: italic;
color: #666666;}
input[type="text"] {
width: 120px;
border: 1px solid #d6d6d6;
15
padding: 2px;
outline: none;}
input[type="text"]:focus,
input[type="text"]:hover {
background-color: #d0e2f0;
border: 1px solid #999999;}
input[type="submit"] {
border: 1px solid #006633;
background-color: #009966;
color: #ffffff;
border-radius: 5px;
padding: 5px;
margin-top: 10px;}
input[type="submit"]:hover {
border: 1px solid #006633;
background-color: #00cc33;
color: #ffffff;
cursor: pointer;}
.title {
float: left;
width: 160px;
clear: left;}
.submit {
width: 310px;
text-align: right;}
<h1>Digital Marketing Workshops</h1>
<p>We will be conducting a number of Digital Marketing workshops and
symposiums throughout the year.</p>
<p>Please note that the following events are free to members:</p>
<ul>
<li>Scope of Classic Versus Digital Marketing</li>
<li>Availability of Online Marketing</li>
<li>Monitoring Differences of Classic & Internet Marketing</li>
</ul>
<table>
<tr class="head">
<th></th>
<th>Athens</th>
<th>Kavala</th>
<th>Drama</th>
</tr>
<tr>
<th>Scope of Classic Versus Digital Marketing</th>
<td>Sat, 20 Oct 2018<br />11am - 2pm</td>
<td>Sat, 27 Oct 2018<br />11am - 2pm</td>
<td>Sat, 3 Nov 2018<br />11am - 2pm</td>
</tr>
<tr class="even">
<th>Availability of Online Marketing</th>
<td>Sun, 11 Nov 2018<br />11am - 1pm</td>
<td>Sun, 18 Nov 2018<br />11am - 1pm</td>
<td>Sun, 25 Mov 2018<br />11am - 1pm</td>
</tr>
<tr>
<th>Monitoring Differences of Classic & Internet
Marketing</th>
13
<td>Sat, 15 Dec 2018<br />11am - 2pm</td>
<td>Sat, 22 Dec 2018<br />11am - 2pm</td>
<td>Sat, 29 Dec 2018<br />11am - 2pm</td>
</tr>
</table>
<form action="" method="get">
<fieldset>
<legend>Register your interest</legend>
<p><label class="title" for="name">Your name:</label>
<input type="text" name="name" id="name"><br
/>
<label class="title" for="email">Your
email:</label>
<input type="text" name="email"
id="email"></p>
<p><label for="location" class="title">Your closest
center:</label>
<select name="location" id="location">
<option value="ny">Athens</option>
<option value="il">Kavala</option>
<option value="ca">Drama</option>
</select></p>
<span class="title">Are you a member?</span>
<label><input type="radio" name="member" value="yes"
/> Yes</label>
<label><input type="radio" name="member" value="no"
/> No</label>
</fieldset>
 <div class="submit"><input type="submit" value="Register"
/></div>
</form>
</body>
</html>