<!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>