<!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 #11 - Border-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 ul {
 list-style-type: none;
 font-family:sans-serif;
 font-weight:bold;
 margin: 0;
 padding: 15px;
 overflow:hidden;
 background-color: #f1f1f1
}
nav ul li {
 display:inline;
}
nav ul li a {
 color: #01615D;
 padding: 14px 16px;
 text-decoration: none;
 text-align:center;
}
nav li a:hover {
 background-color:#555;
 color: white;
}
nav a:hover:not(.active) {
 background-color:orange;
 color: white;
}
.active {
 background-color: #DAE3EF;
 color: white;
}
.deliver {
 font-family:sans-serif;
 color:#01615D;
 text-shadow:4px 4px 5px #A8A8A8;
}
#delivery-services {
 color:#FF810C;
 font-weight:bold;
 list-style-image:url('images/car-bullet.png');
}
::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;
}
#news {
  padding-left: 50px;
  text-indent: -50px;
}
.jonathan {
 width:33%;
 padding-left:15px;
 border: 5px outset darkgoldenrod;
}
.coupon {
 float:right;
 width:250px;
 height:100px;;
 margin-top:15px;
 background-color: rgba(1, 97, 93, 0.5);
 color:white;
 padding:15px;
 border:3px dashed white;
 font-family: sans-serif;
 font-size: 30px;
 font-weight:bold;
 vertical-align:middle;
 text-align:center;
}
.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 {
 margin-left:60%;
 width:350px;
 text-align:right;
 font-variant:small-caps;
 letter-spacing:0.25em;
 font-weight:bold;
 color:#FF810C;
 font-family:sans-serif;
 padding:3px;
 border:15px solid transparent;
 border-image:url(images/flower-border.png) 15 15 round;
}

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;
}
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;
}
footer {
 font-size:.8em;
 text-align:center;
}
</style>
</head>
<body>
<header>
 <hgroup>
  <h1><img src="images/mermaid3-small.png" alt="logo" style="vertical-align:middle;"> The Sea Fairy Bakery</h1>
  <img src="images/hero-small.jpg" alt="Sea Fairy" style="float:right;"> 
  <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="index.html" class="active"r>Sea Fairy Bakery</a></li>
  <li><a href="desserts.html">Desserts</a></li>
  <li><a href="breads.html">Breads</a></li>
  <li><a href="gatherings.html">Gatherings</a></li>
  <li><a href="tearoom.html">Tea Room</a></li>
  <li><a href="aboutus.html">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>

<div style="border-left:5px dotted #01615D;">
<p id="news" style="margin-left:5px;"><span class="press">News</span>    Don't miss our annual <a href="#annual-fling">Spring Fling!</a></p>
<p style="padding-left:80px; margin-top:-5px;">With wedding season fast approaching, it's time to get your <a href="cake-ordering-form.html" target="_blank">cake order</a> in. We're available to <span class="press" style="cursor:help;">Help</span> with your order.</p>
<p style="padding-left:80px; margin-top:-5px;">Our special this month is:<a href="croissants.html" target="_blank"><img src="images/croissant.png" style="width:90px; height:48px; vertical-align:middle;"></a> Click on the croissant to learn more.</p> 
</div>

<section>
 <img src="images/catering-basket3-small.png" alt="Catering basket" style="float:right; margin-top:-15px;">
 <div class="jonathan">
  <p class="deliver">We Deliver!</p>
    <ul id="delivery-services" style="margin-left:15px;">
	<li>Postmates</li>
    <li>GrubHub</li>
    <li>DoorDash</li>
	</ul>
  <p class="call">Call us at <a href="tel:1-800-555-1212">1-800-555-1212</a></p>
  <p lang="es">nosotros hablamos español.</p>
 </div>
</section>

 <article style="width:73%; border-right:5px dotted #01615D;">
 <p><span class="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>
    <ul>
	<li>Enjoy our <dfn>Spritzkuchen</dfn>, a German fried partry that is similar to a doughnut.</li>
	<li>Spring Cupcakes:
	  <ul>
	  <li>Lemon chiffon</li>
	  <li>Strawberry</li>
	  <li>Raspberry</li>
	  </ul>
	  </li>
	</ul>
 </details>
 <img style="float:left; margin-top:15px;" src="images/spritzkuchen.jpg" alt="spritzkuchen">

 <div class="spring-fling">
 <p id="annual-fling">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>

<div class="coupon">10% Off!<br><span style="font-size:15px;">This weekend only.
</div>

<form name="customer-info" id="PC2" style="width:60%;">
 <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: <a href="mailto:info@seafairybakery.com">Lola Smith</a></p>
</footer>
</main>
</body>
</html>