<!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 #22 - Transitions and Transforms</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:1;
grid-column-end: 4;
border:2px solid darkgreen;
}
@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;
}
}
.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;
}
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" 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 <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. 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" 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"></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" 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"></span>
<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; 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">
<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:none;">
</iframe>
<div class="item 17">
</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>