Directions This assignment will be based on the following scenario about Bob\'s

ID: 3916555 • Letter: D

Question

Directions

This assignment will be based on the following scenario about Bob's Small Time Grocery:

Background:
Bob's Small Time Grocery liked your proposal, but they are not satisfied with how their colors look on your sample page. The customer gives you permission to experiment with multiple stylings and steer them towards clean and professional. They also do not want their logo, which also uses the company colors, to appear out of place on the site. You must provide a branding guide with different styling options and a suggested path forward. You must also update the styling sample page to reflect the new branding.

For this assignment, you will write a branding document that describes how you plan to style the customer web site and incorporate their colors (#00FF48 and #FF0000). You will also update the styling page from LP01 Assignment with new styling based on the new branding.

NOTE: You must Fork the CodePly page created in LP01 Assignments so you do not overwrite your previous LP01 Assignments page.

Writing Guidelines:

Prepare a branding document that will be 2-3 pages in length

Use a “12” point font (Arial or Times New Roman)

Use single-spaced lines instead of double-spaced

Use APA style citations for any references

Cite any information referenced from another source

Use correct sentence structure and grammar

Use appropriate vocabulary and terms associated with the subject matter

Branding Document Components:

First section called "Color Scheme" that contains your discussion about the colors for the web page. Research 3 color scheme combinations for the customer using Adobe Color Selector (https://color.adobe.com). As a starting point, you may enter either of the customer colors into the Adobe CC page to see what combinations are available with the various Color Rules.
After you choose a color combination, paste a screenshot of the color palette swatches and the RGB codes for each proposed scheme into the Word document. Discuss your reasons for selecting these color combinations, such as emotions or perception.
Select your favorite of the 3 color schemes and discuss how the customer logo will blend or contrast with the colors. Also, identify your primary color and two accent colors and where you will use each on the web page, e.g. header background, footer background, headings, etc.

Second section called "Typography" that contains your discussion about the font typeface, size, and decorations. Using the customer's Open Sans font as the default font for the web page, select a serif font for headings. Discuss how a sans-serif font is better for body text and a serif font is better for headings.

Third section called "Media" that contains your discussion about a background image for the page and overall use of content images. Select a background image from http://backgroundhost.com/. Explain how the background image blends or contrasts with the selected colors and the customer's colors. Copy and paste a thumbnail of the background image into the document. Explain how too many images on the page will detract from the user experience. Your reasons can include page load time, busy web page, confusing content, etc.

Fourth section called "Animations" that contains your discussion of animations that will add value to the web site. Explain how too animations can detract from the user experience. For simplicity, propose that a single hover effect on the form submit button is sufficient. Also, explain that the button hover will show the accent color from the selected color scheme.

Fifth section called "Recommendations" that contains a summary of all of your recommendations for colors, typography, and images for branding their web site.

Styling Page Components:

Fork the CodePly page created in LP01 Assignment as the starting point for this page.

The page must display the background image selected in the branding document.

The header and footer areas must use the primary color as the background color.

Text in the header and footer areas may need to use a white color (#FFFFFF) if dark text is not legible.

Block quote text must use an accent color as the text color.

The page must display level 1 heading elements with the heading text color from the selected color scheme.

The form button must change background color to an accent color on mouse hover and the button text must be legible, i.e. dark text on a dark background is not legible.

NOTE* THIS IS MY OLD ASSIGNMENT CODE

<title> Website Proposal </title>

<style>

@import url('https://fonts.googleapis.com/css?family=Open+Times+New+Roman');

@import url('https://fonts.google.com/sr?

family=Times+New+Roman+OS&token=MT');

header{

background-color: #00b232;

text-align:center;

}

Footer{

background-color: #00b232;

font-size:12px;

text-align:center;

font-family: 'Times+New+Roman';

}

font-family: 'Times New Roman', Times, Times;

background-color: #B20000;

}

h3,h1,h2,h4,h5,h6{

font-family: Times ,Times ,Times,Times,Times ,

Times ;

}

body{

font-family: Times;

font-size:12px;

background-color: #B20000;

}

</style>

<h1> <center> Website Proposal for Bob's Small Time Grocery</center> </h1>

<h4> prepared by Sheri Cooper (<i> sheri.cooper@online.national.edu </i> ) <br>

<br>

</h4><h3> Thank You! </h3> <br>

<p> </p><center>Thank you for your interest in contacting our company to design your webpage. There are several benefits to having a professionally designed web site. Not only will your designs be custom, but you'll also have fast-loading web pages. A quality website will be sure to reinforce your brand and increase visibility in search engine results. Once again, thank you for allowing us to help create your web site. We aim to please.</center>

<p></p>

<h2> <center> Timeline</center></h2>

<p></p><li>12, July 2018 -- Project Started</li>

<li> 20, July 2018 -- Demo to be presented</li>

<li> 30, July 2018 -- Project to be delivered </li> <p></p>

<h3> <center> Deliverables</center></h3>

<p3><center> You will receive three web page examples.</center>

<ul>

<li> <a href="header.html"> Home Page </a> The homepage is important because it will identify your purpose. You won't get a second chance to make first impression. This page will include things such as your headline, social media outlets, and images related to your business. </li>

<li> <a href="form.html"> Contact Us </a> Your Contact Us page will provide an e-mail address, a phone number, social media links, and a physical address. This will be crucial in online marketing. </li>

<li> <a href="form.html"> Deals of the Day </a> The Deals of the Day page will include images and titles of the daily and weekly deals at your grocery store. This page is important because it will give your customers opportunity to see what is on sale and how much they can save. </li>

<h4> <center> Estimates</center> </h4>

<p4> <li>Deisgn and build -- Estimated $5000</li>

<li> Content Creation -- Estimated $500</li>

<li> Setup -- Estimated $160 </li>

<li> Training -- Estimated $600</li>

<li> Total -- Estimated $6260</li>

<h5> <center>References </center>

</h5>

<p5> <center>Here are five references of websites that we have designed in the past. </center>

<ul>

<li> <a href="header.html"> www.shesworthit.com </a> </li>

<li> <a href="form.html"> www.singersmeet.com </a> </li>

<li> <a href="form.html"> www.holdmybeer.net </a> </li>

<li> <a href="form.html"> www.porkysbarrelofbacon.com </a> </li>

<li> <a href="form.html"> www.solidonmars.net </a> </li>

</ul>

<p></p>

<div>

</div>

<a herf="#" class="My mail sheri.cooper@online.national.edu float-right"> My Mail sheri.cooper@online.national.edu</a>

</footer>

<style>

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

h1,h2,h3,h4,h5,h6{

color: #00b232;

text-align:center;

}

body{

font-family: sans-serif;

font-size:12px;

background-color: #B20000;

}

</style>

<title> website Proposal </title>

<style>

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

h1,h2,h3,h4,h5,h6{

color: #00b232;

text-align:center;

}

body{

font-family: sans-serif;

font-size:12px;

background-color: #B20000;

}

</style>

<h1> Heading </h1>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere, ligula sed

mollis faucibus, dui nulla mattis dolor, a pulvinar sapien dui ac augue. Aenean

eget arcu gravida, tincidunt tortor vel, tempus sem. Suspendisse ultrices ligula

ut ligula cursus tempor. Sed tempus maximus est, eu ornare nibh placerat in.

Fusce pulvinar volutpat purus nec mattis. Phasellus lacus sem, elementum vel

semper non, facilisis non turpis. Etiam tempus rutrum nulla vel congue. Nulla

commodo vehicula tempor. In accumsan id nisi id viverra. Duis tempor nulla

orci, at feugiat erat sollicitudin sed. Aenean non eros hendrerit, fermentum

tellus eu, fermentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere

cubilia Curae; Nulla facilisis, massa in cursus auctor, eros lectus cursus libero,

sit amet lacinia urna neque quis lectus.

</p>

<h2> Heading </h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere, ligula sed