<!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 #13 - Background Elements</title>
<style>
* {
box-sizing:border-box;
}
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 {
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;
}
<span style="color:red; font-weight:bold;">.louis {
background: linear-gradient(to right, rgba(173,216,230,0), rgba(173,216,230,1));</span>
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;
<span style="color:red; font-weight:bold;">background-color:rgba(240, 230, 140, 0.3); background-clip:padding-box;</span>
}
form {
width:60%;
<span style="color:red; font-weight:bold;">background: linear-gradient(135deg, khaki, khaki 60%, cadetblue);</span>
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 style="position:relative;">
<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="position:absolute; right:0px; top:0px; border:2px solid gold;">
<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="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>
<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>
</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>
<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">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 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">
<input type="reset" value="Reset">
</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>