In this lab exercise you will be creating the contact page for your bicycle shop website. This will...

Question

In this lab exercise you will be creating the contact page for your bicycle shop website. This will be the last lab exercise. Your bicycle shop website should be complete. You will be creating a contact page for your bicycle shop website. You should already have a blank contact page set up for your website.

Lab Exercise Requirements:

1. Correct the issues in your bicycle shop webpages that I identified in the feedback I provided when grading your last lab exercise in week 9.

2. Create a form on your contact page that contains the fields below, with properties and validations. All fields should be marked as "required". The focus should be set to the first field on the form when the user first goes to the contact page. The form should be neat and professional with the fields and buttons formatted and aligned. Use labels for your form fields. Use placeholders in your text fields.

Field Name	Field Type	Attributes / Validation
Full Name	Text Field	Required, minimum length 15, maximum length 25
Address	Text Field	Required, minimum length 15, maximum length 50
City	Text Field	Required, minimum length 4, maximum length 25
State	Drop Down List (Only list about 5 to 10 states)	Required
Zip Code	Text Field	Required, minimum length 5, maximum length 10, use pattern 99999 or XXXXXXXXXX
Phone Number	Tel	Required, minimum length 10, maximum length 12, validate format as a phone number, use pattern XXXXXXXXXX
Email Address	Email	Required, minimum length 10, maximum length 25, validate format as a email address
Submission Date	Date	Required
Inquiry Type	Checkboxes (Sales, Service, Rental)	Required, include in a group box
Bicycle Type	Radio Buttons (list the bike types on your sales or rental pages)	Required, include in a group box
Create Password	Password	Required
Message	Text Area	Required, minimum length 20, maximum length 200

3. Your form action should send (post) your user to another web page titled "response.htm" where a message will be displayed that states the message has been submitted. In reality, the form will not submit to a database or be emailed to an email address.

4. Include a Send and Reset button on your form.

5. The form should be responsive.

6. Make sure you test all of your pages to ensure they meet the requirements above.

7. Don't forget your comment header and comments.

8. In week 1 you should have secured a host to copy your project up to the Internet so you can share your work with your class. Copy your entire website up to your web host and make sure it works properly up there. The day after the assignment is due (Monday), post a link to your website to the "Online Resources" discussion board to share your website with the rest of the class. DO NOT post a link before Monday! Please review your peer's websites and provide comments and feedback.

Lab Exercise Deliverables:

When done, you should have six web pages, a CSS file, and media files:

1. Home Page - Bicycle Shop Website (completed)
2. Bike Rental Page (completed)
3. Bike Sales Page (completed)
4. Bike Services Page (completed)
5. Contact Page (completed)
6. Response Page (completed)
7. CSS Page
8. Image, Audio, and Video Files

Zip up these pages and any support files (such as your media files) into one zip file and submit them to the assignments section. Do not submit separate files. The link to your website to the "Online Resources" discussion board is a required deliverable.

index-qbri2bxe.html newsales-iqmwns23.html new-seqvtxla.css newsales-srf1m5fs.html

Anurag · Accepted Answer

new_sales.html
    
        Neals's Bicycle
      
      		
            Best bike prices 
        
		
            Services offered 
        
		
            Contact us 
        
    Best bike prices
    
        Figuring out what size bike you need can be a challenge, and is more than looking at a bike size chart. This bike sizing guide will help you figure out the correct bike frame size. If you are looking for info on Kids Bike Sizing, please click here to jump to that section of the article. If you want to learn more about the different types of bikes we sell, check out our Bicycle Buying Guide.

    
        
        
        Your browser does not support the video tag.
      
    
    
    
 		3t   $109.99
		Baum $89.99
		Basso $99.99
		Casati $149.99
		EMC $199.99
    
response.htm
The Message has been Submitted
style.css
/* body {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    border: 2px solid black; } 
head {
    width: 96.875%;
    padding: 15px 1.5625%;
    border-bottom: 2px solid black; }
main { 
    width: 59.375%;
    padding: 15px 1.5625%; 
    float: left; }
aside {
    width: 34.375%;
    padding: 15px 1.5625%;
    float: right; }
footer {
    clear: both; width: 96.875%;
    padding: 15px 1.5625%; 
    border-top: 2px solid black; }
section img {
    max-width: 100%; 
    margin-bottom: .3em;
} */
/* On screens that are 889px wide or less, the background color is red */
/* @media screen and (max-width: 889px) {
  body {
    background-color: red;
    color: white;
  }
} */
/* On screens that are 600px wide or less, the background color is blue */
/* @media screen and (max-width: 550px) {
  body {
    background-color: blue;
    color: white;
  }
} */
body{
  background-color: red
}
/* @charset "UTF-8"; */
/*!
 * Bootstrap v5.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0 80px 0 80px;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #ebe8ea78
}
.section2{
  max-width:75%;
  padding: 1rem;
  color: #8f0606;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      red, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
    margin: 100px auto 100px auto;
}
.services_sec, .address_sec {
  margin: 100px 0 0 0;
  max-width: 75%;
  padding: 1rem;
  color: rgb(54, 21, 2);
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      red, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
    margin-left: auto;
    margin-right: auto;
}
.services_sec1, h1.address_sec1 {
  margin: 75px 0 0 0;
}
.address_sec2 {
  margin: 100px 0 100px 100px;
}
hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}
hr:not([size]) {
  height: 1px;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
  text-align: center;
    padding: 30px 0 30px 0;
    background: #fd98984a;
    max-width: 100%;
    padding: 1rem;
    color: white;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient( to bottom, #040000, rgba(0, 0, 0, 0) ) 1 100%;
    color: #2a4464eb;
    margin-top: 65px;
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}
h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
    margin: 75px 0px 75px 0;
    text-align: center;
  }
}
h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}
h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}
h5, .h5 {
  font-size: 1.25rem;
}
h6, .h6 {
  font-size: 1rem;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
ol,
ul {
  padding-left: 2rem;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: bolder;
}
small, .small {
  font-size: 0.875em;
}
mark, .mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: #0d6efd;
  text-decoration: none;
}
a:hover {
  color: #0a58ca;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}
a > code {
  color: inherit;
}
kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}
figure {
  margin: 0 0 1rem;
}
img, svg {
  /* vertical-align: middle; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  margin-top: 50px;
   
}
table {
  caption-side: bottom;
  border-collapse: collapse;
  margin:auto;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
select {
  text-transform: none;
}
[role=button] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}
[list]::-webkit-calendar-picker-indicator {
  display: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::

In this lab exercise you will be creating the contact page for your bicycle shop website. This will be the last lab exercise. Your bicycle shop website should be complete. You will be creating a...

Solution

Answer To This Question Is Available To Download

Related Questions & Answers

Submit New Assignment