this is html I have in below , the css is below that, with help of html and java

ID: 3789337 • Letter: T

Question

this is html I have in below , the css is below that, with help of html and java script I have to get the result in picture when I click on place order button , how can I do that?

<!DOCTYPE html>
<html lang="en">
<head>

<body>
<div class="container">
<header>
<h1>
Happy Flowers
</h1>
</header>

<nav>
<ul>
<li><a href="#">Floral Arrangements</a></li>
<li><a href="#">Seasonal Bouquets</a></li>
<li><a href="#">Live Plants</a></li>
<li><a href="#">Shop by Price</a></li>
</ul>
</nav>
</div>

<article>
<h2>Place an Order</h2>
<div id="errorText"></div>
<form action="results.htm">

<fieldset id="message" class="checks">
<legend>Message</legend>

<input type="checkbox" name="" value=""> Congratulations!
<input type="checkbox" name="" value=""> Happy Birthdy!
<input type="checkbox" name="" value=""> Happy Anniversary!
<input type="checkbox" name="" value=""> I Love you!
<input type="checkbox" name="" value=""> Custom message:
<textarea >Enter custom message here (max 250 characters)</textarea>

</fieldset>
<fieldset id="billingAddress" class="text">
<legend>Billing Address</legend>

<label for="fname">First Name</label>
<input type="text" id="" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
<label for="Staddress">Street Address</label>
<input type="text" id="Staddress" name="Staddress">
<label for="city">City</label>
<input type="text" id="city" name="city">

<label for="State">State</label>
<select>
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
   <option value="AZ">Arizona</option>
   <option value="AR">Arkansas</option>
   <option value="CA">California</option>
   <option value="CO">Colorado</option>
   <option value="CT">Connecticut</option>
   <option value="DE">Delaware</option>
   <option value="DC">District Of Columbia</option>
   <option value="FL">Florida</option>
   <option value="GA">Georgia</option>
   <option value="HI">Hawaii</option>
   <option value="ID">Idaho</option>
   <option value="IL">Illinois</option>
   <option value="IN">Indiana</option>
   <option value="IA">Iowa</option>
   <option value="KS">Kansas</option>
   <option value="KY">Kentucky</option>
   <option value="LA">Louisiana</option>
   <option value="ME">Maine</option>
   <option value="MD">Maryland</option>
   <option value="MA">Massachusetts</option>
   <option value="MI">Michigan</option>
   <option value="MN">Minnesota</option>
   <option value="MS">Mississippi</option>
   <option value="MO">Missouri</option>
   <option value="MT">Montana</option>
   <option value="NE">Nebraska</option>
   <option value="NV">Nevada</option>
   <option value="NH">New Hampshire</option>
   <option value="NJ">New Jersey</option>
   <option value="NM">New Mexico</option>
   <option value="NY">New York</option>
   <option value="NC">North Carolina</option>
   <option value="ND">North Dakota</option>
   <option value="OH">Ohio</option>
   <option value="OK">Oklahoma</option>
   <option value="OR">Oregon</option>
   <option value="PA">Pennsylvania</option>
   <option value="RI">Rhode Island</option>
   <option value="SC">South Carolina</option>
   <option value="SD">South Dakota</option>
   <option value="TN">Tennessee</option>
   <option value="TX">Texas</option>
   <option value="UT">Utah</option>
   <option value="VT">Vermont</option>
   <option value="VA">Virginia</option>
   <option value="WA">Washington</option>
   <option value="WV">West Virginia</option>
   <option value="WI">Wisconsin</option>
   <option value="WY">Wyoming</option>
</select>

<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone">

</fieldset>

<fieldset id="deliveryAddress" class="text">
<legend>Delivery Address</legend>

<input type="checkbox" name="" value="">Same as billing address

<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
<label for="Staddress">Street Address</label>
<input type="text" id="Staddress" name="Staddress">
<label for="City">City</label>
<input type="text" id="City" name="City">

<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone">

</fieldset>

<fieldset id="deliveryDate" class="checks">
<legend>Delivery Date</legend>
<form >
<input type="date" name="Ddate">

</form>

</fieldset>

<fieldset id="paymentInfo" class="text">
<legend>Payment</legend>

<input type="radio" name="Card" id="Visa">
<label for="Visa">Visa</label>
<input type="radio" name="Card" id="Master Card" value="">
<label for="Master Card">Master Card</label>
<input type="radio" name="Card" id="Discover" value="">
<label for="Discover">Discover</label>
<input type="radio" name="Card" id="American Express" value="">
<label for="American Express">American Express</label>

<label for="expiry">Expiration</label>
<select name='expireMM' id='expireMM'>
<option value=''>Month</option>
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='expireYY' id='expireYY'>
<option value=''>Year</option>
<option value='17'>2017</option>
<option value='18'>2018</option>
<option value='19'>2019</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>

</fieldset>

<form>
<label for="Uname">Username</label>
<input type="text" id="Uname" name="Uname">
<label for="Pass">Password</label>
<input type="text" id="Pass" name="Pass">
<label for="Passv">Password (verify)</label>
<input type="text" id="passv" name="passv">
</form>
</fieldset>

<div id="buttonContainer">
<input type="submit" value="Place Order" id="orderButton" />
</div>
</form>
</article>
<footer>Happy Flowers <span>•</span> Chicago, IL</footer>
</body>
</html>

This is Css

/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
width: 800px;
margin: 0 auto;
font-family: garamond, 'times new roman', times, serif;
background: rgb(246,245,242);
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
color: inherit;
}

a:active {
text-decoration: none;
color: inherit;
}

/* container for header and nav */
div.container {
float: left;
}

/* page header */
header {
border: 2px solid rgb(190,50,38);
border-right: none;
padding: 30px 10px;
text-align: center;
line-height: 1.8em;
background: white;
width: 219px;
float: left;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}

header h1 {
font-family: tangerine, cursive;
font-size: 48pt;
text-transform: lowercase;
color: rgb(190,50,38);
}

header h1 img {
display: inline-block;
}

/* remove blank space for descenders below image */
#accent img {
display: block;
}

/* navigation */
nav {
width: 219px;
padding: 10px;
float: left;
clear: left;
}

nav ul li {
width: 179px;
min-height: 50px;
padding: 10px;
margin: 0 0 10px 10px;
line-height: 2.0em;
font-weight: bold;
font-size: 16px;
background: rgb(124,124,136);
color: white;
text-align: center;
border: 1px solid rgb(0,89,132);
}

nav ul li:hover {
background: rgb(0,89,132);
}

/* main content */
article {
background: #4DA375;
width: 581px;
float: right;
padding: 10px;
}

article h2 {
font-size: 48px;
font-weight: bold;
text-align: center;
font-family: tangerine, cursive;
text-shadow: 10px 0px 17px white,
-10px 0px 17px white;
}

article div.results {
background: white;
border-radius: 5px;
margin: 5px 15px 15px;
padding: 5px 30px;
}

article h3 {
font-size: 18pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
}

article div.results p {
margin-left: 35%;
padding-bottom: 5px;
}

#errorText {
display: none;
text-align: center;
padding: 10px;
margin: 0 auto;
margin: 15px 15px 0;
background: rgb(124,124,136);
color: white;
border: 2px solid rgb(190,50,38);
}

/* form */
form {
width: 561px;
margin: 0 auto;
padding-bottom: 15px;
}

fieldset {
position: relative;
padding: 5px 30px 70px 30px;
background: white;
border-radius: 5px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
}

fieldset:last-of-type {
margin-bottom: 0;
}

legend {
font-weight: bold;
font-size: 36px;
font-family: tangerine, cursive;
position: absolute;
padding: 10px 0;
}

input, label, select, textarea, fieldset p, div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
position: relative;
top: 50px;
line-height: 1.2em;
}

label, input {
display: block;
}

#expMoLabel, #expYrLabel {
position: absolute;
left: -10000px;
}

#buttonContainer {
width: 100%;
text-align: center;
}

#orderButton {
margin: 0 auto;
font-family: tangerine, cursive;
font-size: 24px;
top: 15px;
-webkit-appearance: none;
display: inline-block;
}

fieldset.checks input, div.checks input {
float: none;
margin-right: 20px;
}

fieldset.checks textarea {
margin-left: 21px;
width: 90%;
height: 50px;
}

fieldset.text label {
width: 8em;
text-align: right;
float: left;
clear: left;
margin-right: 10px;
margin-top: 5px;
}

fieldset.text input, fieldset.text select {
margin-top: 5px;
margin-right: 5px;
}

fieldset div.errorMessage, #ccNumErrorMessage, #cvvErrorMessage {
display: none;
color: red;
margin-top: 10px;
}

#ccNumErrorMessage, #cvvErrorMessage {
margin-left: 8.5em;
}

div.checks label {
width: auto;
text-align: left;
float: none;
clear: none;
}

div.inline label, div.inline input, div.inline select, div.inline div {
display: inline-block;
float: none;
text-align: center;
width: auto;
}

div.inline option {
text-align: left;
}

#billFName, #billLName, #delivFName, #delivLName, #billCity, #delivCity, #billPhone, #delivPhone {
width: 15em;
}

#billStreet, #delivStreet, #billEmail, #delivEmail {
width: 20em;
}

#billZip, #delivZip {
width: 10em;
}

#ccNum {
width: 16em;
}

#cvv {
width: 4em;
}

/* footer */
footer {
width: 581px;
color: white;
background: rgb(124,124,136);
font-size: 16px;
padding: 10px;
text-align: center;
float: right;
}

our form has been submitte snoot flowers You entered the following data CustomText- Floral Arrangements Billing FirstName Maria BillingLastName Santiago Billing Street 1 Main St Seasonal Bouquets Billing City Las Cruces Billing State NM Billing zip 88001 Live Plants Billing Phone 575-555-2000 Same Address on DeliveryLastName Santiago Shop by Price Deliver Street 1 Main St Deliterycity Las Cruces Deliver State NM Delivery Zip 88001 DeliveryPhone 575-555-2000 DelivMonth 1 DelivDay 1 DelivYear 2017 PaymentType Viga CardNumber-1 Exp Month 01 Exp Year 2017 New Username Password 1- Password2 Snoot Flowers Davenport, Iowa Figure 6-12: Submission results page Jason Bucy

Explanation / Answer

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=page-width, initial-scale=1.0">
<title>Happy Flowers - Order</title>
<link rel="stylesheet" href="happpppy.css" />
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel='stylesheet' type='text/css'>
<style>
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
width: 800px;
margin: 0 auto;
font-family: garamond, 'times new roman', times, serif;
background: rgb(246,245,242);
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a:link, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
color: inherit;
}

a:active {
text-decoration: none;
color: inherit;
}
/* container for header and nav */
div.container {
float: left;
}
/* page header */
header {
border: 2px solid rgb(190,50,38);
border-right: none;
padding: 30px 10px;
text-align: center;
line-height: 1.8em;
background: white;
width: 219px;
float: left;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
}

header h1 {
font-family: tangerine, cursive;
font-size: 48pt;
text-transform: lowercase;
color: rgb(190,50,38);
}

header h1 img {
display: inline-block;
}
/* remove blank space for descenders below image */
#accent img {
display: block;
}
/* navigation */
nav {
width: 219px;
padding: 10px;
float: left;
clear: left;
}

nav ul li:hover {
background: rgb(0,89,132);
}
/* main content */
article {
background: #4DA375;
width: 581px;
float: right;
padding: 10px;
}

article h2 {
font-size: 48px;
font-weight: bold;
text-align: center;
font-family: tangerine, cursive;
text-shadow: 10px 0px 17px white, -10px 0px 17px white;
}

article div.results {
background: white;
border-radius: 5px;
margin: 5px 15px 15px;
padding: 5px 30px;
}

article h3 {
font-size: 18pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
}

article div.results p {
margin-left: 35%;
padding-bottom: 5px;
}

#errorText {
display: none;
text-align: center;
padding: 10px;
margin: 0 auto;
margin: 15px 15px 0;
background: rgb(124,124,136);
color: white;
border: 2px solid rgb(190,50,38);
}
/* form */
form {
width: 561px;
margin: 0 auto;
padding-bottom: 15px;
}