<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Exercise #17 - Grid Elements</title>
<style>
* {
 box-sizing:border-box; 
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  padding: 3px;
}
.grid-container > div {
  padding: 5px;
}
.item1 {
  grid-column-start: 1;
  grid-column-end:3;
  border:2px solid red;
}
.item2 {
  grid-column-start: 3;
  grid-column-end:4;
  border:2px solid red;
}
.item3 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item4 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item5 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item6 {
  grid-column-start: 1;
  grid-column-end:3;
  border:2px solid red;
}
.item7 {
  grid-column-start: 3;
  grid-column-end:4;
  border:2px solid red;
}
.item8 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item9 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item10 {
  grid-column-start: 1;
  grid-column-end:3;
  border:2px solid red;
}  
.item11 {
  grid-column-start: 3;
  grid-column-end:4;
  border:2px solid red;
}
.item12 {
 grid-column-start: 1;
 grid-column-end:3;
 border:2px solid red;
}
.item13 {
 grid-column-start: 3;
 grid-column-end:4;
 border:2px solid red;
}
.item14 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;
}
.item15 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;
}
@media only screen and (max-width: 600px) {
.item1 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item2 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item3 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item4 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item5 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item6 {
  grid-column-start: 1;
  grid-column-end: 4;
  border:2px solid red;
}
.item7 {
  grid-column-start: 1;
  grid-column-end: 4;
  border:2px solid red;
}
.item8 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item9 {
  grid-column-start: 1;
  grid-column-end: 4;
  border:2px solid red;
}
.item10 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}  
.item11 {
  grid-column-start: 1;
  grid-column-end:4;
  border:2px solid red;
}
.item12 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;
}
.item13 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;
}
.item14 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;
}
.item15 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;}
}
.item16 {
 grid-column-start: 1;
 grid-column-end:4;
 border:2px solid red;}
}

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;
}
hr {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  border:5px inset rgba(173,216,230, 0.5);
}
.tonynavbar {
 overflow: hidden;
 background-color: #f1f1f1;
 border:1px solid #BFC0CC;
 font-family: Arial, Helvetica, sans-serif;
 font-weight:bold;
 width:100%;
}
.tonynavbar a {
 float: left;
 font-size: 16px;
 color:#01615D;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}
.dropsdown {
  float: left;
  overflow: hidden;
}
.dropsdown .dropsbtn {
 font-size: 16px;    
 border: none;
 outline: none;
 color:#01615D;
 padding: 14px 16px;
 background-color: inherit;
 font-family: inherit;
 font-weight:bold;
 margin: 0;
}
.tonynavbar a:hover, .dropsdown:hover .dropsbtn {
 background-color:#DAE3EF;
}
.dropsdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}
.dropsdown-content a {
 float: none;
 color:#01615D;
 padding: 8px 10px;
 text-decoration: none;
 display: block;
 text-align: left;
 font-weight:normal;
}
.dropsdown-content a:hover {
 background-color: #ddd;
}
.dropsdown:hover .dropsdown-content {
 display: block;
}
.tonynavbar .containersearch {
 float: right;
}
.containersearch input[type=text] {
 padding: 6px;
 margin-top: 8px;
 font-size: 17px;
 border: none;
}
.tonynavbar .containersearch button {
 position:absolute;
 right:25px;
 padding: 6px;
 margin-top: 8px;
 background: #A0A0A0;
 color:white;
 font-size: 17px;
 border: none;
 cursor: pointer;
}
.tonynavbar .containersearch button:hover {
 background: #ccc;
}
#divMenu, ul, li, li li {  
    margin: 0;  
    padding: 0;  
}  
#divMenu {  
    width: 200px;  
    height: 47px;
}  
#divMenu ul  {  
	line-height: 45px;  
}  
#divMenu li {  
	list-style: none;  
    position: relative;  
    background: lightblue;
	font-weight:bold;		
}  
#divMenu li li {  
	list-style: none;  
    position: relative;  
    background: lightblue;  
    left: 198px;  
    top: -47px;  
}    
       
#divMenu ul li a {  
    width: 198px;  
    height: 45px;  
	display: block;  
    text-decoration: none;  
    text-align: center;  
    font-family: sans-serif;  
    color:#01615D;  
    border:1px solid #eee;  
}  
#divMenu ul ul {  
    position: absolute;  
    visibility: hidden;  
    top: 27px;  
}  
#divMenu ul li:hover ul {  
	visibility: visible;  
}  
#divMenu li:hover {  
	background-color: #DAE3EF; 
}  
#divMenu ul li:hover ul li a:hover {  
    background-color: #DAE3EF; 
}  
#divMenu a:hover {  
	font-weight: bold;  
} 
@media only screen and (min-width: 601px) {
 .item16 {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .item3 {
    display: none;
  }
  .item16 {
    height:360px;
	}
  #divMenu input[type=text] {
    display:block;
    text-align:left;
    width:100%;
    margin:0;
    padding: 14px;
    border:1px solid #ccc;
   }	
}
.icon-bar {
 position: fixed;
 top: 3%;
 right:3%;
 -webkit-transform: translateY(-3%);
 -ms-transform: translateY(-3%);
 transform: translateY(-3%);
}
.icon-bar a {
 display: block;
 text-align: center;
 padding: 12px;
 transition: all 0.3s ease;
 color: white;
 font-size: 16px;
}
.icon-bar a:hover {
  background-color: #000;
}
.facebook {
  background: #3B5998;
  color: white;
}
.twitter {
  background: #55ACEE;
  color: white;
}
.youtube {
  background: #bb0000;
  color: white;
}
.instagram {
  background: #2262AA;
  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 {
 width:76%;
 height:150px; 
  border-right:10px dotted #01615D;
   background-image:url(images/vintage-newspaper.jpg); background-clip:padding-box; 
  padding:3px 0;
  margin-bottom:8px; margin-top:10px;
}
article > p {
   padding-left: 50px; 
  text-indent: -50px;
  
}
#news {
  padding-left: 50px; 
  text-indent: -50px;
  margin-left:10px;
}
.jonathan {
 width:50%;
 padding-left:15px; 
 border: 5px outset darkgoldenrod;
 background-image:url(images/hamburger-background.png);
 background-repeat:no-repeat;
 background-position: 100% 0%;
 background-origin:padding-box;
}
.louis {
  background: linear-gradient(to right, rgba(173,216,230,0), rgba(173,216,230,1));
  height:210px;
  margin-top:-15px;
}
.coupon {
 background-color: rgba(1, 97, 93, 0.5);
 padding:15px;
 color:white;
 border:3px dashed white; 
 font-family: sans-serif;
 font-size: 30px;
 font-weight:bold;
 vertical-align:middle;
 text-align:center;
 max-width:250px;
}
.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:#01615D;
}
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;
}
.pensacola {
  background:linear-gradient(to top left, white, lightblue);
}
.spring-fling {
 margin-left:60%;
 width:350px;
 padding:3px; 
 text-align:right;
 font-variant:small-caps;
 letter-spacing:0.25em;
 font-weight:bold;
 color:#FF810C;
 font-family:sans-serif;
 border:15px solid transparent;
 border-image:url(images/flower-border.png) 15 15 round;
  background-color:rgba(240, 230, 140, 0.3); background-clip:padding-box;
}
form {
 width:70%;
  background: linear-gradient(135deg, khaki, khaki 60%, cadetblue);
 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;
}
.green-box {
 position:relative; 
 z-index:1;
 padding:3px;
}
.gold-box { 
 position:absolute;
 z-index:2;
 left:0;
 top:65px;
}
.blue-box { 
 position:absolute;
 z-index:3;
 left:165px;
 top:11x;
}
.black-box {
 position:absolute;
 font-family:sans-serif;
 width:320px;
 z-index:4;
 top:120px;
 left:180px;
 color:white;
 font-size:300%;
 font-weight:bold;
}
.jeffrey {
 border-collapse:collapse;
 width:70%;
 border:5px inset rgba(173,216,230, 0.5);
 padding:7px;
 font-family:sans-serif;
 margin-bottom:20px;
}
.jeffrey th, td {
 border:5px inset rgba(173,216,230, 0.5);
 padding:7px;
}
.jeffrey th {
 color:white:
 background-color:lightblue;
 text-align:left;
 font-size:120%;
}
.jeffrey tr:nth-child(odd) {
 background-color:#FAFAD2;
}
.jeffrey tr:nth-child(even) {
 background-color:#E0FFFF;
}
caption {
 font-weight:bold;
 color:cadetblue;
 font-size:120%;
 font-family:sans-serif;
 margin-bottom:10px;
}
</style>
</head>
<body>
<div class="grid-container">

<div class="item1">
 <hgroup>
  <h1 style="font-family:cursive; color:#01615D;"><img src="images/mermaid3-small.png" alt="logo" style="vertical-align:middle;"> The Sea Fairy Bakery</h1>
  <h3 style="font-family:cursive; color:#01615D;">Webster's Premier Bakery</h3>
 </hgroup>
 <p style="font-variant:small-caps;
 font-size:1em; 
 letter-spacing:0.25em; 
 color:#FF810C;
 font-weight:bold;">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>
</div>

<div class="item2">
 <img src="images/hero-small.jpg" alt="Sea Fairy">
<div class="icon-bar">
  <a href="#" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a> 
  <a href="#" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a>
  <a href="#" class="youtube" target="_blank"><i class="fa fa-youtube"></i></a>   
  <a href="#" class="instagram" target="_blank"><i class="fa fa-instagram"></i></a> 
</div>
</div>

<div class="item3">
<div class="tonynavbar">
 <div class="dropsdown">
  <button class="dropsbtn">Home
  </button>
 </div>
 <div class="dropsdown">
  <button class="dropsbtn">Desserts <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropsdown-content">
   <a href="#">Cakes & Tarts</a>
   <a href="#">Pies & Pastries</a>
   <a href="#">Cookies & Cupcakes</a>
  </div>
  </div>
  <div class="dropsdown">
   <button class="dropsbtn">Breads <i class="fa fa-caret-down"></i>
   </button>
   <div class="dropsdown-content">
    <a href="#">Loaves</a>
    <a href="#">Other Bread</a>
    <a href="#">Muffins</a>
   </div>
   </div>
   <div class="dropsdown">
    <button class="dropsbtn">Gatherings <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropsdown-content">
     <a href="#">Catering Menu</a>
    </div>
    </div>
    <div class="dropsdown">
     <button class="dropsbtn">Tea Room <i class="fa fa-caret-down"></i>
     </button>
    <div class="dropsdown-content">
     <a href="#">Breakfast Menu</a>
     <a href="#">Lunch Menu</a>
     <a href="#">Dinner Menu</a>
	 <a href="#">Spring Specials</a>
    </div>
  </div>
  <div class="dropsdown">
   <button class="dropsbtn">About Us <i class="fa fa-caret-down"></i>
   </button>
   <div class="dropsdown-content">
    <a href="#">Privacy Policy</a>
    <a href="#">Terms & Conditions</a>
    <a href="#">FAQs</a>
    </div>
  </div>
  <div class="containersearch" style="position:relative;">
    <button type="submit" style="position:absolute; right:0;">Submit</button>
    <form action="" style="background:none;">
      <input type="text" placeholder="Search..." name="search">    
    </form>
  </div>
</div>
</div>
<div class="item16">
<div id="divMenu">    
	<ul>    
		<li><a href="#">Home</a>    
		</li>    
		<li><a href="#">Desserts</a>    
			<ul>    
				<li><a href="#">Cakes & Tarts</a></li>    
				<li><a href="#">Pies & Pastries</a></li>    
				<li><a href="#">Cookies & Cupcakes</a></li>    
			</ul>
		</li>    
		<li><a href="#">Breads</a>    
			<ul>    
				<li><a href="#">Loaves</a></li>    
				<li><a href="#">Other Breads</a></li>    
				<li><a href="#">Muffins</a></li>    
			</ul>
		</li>    
		<li><a href="#">Gatherings</a>
			<ul>    
				<li><a href="#">Breakfast Menu</a></li>    
				<li><a href="#">Lunch Menu</a></li>    
				<li><a href="#">Dinner Menu</a></li>
				<li><a href="#">Spring Specials</a></li>	
			</ul>
		</li>    
		<li><a href="#">Tea Room</a>    
			<ul>    
				<li><a href="#">Breakfast Menu</a></li>    
				<li><a href="#">Lunch Menu</a></li>    
				<li><a href="#">Dinner Menu</a></li>
				<li><a href="#">Spring Specials</a></li>	
			</ul>
		</li>    
		<li><a href="#">About Us</a>
			<ul>    
				<li><a href="#">Privacy Policy</a></li>    
				<li><a href="#">Terms & Conditions</a></li>    
				<li><a href="#">FAQs</a></li>
			</ul>
		</li>
	</ul>		
</div>       
</div>

<div class="item4">
 <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>
<hr>
</div>

<div class="item5">
  <div style="margin-left:5px; border-left:10px dotted  #01615D;">
  <div class="pensacola"> 
  <p id="news"><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>
</div>
<hr>
</div>

<div class="item6">
  <div class="jonathan">
   <div class="louis">
    <p class="deliver">We Deliver!</p>
    <ul id="delivery-services" style="margin-left:45px;">
	<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>
</div>
</div>

<div class="item7">
  <img src="images/catering-basket3-small.png" alt="Catering basket">
</div>

<div class="item8">
<hr>
  <div style="height:200px; width:90%; overflow-y:auto;">
<table class="jeffrey" style="width:100%;">
  <caption>Featured Cakes This Month
  </caption>
 <tr>
  <th style="background-color:lightblue; color:white;">Cake</th>
  <th style="background-color:lightblue; color:white;"># Servings</th>
 </tr>
 <tr>
  <td>Round 12-inch Vanilla</td>
  <td>8</td>
 </tr>
 <tr>
  <td>Sheet 16-inch Chocolate</td>
  <td>12</td>
 </tr>
 <tr>
  <td>Sheet 20-inch Strawberry</td>
  <td>16</td>
 </tr>
 <tr>
  <td>Sheet 24-inch Tres Leches</td>
  <td>20</td>
 </tr>
</table>
</div>
<hr>
</div>

<div class="item9">
 <article style="height:80%;">
 <p style="margin-left:5px;">
  <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>
 </p>
 </article>
<hr>
</div>

<div class="item10">
 <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><br>
 <img src="images/spritzkuchen.jpg" alt="spritzkuchen">
</div>

<div class="item11">
  <div class="spring-fling" style="margin-left:-10px;">
     <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">
     <time datetime="2023-06-24T18:00:00-05:00">6:00 p.m.</time> - <time datetime="2023-06-24T23:59:59-05:00">2:00 a.m.</time>
	 </p>
     <p>Call us for more information.
     </p>
  </div>
</div>

<div class="item12">
 <form name="customer-info" id="PC2" style="width:100%;">
   <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 ...">
  </form>
  <p><b>Cake Size Calculator:</b><br>
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)" style="background:none; margin-top:3px;">
<label for "a"><b># Attendees:</b></label>
<input type="number" id="a" value="10" style="width:60px;">
* 
<label for "b"><b># Slices/Attendee:</b></label> 
<input type="number" id="b" value="1" style="width:60px;">
= <output name="x" for="a b" style="padding:5px; border:1px solid black;">
</output>  <label for "x"><b>Total slices</b>
</label><br>
<input type="submit" value="Submit" style="margin-top:5px;">
<input type="reset" value="Reset" style="margin-top:5px;">
</fieldset>
</form>
</div>

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

<div class="item15">
  <p style="text-align:center;">Copyright © 2024 Sea Fairy Bakery<br>
   For additional information, contact: <a href="mailto:info@seafairybakery.com">Lola Smith</a></p>
</div>
</div>

</body>
</html>