sb_payment_txt.html <!DOCTYPE html> <html lang=\"en\"> <head> <!-- New Perspecti

ID: 3734490 • Letter: S

Question

sb_payment_txt.html

<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 2

Spice Bowl Payment Form
Author:
Date:

Filename: sb_payment.html

-->

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spice Bowl Payment Form</title>
<link href="sb_reset.css" rel="stylesheet" />
<link href="sb_styles.css" rel="stylesheet" />
</head>

<nav> <a id="navicon" href="#"><img src="sb_navicon.png" alt="" /></a>
<ul>
<li><a href="#">Spices</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">My Cart</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>

<section>
<h1>Payment Form</h1>

<aside>
<h1>Menu Ideas</h1>
<h2>Salt-Roasted Pecans</h2>
<ul>
<li>2 cups pecans</li>
<li>3 Tbs. butter, melted</li>
<li>1 1/4 tsp. fine sea salt</li>
</ul>
<p>Preheat oven to 325°. Toss pecans and butter together;
add salt and toss again. Spread in a single layer on a baking
sheet. Bake about 15 minutes. Cook on baking sheet.
</p>

<h2>Dried Beef Sticks</h2>
<ul>
<li>5 lbs. ground chuck</li>
<li>5 Tbs. quick salt</li>
<li>3 tsp. mustard seed</li>
<li>2 tsp. granulated garlic</li>
<li>2 tsp. cracked pepper</li>
<li>1 Tbs. hickory smoked salt</li>
<li>1 Tbs. liquid smoke</li>
</ul>
<p>Mix beef and season. Place in a large covered container
for three days.
On third day, shape beef into sticks, and bake at 150° for
8 hours (turn half-way through).
</p>
</aside>

</section>

<footer>
<nav>
<ul>
<li class="newgroup"><a href="#">Home</a></li>
<li><a href="#">Keyword Search</a></li>

<li class="newgroup"><a href="#">Spices</a></li>
<li><a href="#">Seasonings</a></li>
<li><a href="#">Blends</a></li>
<li><a href="#">Salts & Peppers</a></li>
<li><a href="#">Popcorn Seasonings</a></li>
<li><a href="#">Dip Mixes</a></li>
<li><a href="#">Bulk Spices</a></li>
<li><a href="#">Extracts</a></li>
<li><a href="#">Flavorings</a></li>

<li class="newgroup"><a href="#">Spice Jars</a></li>
<li><a href="#">Spice Jar Labels</a></li>
<li><a href="#">Spice Sets</a></li>
<li><a href="#">Mortar & Pestles</a></li>

<li class="newgroup"><a href="#">Cookbooks</a></li>
<li><a href="#">Online Recipes</a></li>
<li><a href="#">Forums</a></li>

<li class="newgroup"><a href="#">My Account</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Shipping Info</a></li>

<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>

sb_validate_txt.css

/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 2

Spice Bowl Payment Form Validation Style Sheet
Author:
Date:

Filename: sb_validate.css

/* Validation Styles */

sb_styles.css

@charset "utf-8";

/*
New Perspectives on HTML and CSS
Tutorial 7
Case Problem 2

Spice Bowl General Style Sheet

Filename: sb_styles.css

/* HTML and Body styles */

html {
background: url(sb_back.png) center center/cover fixed no-repeat;
font-family: Verdana, Geneva, sans-serif;
height: 100%;
}

body {
background-color: rgba(255, 255, 255, 0.4);
border-left: 1px solid white;
border-right: 1px solid white;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
position: relative;
margin: 0px auto;
min-width: 320px;
max-width: 1020px;
width: 100%;
}

/* Header styles */

header > img {
width: 50%;
}

header {
background: rgba(234, 145, 29, 0.5);
width: 100%;
}

/* Navigation list styles */

a#navicon {
display: none;
}

header nav ul li {
font-size: 1.2em;
line-height: 2.3em;
height: 2.3em;
padding: 0px 10px;
}

header nav {
background-color: rgba(51, 51, 51, 0.35);
clear: both;
width: 100%;
}

header nav ul li a {
color: white;
display: block;
width: 100%;
}

header nav ul li a:hover {
color: rgb(249, 209, 17);
text-shadow: rgb(51, 51, 51) 0px 0px 5px;
}

a#navicon {
display: none;
}

/* Section Styles */

section {
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
padding: 40px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

section > h1 {
font-size: 2.2em;
color: rgb(206, 141, 56);
letter-spacing: 0.2em;
font-weight: normal;
text-shadow: rgba(255, 255, 255, 0.8) 3px 3px 0px;
flex: 0 0 100%;
}

section form {
-webkit-flex: 3 1 4800px;
flex: 3 1 480px;
margin-top: 25px;
margin-right: 20px;
}

section aside {
color: rgb(206, 141, 56);
-webkit-flex: 1 3 161px;
flex: 1 3 161px;
margin-top: 25px;
font-size: 0.8em;
padding: 0px 15px;
}

section aside h1 {
font-size: 1.5em;
line-height: 1.5em;
}

section aside h2 {
font-size: 1.2em;
margin: 10px 0px 5px;
}

section aside ul {
border-top: 1px solid rgb(206, 141, 56);
border-bottom: 1px solid rgb(206, 141, 56);
margin: 0px 0px 10px 10px;
}

/* Footer Styles */

footer {
width: 100%;
}

footer nav {
background: rgba(184, 85, 0, 0.35);
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;

-moz-column-gap: 25px;
-webkit-column-gap: 25px;
column-gap: 25px;

padding: 20px 40px;

}

footer li.newgroup {
margin-top: 12px;
}

footer a {
display: block;
color: white;
text-decoration: none;
font-size: 0.9em;
}

footer a:hover {
text-decoration: underline;
}

/* ===============================
Mobile Styles: 0px to 640px
===============================
*/
@media only screen and (max-width: 640px) {

aside {
display: none;
}

a#navicon {
display: block;
}

header > img {
width: 100%;
}

header nav ul {
display: none;
}

header nav ul li {
font-size: 1em;
line-height: 1.3em;
height: 1.3em;
}

section > h1 {
line-height: 1.2em;
}

a#navicon:hover+ul, header nav ul:hover {
display: block;
}
}

/* =============================================
Tablet and Desktop Styles: greater than 640px
=============================================
*/
@media only screen and (min-width: 641px) {

body header nav ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
justify-content: center;
}

body header nav ul li {
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
}

sb_reset.css

@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 2

Spice Bowl Reset Style Sheet

Filename: sb_reset.css

/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}

address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul,
table, tr, td, th, col, colgroup {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Set the default page element styles */

body {
line-height: 1.2em;
}

ul, ol {
list-style: none;
}

nav ul {
list-style: none;
list-style-image: none;
}

nav a {
text-decoration: none;
}

sb_forms.css

/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 2

Spice Bowl Forms Style Sheet

Filename: sb_forms.css

/* Login Form Layout Styles */

form#login {
float: right;
}

form#login input {
margin: 10px;
}

/* Form Layout Styles */

form#payment {
background-color: rgba(206, 141, 56, 0.1);
}

fieldset {
border: none;
}

legend {
background-color: rgba(206, 141, 56, 0.7);
color: rgba(255, 255, 255, 0.7);
font-size: 0.9em;
border-radius: 10px;
margin-bottom: 10px;
padding: 8px;
width: 100%;
}

/* Input and Label Styles */

label {
display: block;
float: left;
clear: left;
font-size: 0.9em;
margin-bottom: 10px;
margin-right: 10px;
width: 180px;
text-align: right;
}

form#payment input, form#payment select {
display: block;
float: left;
}

/* Radio Button Styles */

label.cardLabel {
display: inline-block;
float: none;
width: auto;
}

label.cardLabel img {
border: 1px solid rgb(181, 181, 181);
box-shadow: rgb(51, 51, 51) 0px 0px 10px;
}

input[type='radio'] {
width: auto;
float: none;
clear: none;
margin-right: 15px;
}

/* Submit Button Styles */

button {
background: transparent;
border: none;
display: block;
margin: 5px auto;
}

Case Problenm Data Files needed for this Case Problem: sb_payment txt.html, sb_validate_txt.css, 3 CSS files, 1 JavaScript file, 10 PNG files, 2 TXT files 4The Spice Bowl Rita Sato is the manager of the web development team for The Spice Bowl, an online grocery store specializing in gourmet spices. She has asked you to create web forms for the site. You will start your work by developing a payment form used to collect billing and credit data from the store's customers. The form should include validation tests for credit card numbers to ensure that the card numbers match the correct credit card number patterns. The page should also include a form in which users can log into their Spice Bowl account. Figure 7-63 shows a preview of the page you will create for Rita. Figure 7-6:3 Payment form for the Spice Bowl Ihe Spice Bow Spices Recipes My Cart My Account Contact Us Payment Form Biling Infurrnation Erequired Menu Ideas Salt-Roasted Pecans First Name Rta Last Name Sato Street Address 871 Park St 2 cups pecans 3 Tbs. butter, melted 1/4 p. fine sea sale prehaat 0ven to 325c. Tas pecans and butter together add salt and toss again. Spread in a single layer on a balking sheet. Bake about is mintes. Cook on baking Street Address (2) City East Paint State ZIP/Postal Code 30344 Dried Beef Sticks S lbs. ground chuck 5 Tbs. qulick salt 3 tsp. mustard seed 2 tsp, granulated garlic 2 tsp, cacked pepper 1 Tbs. Nekory smoked salt 1 Tbs VISA smoke Credit Card Number 012123456789019 Mix beef and season, Place in a large covered coainer for three days On third day shape beef Into sticks, and bake at 1sD for 8 houes (turn halle-way through) Expiration Date Bdy CSC next Popcorm Seasonings Dip Mixes Bulk Spices Extracts Spice Sets Mortar & Pestles Checkout order History Shipping Info Keyword Search Spices slends Online Recipes Tech Support Spice Jars Spice Jar Labels Salts & Peppers My Account e Natalia MasterCard Inc.; Visa, Inc. Sources: American Express Company; Discover Financial Services

Explanation / Answer

I have modified the given html based on the requirement that given in the question. I couldn't get the script and sb_regex.txt so i couldn't do the regex validation.

And please place the images with the same name in root folder where the html file located. In my case i have added the images with the same name as given.

Below is the Altered HTML Code

************************sb_payment.html HTML**********************

<!DOCTYPE html>

<head>

<!--

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 7

Case Problem 2

Spice Bowl Payment Form

Author:

Date:

Filename: sb_payment.html

-->

<title>Spice Bowl Payment Form</title>

</head>

<body>

</form>

<ul>

<li><a href="#">Spices</a></li>

<li><a href="#">Recipes</a></li>

<li><a href="#">My Account</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

</header>

<h1>Payment Form</h1>

<legend>Billing Information (Required)</legend>

<label>First Name</label><input id="firstBox" type="text" required/>

<label>Street Address</label><input id="streetBox" type="text" required/>

<label>Street Address (2)</label><input id="streetBox2" type="text"/>

<label>State</label><input list="stateBox" required/>

<label>Zip/Postal Code</label><input pattern="^d{5}(-d{4})?$" id="zipBox" type="text"/>

<label>Country</label><input id="countryBox" type="text" value="United States" required/>

<label>Phone</label><input id="phoneBox" type="text" required/>

</datalist>

</fieldset>

<legend>Credit Card (Required)</legend>

<label>Credit Card Number</label><input id="cardBox" type="text" required/>

<label>Expiration Date</label><input list="monthList" type="text" required/><input list="yearList" type="text" required/>

</datalist>

</datalist>

</fieldset>

</form>

<aside>

<h1>Menu Ideas</h1>

<h2>Salt-Roasted Pecans</h2>

<ul>

<li>2 cups pecans</li>

<li>3 Tbs. butter, melted</li>

</ul>

<p>Preheat oven to 325°. Toss pecans and butter together;

add salt and toss again. Spread in a single layer on a baking

sheet. Bake about 15 minutes. Cook on baking sheet.

</p>

<h2>Dried Beef Sticks</h2>

<ul>

<li>5 lbs. ground chuck</li>

<li>5 Tbs. quick salt</li>

<li>3 tsp. mustard seed</li>

<li>2 tsp. granulated garlic</li>

<li>2 tsp. cracked pepper</li>

<li>1 Tbs. hickory smoked salt</li>

<li>1 Tbs. liquid smoke</li>

</ul>

<p>Mix beef and season. Place in a large covered container

for three days.

On third day, shape beef into sticks, and bake at 150° for

8 hours (turn half-way through).

</p>

</aside>

</section>

<nav>

<ul>

<li><a href="#">Keyword Search</a></li>

<li class="newgroup"><a href="#">Spices</a></li>

<li><a href="#">Seasonings</a></li>

<li><a href="#">Blends</a></li>

<li><a href="#">Salts & Peppers</a></li>

<li><a href="#">Popcorn Seasonings</a></li>

<li><a href="#">Dip Mixes</a></li>

<li><a href="#">Bulk Spices</a></li>

<li><a href="#">Extracts</a></li>

<li><a href="#">Flavorings</a></li>

<li class="newgroup"><a href="#">Spice Jars</a></li>

<li><a href="#">Spice Jar Labels</a></li>

<li><a href="#">Spice Sets</a></li>

<li><a href="#">Mortar & Pestles</a></li>

<li class="newgroup"><a href="#">Cookbooks</a></li>

<li><a href="#">Online Recipes</a></li>

<li><a href="#">Forums</a></li>

<li class="newgroup"><a href="#">My Account</a></li>

<li><a href="#">Checkout</a></li>

<li><a href="#">Order History</a></li>

<li><a href="#">Shipping Info</a></li>

<li class="newgroup"><a href="#">Tech Support</a></li>

<li><a href="#">Hours</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

</footer>

</body>

</html>

************************END*********************************

And below is the css file sb_validate.css

******************sb_validate.css****************

/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 2

Spice Bowl Payment Form Validation Style Sheet
Author:
Date:

Filename: sb_validate.css

/* Validation Styles */

input:not([type="radio"]):focus {
background-color: rgb(255,218,165);
}

input:not([value=""]):focus:invalid {
background-color: rgb(255,255,215);
}

input:not([value=""]):focus:valid {
background-color: rgb(255,245,215);
}

********************END*********************

Navigate

says, \"Showlng the land at $170,000 will make our company when we try to attrac

sbly the Look at the map above (it could be initially confusing because blue is

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

sb_payment_txt.html <!DOCTYPE html> <html lang=\"en\"> <head> <!-- New Perspecti

Question

Explanation / Answer

Related Questions

Navigate