<!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 #23 - Tooltips</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;
}
.item2 {
grid-column-start: 3;
grid-column-end:4;
}
.item3 {
grid-column-start: 1;
grid-column-end:4;
}
.item4 {
grid-column-start: 1;
grid-column-end:4;
}
.item5 {
grid-column-start: 1;
grid-column-end:4;
}
.item6 {
grid-column-start: 1;
grid-column-end:3;
}
.item7 {
grid-column-start: 3;
grid-column-end:4;
}
.item8 {
grid-column-start: 1;
grid-column-end:4;
}
.item9 {
grid-column-start: 1;
grid-column-end:4;
}
.item10 {
grid-column-start: 1;
grid-column-end:3;
}
.item11 {
grid-column-start: 3;
grid-column-end:4;
}
.item12 {
grid-column-start: 1;
grid-column-end:3;
}
.item13 {
grid-column-start: 3;
grid-column-end:4;
}
.item14 {
grid-column-start: 1;
grid-column-end:3;
}
.item15 {
grid-column-start: 3;
grid-column-end: 4;
}
.item17 {
grid-column-start: 1;
grid-column-end:4;
border:2px solid red;
}
.item18 {
grid-column-start:3;
grid-column-end: 4;
}
.item19 {
grid-column-start:1;
grid-column-end: 3;
}
@media only screen and (max-width: 600px) {
.item1 {
grid-column-start: 1;
grid-column-end:4;
}
.item2 {
grid-column-start: 1;
grid-column-end:4;
}
.item3 {
grid-column-start: 1;
grid-column-end:4;
}
.item4 {
grid-column-start: 1;
grid-column-end:4;
}
.item5 {
grid-column-start: 1;
grid-column-end:4;
}
.item6 {
grid-column-start: 1;
grid-column-end: 4;
}
.item7 {
grid-column-start: 1;
grid-column-end: 4;
}
.item8 {
grid-column-start: 1;
grid-column-end:4;
}
.item9 {
grid-column-start: 1;
grid-column-end: 4;
}
.item10 {
grid-column-start: 1;
grid-column-end:4;
}
.item11 {
grid-column-start: 1;
grid-column-end:4;
}
.item12 {
grid-column-start: 1;
grid-column-end:4;
}
.item13 {
grid-column-start: 1;
grid-column-end:4;
}
.item14 {
grid-column-start: 1;
grid-column-end:4;
}
.item15 {
grid-column-start: 1;
grid-column-end:4;}
}
.item16 {
grid-column-start: 1;
grid-column-end:4;}
}
.item17 {
grid-column-start: 1;
grid-column-end:4;}
}
.item18 {
grid-column-start: 1;
grid-column-end:4;}
}
.item19 {
grid-column-start:1;
grid-column-end: 4;}
.tooltiphelp {
position: relative;
display: inline-block;
border-bottom: 5px dotted cadetblue;
}
.tooltiphelp .tooltiptexthelp {
visibility: hidden;
width: 240px;
background-color: lightblue;
text-transform:none;
font: 16px Arial, sans-serif;
text-shadow:none;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltiphelp:hover .tooltiptexthelp {
visibility: visible;
}
.tooltipreallife {
position: relative;
display: inline-block;
border-bottom: 5px dotted cadetblue;
}
.tooltipreallife .tooltiptextreallife {
visibility: hidden;
width: 240px;
background-color: lightblue;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltipreallife:hover .tooltiptextreallife {
visibility: visible;
}
.flip-box {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
border-radius:50%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front {
background:transparent;
border-radius:50%;
}
.flip-box-back {
background-color: #01615D;
color: white;
border-radius:50%;
transform: rotateY(180deg);
}
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);
}
img#hero-small {
width: 291px;
height: 172px;
transition: width 2s, height 2s;
}
img#hero-small:hover {
width: 676px;
height: 400px;
}
img#catering-basket {
width: 315px;
height: 182px;
transition: width 2s, height 2s;
}
img#catering-basket:hover {
width: 600px;
height: 347px;
}
.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;
}
q {
quotes: '\2018' '\2019';
font-size:200%;
color:#01615D;
}
@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;
cursor: help;
}
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"></span>
<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" style="position:relative;"></span>
<img src="images/hero-small.jpg" id="hero-small" alt="Sea Fairy" style="position:absolute; top:10px; right:30%;">
<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"></span>
<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"></span>
<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"></span>
<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 <span class="tooltipreallife">made-from-scratch <span class="tooltiptextreallife">We use only the finest ingredients, from vanilla from Madagascar to stone-ground flour from Pennsylvania and cream from Vermont.</span></span> desserts throughout the day, starting at 7:00 a.m. Our famous Tea Room features a variety of daily specials, including soups and sandwiches. Below are some of the delicious pastries we've baked for you today:</p>
<video controls src="sound/bakery-video.mp4" type="video/mp4" style="width:480px;">
</video>
<hr>
</div>
<div class="item5"></span>
<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 tooltiphelp">Help <span class="tooltiptexthelp">For cake orders, we primarily need to know how many people you want to feed, the date on which you need the cake, and how long the cake will be unrefrigerated.</span></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"></span>
<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"></span>
<img src="images/catering-basket3-small.png" id="catering-basket" alt="Catering basket">
</div>
<div class="item8"></span>
<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"></span>
<article style="height:90%;">
<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" style="font-size:16px;">
<q><span style="font-size:smaller;">... 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.</span></q>
</blockquote>
</p>
</article>
<hr>
</div>
<div class="item10"></span>
<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"></span>
<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>
<audio controls>
<source src="sound/crowd-cheer.mp3" type="audio/mp3">
</audio>
</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"></span>
<div class="coupon">10% Off!<br>
<span style="font-size:15px;">This weekend only.</span>
</div>
</div>
<div class="item14" style="height:350px; border:30px solid transparent; position:relative; border-image-source:url(images/autumn-leaf-border2.png);
border-image-repeat:round; border-image-slice:30;">
<p style="color:#01615D; font-family:sans-serif; font-size:1.2em; font-weight:bold; text-align:center;">Monthly Specials</p>
<p style="text-align:center;">Click on the cookie to see our monthly specials.</p>
<div class="flip-box" style="position:absolute; left:30%;">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="images/chocolate-chip-cookie.png">
</div>
<div class="flip-box-back">
<p style="padding-top:15px;"><span style="font-size:14px; font-weight:bold;">Specials This Month</span><br><br>
Apple Cinnamon Muffin<br>
Tiramisu Cake<br>
Peanut Butter Cookies</p>
</div>
</div>
</div>
</div>
<div class="item15">
<iframe src="catering-menu.html" name="catering-menu" style="width:100%; height:300px; border:1px solid #01615D;">
</iframe>
</div>
<div class="item19">
<iframe src="endlesscup.html" style="width:100%; height:300px; border:none;">
</iframe>
</div>
<div class="item18" style="margin-top:50px; width:100%;">
<p>Copyright © 2024 Sea Fairy Bakery<br>
For additional information, contact: <a href="mailto:info@seafairybakery.com">Lola Smith</a></p>
</div>
</div>
</body>
</html>