ZuoTi.Pro
Question

JavaJam Gear Page

Website Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 New JavaJam Gear page Task 4:Chapter 12 E-Commerce Overview nfigure a div element assigned to the class named item. Code the following heading, img, parag


Website Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 New JavaJam Gear page Task 4: Create the New Gear Page. One way to be productive is to create pages based on earlier work. Launch a text editor and cpen the Music page (music.html). Save the file your as gearhtml. This will give you a head start and ensure that the pages on the website are similar. Perform the following modifications: a. Change the page title to an appropriate phrase. b. Assign the div to an id named herocouch. c. Change the text within the h2 element to "JavaJam Gear" d. Delete the contents and HTML elements within the main element that are below the h2 element. e. Place each sentence below in a separate paragraph: JavaJam gear not only looks good, it's good to your wallet, too ó discount when you wear a Javalam shirt or bring in your Javalam mug Confi gure a div element assigned to the class named item. Code the following heading, img, and paragraph tags in the div. . Configure the text Java Jam Shirt" within an h3 element. 2. Configure an image element to display the Configure the following text in a paragraph: "Java.Jam shirts are comfortable to javashirt,ipg graphic wear to school and around town. 100% cotton, XL only $14.95
Chapter 12 E-Commerce Overview nfigure a div element assigned to the class named item. Code the following heading, img, paragraph, and line break tags in the div. 1. g. Co Configure the text 'JavaJam Mug" within an h3 element. 2. Configure an image element to display the javamug jpg graphic 3. Configure the following text in a paragraph: "JavaJam mugs carry a full load of caffeine (12 oz.) to jump-start your morning. $9.95 h. Each item for sale has an "Add to Cart" button, which is contained within a form with an action attribute set to http:/webdevbasics.net/cart.html, a placeholder shopping cart page To place the shopping cart button for the T-shirt, add the following code below the paragraph that describes the T-shirt and above the closing div tag. Kinput type-"submit" value-"Add to Cart" The process for adding the shopping cart button for the mug is the same. Add the following code below the paragraph that contains the description of the mug. kinput type-"submit" value-"Add to Cart"> Save your page and test it in a browser. It should look similar to the one shown in Figure 12.6. Click the Add to Cart buttons for one of the items. The placeholder shopping cart will display and your screen should look similar to the one shown in Figure 12.7 Paceholde Shopping Cart X Placeholder Shopping Cart Page This page is intended to be a placeholder for an actual shopping cart page. tf this were an actual shopping cart page, it would be displayed by a server-side script which would generate a web page thet includes at a minimum the following: e name of each item selected . quantity of each itern selected . price of each item selected the cost before any shipping fees and/or sales tax) a button or hyperlink to place an order Carerue Shagpng
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Below is the solution:

Gear.html:

<!DOCTYPE html>

<html lang="en">

<head>

<title>JavaJam Coffee House Home</title>

<meta charset="utf-8">

<link rel="stylesheet" href="javajam.css">

<meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">

</head>

<body>

<div id="wrapper">

<header>

<h1>JavaJam Coffee House</h1>

</header>

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="menu.html">Menu</a></li>

<li><a href="music.html">Music</a></li>

<li><a href="jobs.html">Jobs</a></li>

<li><a href="Gear.html">Gear</a></li>

</ul>

</nav>

<main>

<div id="herocouch"></div>

    <h2>

        JAVAJAM GEAR

    </h2>

    <p>

        JavaJam gear not only looks good, it's good to your wallet, too. <br>

        Get a 10% discount hen you wear a JavaJam shirt or bring in your JavaJam mug!

    </p>

        

    <div class="item">

        <p>

            JavaJam shirts are comforable to wear to school and around town. 100% cotton. XL only $14.95

         </p>

         <img src="javashirt.png" class="clearright">

         <form method="post" action="http://www.webdevbasics.net/cart.html">

            <input type="hidden" name="desc1" id="desc1" value="JavaJam Shirt" />

            <input type="hidden" name="cost1" id="cost1" value="14.95" />

             <button type="submit" value="dd to Cart">Add to Cart</button>

        </form>

    </div>

    <div class="item" >

        <p>

            JavaJam mugs carry a full load of caffine (12oz.) to jump-start your morning. $9.95

        </p>

         <img src="javamug.gif" class="clearright" />

        <form method="post" action="http://www.webdevbasics.net/cart.html">

            <input type="hidden" name="desc1" id="desc1" value="JavaJam Shirt" />

            <input type="hidden" name="cost1" id="cost1" value="14.95" />

             <button type="submit" value="dd to Cart">Add to Cart</button>

        </form>

    </div>

</form>

</main>

<footer>

Copyright &copy; 2016 JavaJam Coffee House<br>

<a href="mailto:[email protected]">[email protected]</a>

</footer>

</body>

</html>

javajam.css:

* { box-sizing: border-box; }

header, nav, main, footer { display: block; }

body { background-color: #FCEBB6;

background-image: url(background.gif);

color: #221811;

font-family: Verdana, Arial, sans-serif;

background-image: url(background.gif);

}

#wrapper { background-color: #231814;

width: 80%;

margin-right: auto;

margin-left: auto;

min-width: 900px;

max-width: 1280px;

box-shadow: 3px 3px 3px #666666;

}

header { background-color: #D2B48C;

height: 150px;

background-image: url(javajamlogo.jpg);

background-repeat: no-repeat;

}

h1 { padding-top: 45px;

padding-left: 220px;

font-size: 3em;

}

nav { text-align: center;

font-weight: bold;

font-size: 1.5em;

padding-top: 10px;

float: left;

width: 200px;

}

nav a { text-decoration: none; }

nav a:link { color: #FEF6C2; }

nav a:visited{ color: #D2B48C; }

nav a:hover { color: #CC9933; }

nav ul { list-style-type: none;

padding-left: 0;

}

footer { background-color: #D2B48C;

font-size: small;

font-style: italic;

text-align: center;

padding-bottom: 10px;

border-top: 2px #221811 solid;

}

main { padding: 0 0 2em 0;

margin-left: 200px;

background-color: #FEF6C2;

}

main h2, main h3, main h4, main p, main div, main ul, main dl { padding-left: 3em; padding-right: 2em; }

h4 { background-color: #d2B48C;

font-size: 1.2em;

padding-left: 10px;

padding-bottom: 0;

text-transform: uppercase;

border-bottom: 1px solid #000033;

clear: left;

}

.details { padding-left: 20%;

padding-right: 20%;

overflow: auto;

}

.floatleft { float: left;

padding-right: 20px;

padding-bottom: 20px;

}

/*img { padding-left: 10px;

padding-right: 10px;

}*/

#heroroad { background-image: url(heroroad.jpg);

background-size: 100% 100%;

height: 250px; }

#heromugs { background-image: url(activities.jpg);

background-size: 100% 100%;

height: 250px; }

#heroguitar { background-image: url(heroguitar.jpg);

background-size: 100% 100%;

height: 250px; }

#herocouch{background-image: url(gear.png);

background-size:100%;

height:250px; }

#mobile { display: none; }

#desktop { display: inline; }

table { width: 90%;

margin: auto;

border-spacing: 0;

background-color: #FFFFCC; }

td, th { padding: 10px; }

tr:nth-of-type(odd) { background-color: #D2B48C; }

@media only screen and (max-width: 1024px) {

body { background-image: none; }

#wrapper { width: auto;

min-width: 0;

margin: 0;

padding: 0;

box-shadow: none; }

header { border-bottom: 5px solid #FEF6C2; }

h1 { margin-top: 0;

margin-bottom: 1em;

padding-top: 1em;

padding-bottom: 1em;

font-size: 2.5em; }

nav { float: none;

width: auto;

padding-top: 0;

margin: 10px;

font-size: 1.3em; }

nav li { display: inline-block; }

nav a { padding: 1em;

width: 8em;

font-weight: bold;

border-style: none; }

nav ul { padding: 0;

margin: 0; }

#heroroad, #heromugs, #heroguitar { margin: 0; padding: 0; }

main { padding: 0;

margin: 0;

font-size: 90%; }

}

.item{ width: 80%; font-size: 1.30em; margin: 10px 0px 10px 50px; background-color: white; display: inline-block;}

.item img{float: right;}

@media only screen and (max-width: 768px) {

header { background-image: url(javajammini.jpg);

height: 128px; }

h1 { font-size: 2em;

text-align: center;

padding-left: 0; }

nav { margin: 0; }

nav a { display: block;

padding: 0.2em;

width: auto;

border-bottom: 1px solid #FEF6C2; }

nav li { display: block; }

main { padding-top: 1px; }

h2 { padding: 0.5em 0 0 0.5em;

margin-right: 0.5em; }

.details { padding-left: 0; padding-right: 0; }

#heroroad, #heromugs, #heroguitar #herocouch{ background-image: none; height: auto; }

.floatleft { padding-left: 0.5em; padding-right: 0.5em; }

#mobile { display: inline; }

#desktop { display: none; }

}

output:

JavaJam Coffee House 7 Home Menu Music Jobs Gear JavaJam gear not only looks good, its good to your wallet, too Get a 10% di

Placeholder Shopping Cart Page This page is intended to be a placeholder for an actual shopping cart page. If this were an ac

0 0
Add a comment
Know the answer?
Add Answer to:
Website Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 Ne...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...

    NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a place in the HTML reserved for < li > elements under the heading “Shopping List” Write a javascript program that will cause whatever the user inputs to be placed in a newly -created < li > tag and the tag placed inside the < ul > element whenever the user clicks the button Your program must not create any < li > tag is...

  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • i need help with this homework webpage and code too: The webpage must include: Global Structure...

    i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images   Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...

  • I can't figure this one out at all. Any help would be appreciated. Here's the question:...

    I can't figure this one out at all. Any help would be appreciated. Here's the question: You will need to complete the functions to Toggle the Fries and Drinks sections by adding or removing the 'hide' CSS class I created. I have already created the function to Toggle Burgers and you can use that as an example to build out the full functionality. I have also made created the function to reset the form. Finally, to calculate the total, you...

  • Question 1 To remove the underlining from an <a> element, you can use CSS to set...

    Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...

  • Question 1 To remove the underlining from an <a> element, you can use CSS to set...

    Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT