<!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 #15 - Miscellaneous Elements</title>
<style>
* {
box-sizing:border-box;
}
body {
font-family:"Times New Roman", Times, serif;
width:96%;
margin: 0 auto;
}
.crescendo {
cursor:pointer;
}
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;
}
@media screen and (max-width: 600px) {
.tonynavbar .containersearch {
float: none;
}
.tonynavbar a, .containersearch input[type=text], .containersearch button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
}
.icon-bar {
position: fixed;
top: 1%;
right:1%;
-webkit-transform: translateY(-1%);
-ms-transform: translateY(-1%);
transform: translateY(-1%);
}
.icon-bar a {
display: block;
text-align: center;
padding: 12px;
transition: all 0.3s ease;
color: white;
font-size: 16px;
}
.icon-bar a:hover {
opacity: .6;
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.instagram {
background: #2262AA;
color: white;
}
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 {
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:33%;
height:220px;
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 {
position:absolute;
top:0px;
right:0px;
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:#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 {
position:absolute;
top:15px;
right:0px;
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:60%;
background: linear-gradient(135deg, khaki, khaki 60%, cadetblue);
font-family:sans-serif;
}
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 style="margin-right:75px;">
<img src="images/hero-small.jpg" alt="Sea Fairy" style="position:absolute; top:0; right:75px;">
<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>
<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>
<div class="tonynavbar">
<div class="dropsdown">
<button class="dropsbtn" style="background-color:#DAE3EF;">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">
<button type="submit" style="float:right;">Submit</button>
<form action="" style="background:none;">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</div>
<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>
<hr>
<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>
<section style="position:relative;">
<img src="images/catering-basket3-small.png" alt="Catering basket" style="position:absolute; top:0px; right:0px;">
<div class="jonathan">
<div class="louis">
<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>
</div>
<hr>
</section>
<article>
<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>
<aside style="position:relative; height:350px;">
<details style="width:50%;">
<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 src="images/spritzkuchen.jpg" alt="spritzkuchen" style="position:absolute; bottom:0px; left:0px;">
<div class="spring-fling">
<p id="annual-fling">2023 Spring Fling<br>
<a href="#springflingdate"><time datetime="2023-06-24">Date</a><br>
<a href="#springflingtime"><time datetime="2023-06-24T18:00">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>
<hr>
<div style="position:relative;">
<form name="customer-info" id="PC2" style="width:60%; margin-top:10px;">
<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" class="crescendo">
<input type="reset" value="Reset" class="crescendo">
</fieldset>
</form>
<div class="coupon">10% Off!<br><span style="font-size:15px;">This weekend only.
</div>
</div>
<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>