<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="The premier bakery in Webster, MA, serving breakfast, lunch, and dinner in its Tea Room. Open M-Su.">
<meta name="keywords" content="bakery, catering, wedding, cakes, tea room">
<meta name="author" content="Marcia Wendorf">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise #6 - Form Elements</title>
<style>
body {
font-family:"Times New Roman", Times, serif;
width:96%;
margin: 0 auto;
}
hgroup {
font-family:cursive;
font-size:1.2em;
color:#01615D;
text-shadow:4px 4px 6px #A8A8A8;
}
header p {
font-variant:small-caps;
font-size:1em;
letter-spacing:0.25em;
color:#FF810C;
font-weight:bold;
}
nav {
color:#01615D;
}
nav a:link {color:#01615D; text-decoration:underline;}
nav a:visited {color:#FF810C;; text-decoration:underline;}
nav a:focus {color:#9019FF; text-decoration:underline;}
nav a:hover {color:red; text-decoration:underline;}
nav a:active {color:blue; text-decoration:underline;}
.deliver {
font-family:sans-serif;
color:#01615D;
text-shadow:4px 4px 5px #A8A8A8;
}
#delivery-services {
color:#FF810C;
font-weight:bold;
}
::marker {
font-size:22px;
}
p#first-para::first-letter {
font-size: 300%;
color: #01615D;
font-family:cursive;
line-height:1em;
}
.call {
color:#01615D;
}
*:lang(es) {
color:#01615D;
font-style:italic;
font-weight:bold;
text-transform:capitalize;
}
article > p {
padding-left: 50px;
text-indent: -50px;
}
#press {
text-transform:uppercase;
color:#01625D;
font-size:1.2em;
font-weight:bold;
font-family:cursive;
text-shadow:4px 4px 6px #A8A8A8;
}
blockquote {
text-align:center;
width:60%;
color:#9019FF;
}
blockquote:focus {
background:pink;
}
summary {
font-family:sans-serif;
font-variant:small-caps;
letter-spacing:0.25em;
font-weight:bold;
color:#01615D;
}
dfn {
color:#01615D;
font-weight:bold;
}
.spring-fling {
text-align:right;
font-variant:small-caps;
letter-spacing:0.25em;
font-weight:bold;
color:#FF810C;
font-family:sans-serif;
}
form {
font-family:sans-serif;
}
:checked {cursor:crosshair;}
input[type="radio"]:checked { cursor:crosshair;}
input[type="checkbox"]:checked {cursor:crosshair;}
option:checked {cursor:crosshair;
}
legend {
color:#01615D;
}
:default {
background-color:#01615D;
color:white;
}
footer {
font-size:.8em;
text-align:center;
}
input:in-range {
background-color: palegreen;
}
input:out-of-range {
background-color: red;
}
#PC2 input:required {
background-color:#FFF0C6;
}
#PC2 input:optional {
background-color:#E5E5E5;
}
:target {
border: 1px solid #01615D;
background-color: #B5E1E5;
}
::selection {
color:white;
background-color:#01615D;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1><img src="images/mermaid3-small.png" alt="logo" style="vertical-align:middle;"> The
Sea Fairy Bakery</h1>
<h3>Webster's Premier Bakery</h3>
</hgroup>
<p>1234 Main Street<br>
Webster, MA 01570<br>
507-555-1212<br>
Open daily 7:00 a.m. - 10:00 p.m.<br>
Sunday till <mark>6:00 p.m.</mark>
</p>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Desserts</a></li>
<li><a href="#">Breads</a></li>
<li><a href="#">Gatherings</a></li>
<li><a href="#">Tea Room</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<main>
<p id="first-para">The Sea Fairy Bakery is a <i>full-service, family-owned bakery and
restaurant</i> that has been bringing smiles to customers' faces for over seven years. We
offer a wide selection of <b>made-from-scratch</b> desserts throughout the day, starting
at 7:00 a.m. Our famous Tea Room features a variety of daily specials, including soups
and sandwiches.
</p>
<section>
<p class="deliver">We Deliver!</p>
<ul id="delivery-services">
<li>Postmates</li>
<li>GrubHub</li>
<li>DoorDash</li>
</ul>
<p class="call">Call us at (508) 555-1212</p>
<p lang="es">nosotros hablamos español.</p>
</section>
<article>
<p><span id="press">Press</span> Here's what Nate Kahn of the <cite>Webster City
News</cite> had to say about this year's Sea Fairy Winter Carnival:</p>
<blockquote tabindex="1">
"... it is the bakery's delicious treats that thrilled both young and old. From
light-as-air cinnamon rolls to blueberry scones, to the Winter special Sachertorte, there
was something for everyone.”
</blockquote>
</article>
<aside>
<details>
<summary>Spring Specials</summary>
Enjoy our <dfn>Spritzkuchen</dfn>, a German fried partry that is similar to a
doughnut.
</details>
<div class="spring-fling">
<p>2023 Spring Fling<br>
<a href="#springflingdate">Date</a><br>
<a href="#springflingtime">Time</a></p>
<p id="springflingdate">Saturday, June 24<sup>th</sup>, 2023</p>
<p id="springflingtime">6:00 p.m. - <del>midnight</del> <ins>2:00 a.m.</ins></p>
<p>Call us for more information.</p>
</div>
</aside>
<form name="customer-info" id="PC2">
<fieldset name="client-information">
<legend><b>Client Information:</b></legend>
I would like to be placed on your mailing list:<br>
<input type="checkbox" name="mailinglist" value="yes">Yes
<input type="checkbox" name="mailinglist" value="no">No<br>
I am:<br>
<input type="radio" name="customer-type" value="individual">An individual customer
<input type="radio" name="customer-type" value="corporate">A corporate customer<br>
I would like to receive updates by:
<select>
<option value="email">Email</option>
<option value="snailmail">Mail</option>
<option value="phone">Phone</option>
</select><br><br>
<label for="fname">First name: </label>
<input type="text" id="fname" name="firstname" placeholder="First name ..." required>
<br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lastname" placeholder="Last name ..." required><br>
<label for="phone">Phone: </label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-
[0-9]{3}-[0-9]{4}" required><br>
<label for="email">Email: </label>
<input type="email" id="email" name="email" placeholder="Email ..."><br><br>
<label for="quantity-cakes">Number of cakes ordered: </label>
<input type="number" min="1" max="10" id="quantity" name="quantity" placeholder="Number
of cakes ..."><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
<footer>
<p>Copyright © 2024 Sea Fairy Bakery<br>
For additional information, contact: Lola Smith</p>
</footer>
</main>
</body>
</html>