*Using HTML5, CSS* *I need the code, not the final ouput* *Thank you! :)* Create
ID: 3755720 • Letter: #
Question
*Using HTML5, CSS*
*I need the code, not the final ouput*
*Thank you! :)*
Create an “online survey” as a web page formatted to look similar to the example webpage at the end of this document.
Getting Started
You should choose your own company name, product theme, and logo (image). Reword the example survey text to match your selection. Use only Notepad or a similar text editor to create your document. Insert your name and Student ID as comment lines directly above the
element of your web page.
Embedded CSS Settings/Requirements
background and foreground/text colors should complementary and professional
h1 and h2 heading element text should be centered
choose an image to represent your product theme (i.e., your company logo) and make it appear to the right of the text in the DIV element (see “Document Text” section below); you may need to resize your image to make sure that it occupies between 20% and 30% of the browser width
the DIV element (see “Document Text” section below) should have a width of approximately 70% of the browser width
form elements should be aligned by putting them into a table (see example web page)
list item text should have appropriate font and size settings
horizontal rules should be inserted as shown in the example webpage
Use the Following Document Text
You may copy these blocks of text into your document where applicable, but be sure you change the text (namely, the italicized words/phrases) to match your selected company/product type. Make sure you include the Registered Trademark symbol after your company name, as well as any other special characters you deem appropriate. Finally, make sure you have created the style settings as listed above and as shown in the example webpage.
h1
Thank you for choosing Sunrise Coffee Creations
Div
You have been randomly selected to participate in our Customer Satisfaction Survey. Please tell us a little bit about yourself by filling in the requested information at the top of the survey, then respond to the survey opinion statements based on your experiences with Sunrise Coffee Creations. To show our appreciation, we will send you a $5 Sunrise Coffee Creations eGift Certificate via e-mail.
h2
Please respond to the opinion statements using the following scale:
Ordered or unordered list items
1 Strongly Agree
2 Somewhat Agree
3 Neither Agree nor Disagree
4 Somewhat Disagree
5 Strongly Disagree
Ordered or unordered list items
Sunrise Coffee Creations products are always fresh.
Sunrise Coffee Creations products have an appealing aroma.
Sunrise Coffee Creations products are reasonably priced.
Sunrise Coffee Creations products are of the highest quality.
Overall, I am very satisfied with Sunrise Coffee Creations products.
Validate Your Web Page
Validate your web page at http://validator.w3.org using the “Validate by File Upload” option. If errors are detected, fix them and revalidate. If your file does not validate with no errors, an automatic 5-point deduction will be taken. Note: all tags should be lower case for proper validation.
Explanation / Answer
Note: The image name is c.jpg.Just put it in the same folder as the html file.
Feel free comment if there is any doubt.All the best.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Survey Web Page</title>
<style>
body {background-color: #D1E8E2;color: #116466}
h1 {text-align: center;}
h1 {text-align: center;}
</style>
</head>
<body>
<h1>Thank you for choosing Sunrise Coffee Creations</h1>
<div>
You have been randomly selected to participate in our Customer Satisfaction Survey.
<img src="c.jpg" alt="Coffee">Please tell us a little bit about yourself by filling in the requested information at the top of the survey, then respond to the survey opinion statements based on your experiences with Sunrise Coffee Creations. To show our appreciation, we will send you a $5 Sunrise Coffee Creations eGift Certificate via e-mail.
</div>
<h2>Please respond to the opinion statements using the following scale:</h2>
<form>
<ol>
<li>
<h3>Sunrise Coffee Creations products are always fresh.</h3>
<ul>
<li><input type="radio" name="S1" value="S1">Strongly Agree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Agree</li>
<li><input type="radio" name="S1" value="S1">Neither Agree nor Disagree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Disagree</li>
<li><input type="radio" name="S1" value="S1">Stringly Disagree</li>
</ul>
</li>
<li>
<h3>Sunrise Coffee Creations products have an appealing aroma.</h3>
<ul>
<li><input type="radio" name="S1" value="S1">Strongly Agree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Agree</li>
<li><input type="radio" name="S1" value="S1">Neither Agree nor Disagree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Disagree</li>
<li><input type="radio" name="S1" value="S1">Stringly Disagree</li>
</ul>
</li>
<li>
<h3>Sunrise Coffee Creations products are reasonably priced.</h3>
<ul>
<li><input type="radio" name="S1" value="S1">Strongly Agree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Agree</li>
<li><input type="radio" name="S1" value="S1">Neither Agree nor Disagree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Disagree</li>
<li><input type="radio" name="S1" value="S1">Stringly Disagree</li>
</ul>
</li>
<li>
<h3>Sunrise Coffee Creations products are of the highest quality.</h3>
<ul>
<li><input type="radio" name="S1" value="S1">Strongly Agree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Agree</li>
<li><input type="radio" name="S1" value="S1">Neither Agree nor Disagree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Disagree</li>
<li><input type="radio" name="S1" value="S1">Stringly Disagree</li>
</ul>
</li>
<li>
<h3>Overall, I am very satisfied with Sunrise Coffee Creations products.</h3>
<ul>
<li><input type="radio" name="S1" value="S1">Strongly Agree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Agree</li>
<li><input type="radio" name="S1" value="S1">Neither Agree nor Disagree</li>
<li><input type="radio" name="S1" value="S1">Somewhat Disagree</li>
<li><input type="radio" name="S1" value="S1">Stringly Disagree</li>
</ul>
</li>
</ol>
<input type="submit" value="Submit">
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.