Skip to content

Instantly share code, notes, and snippets.

@thomasthaddeus

thomasthaddeus/tables.html

Last active February 17, 2023 11:35
Show Gist options
  • Save thomasthaddeus/da5e00c1b0d3e5af78761681737d16b0 to your computer and use it in GitHub Desktop.
Save thomasthaddeus/da5e00c1b0d3e5af78761681737d16b0 to your computer and use it in GitHub Desktop.
Download ZIP
Wine Festival Schedule The Aguillar Family is hosting their annual wine festival and they have asked you to build a web page for the event schedule! Use your knowledge of HTML to display a table to the attendees.
Raw
tables.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aguillar Family Wine Festival</title>
<style>
body {
background-color: #242f44;
color: white;
font-family: 'Oswald', sans-serif;
}
header {
text-align: center;
margin-top: 5px;
}
h1 {
font-size: 36px;
padding: 15px;
color: #8c6b48;
background-color: white;
}
h2 {
font-size: 24px;
padding: 15px;
text-transform: uppercase;
}
h3 {
font-size: 20px;
padding: 15px;
text-transform: uppercase;
text-align: left;
margin-left: 20px;
font-weight: 500;
line-height: 2.7;
letter-spacing: 0.8px;
}
th {
border: 2px solid #8c6b48;
}
table {
text-align: center;
margin: 20px auto;
}
td {
border: 2px solid #8c6b48;
width: 300px;
}
footer {
margin-top: 50px;
text-align: center;
position: fixed;
width: 100%;
bottom: 5px;
background-color: #242f44;
z-index: 5;
}
footer h3 {
display: inline-block;
font-size: 14px;
background-color: #242f44;
}
.container {
max-width: 940px;
margin: 0 auto;
height: 800px;
}
.left {
width: 150px;
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Oswald"
rel="stylesheet"
/>
</head>
<body>
<header>
<h1>Annual Aguillar Family Wine Festival</h1>
</header>
<div class="container">
<table>
<thead>
<tr>
<th colspan="2">
<h1>Wine Festival Schedule</h1>
</th>
</tr>
<tr>
<th>
<h2>Time</h2>
</th>
<th>
<h2>Event</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">
<h3>12:00 PM</h3>
</td>
<td>
<h3>Welcome Reception</h3>
</td>
</tr>
<tr>
<td class="left">
<h3>01:00 PM</h3>
</td>
<td>
<h3>Storytelling &amp; Tasting</h3>
</td>
</tr>
<tr>
<td class="left">
<h3>02:00 PM</h3>
</td>
<td>
<h3>Wine Luncheon</h3>
</td>
</tr>
<tr>
<td class="left">
<h3>03:00 PM</h3>
</td>
<td>
<h3>Aguillar Family Wines</h3>
</td>
</tr>
<tr>
<td class="left">
<h3>04:00 PM</h3>
</td>
<td>
<h3>Wine &amp; Cheese Tasting</h3>
</td>
</tr>
</tbody>
</table>
</div>
<footer>
<h3>Contact</h3>
<h3>Location</h3>
<h3>Privacy Policy</h3>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment