donut icon

About the Product

Sweet 6 Donut

Sweet 6 Donut is an online donut store which sells delicious homemade donuts to local customers. It’s a Surrey, BC based food business, so it provides food delivery or store pick-up. All-age customers are welcome. It has purchase features so customers can order online directly.

The website sell daily-made specialty donuts for local customers. The website also provide special made options for customers to choose such as vegan donut or non-dairy donuts.

Users will be able to browse the products they are interested in on the web page with a gallery style, then click “buy” button to add the item to the shopping cart(quantity updated). So they can finish purchase at “Checkout” page and type in purchase information. Lastly, a confirmation number will generate to customer so that they can track the purchase history. Users also be able to edit their order before submitting it.

Color Palettes

website color pallete

Font Family

Raleway

Arial

Helvetica

Interactive Elements

In-text link

CSS selector:

.in_text_link

Sample code:

<a href="#" class="in_text_link">In Text Link</a>

Rendered element:

In Text Link

Text Input Field with Label

CSS selector:

label input

Sample code:

<label for="label1" id="form">Label1:</label> <input type="text" id="label1" name="label_input">

Rendered element:

Text Elements

Headings

CSS selector:

h3 h4 h5 h6

Sample code:

<h3>Heading 3</h3>

Rendered element:

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

CSS selector:

p paragraph

Sample code:

<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit facilisis metus, vel venenatis augue malesuada in. Vestibulum id massa in nisi ultricies vehicula quis eu eros. Sed iaculis lectus erat, non congue erat ornare vel. Quisque dapibus gravida mauris ut mollis. Donec laoreet risus pellentesque mattis sodales. Vestibulum posuere pretium purus, vitae imperdiet eros suscipit vel. Donec feugiat a eros tincidunt faucibus. Curabitur tincidunt arcu nunc, in aliquet arcu congue quis. Suspendisse potenti. Integer congue elit tellus, ac suscipit diam ultricies eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla nisi finibus orci luctus accumsan. In ligula enim, viverra a pulvinar sit amet, varius ullamcorper magna. Fusce leo tellus, hendrerit vel ullamcorper a, interdum vel enim. Aliquam congue laoreet diam elementum pellentesque.

Numbered Lists

Paragraphs

CSS selector:

ol li

Sample code:

<ol> <li>Product 1</li> <li>Product 2</li> <li>Product 3</li> </ol>

Rendered element:

  1. Product 1
  2. Product 2
  3. Product 3

Combined Elements

Main Navigation

CSS selector:

nav a

Sample code:

<nav><a href="#">Menu</a></nav>

Rendered element:

Product/Service Listing

CSS selector:

a img

Sample code:

<a href="#"><img src="image/donut1.jpeg" alt="donut_picture1"></a>

Rendered element:

donut_picture1 donut_picture2 donut_picture3

Contact Us

CSS selector:

form label input

Sample code:

<form> <label for="label1" id="form">Label1:</label> <input type="text" id="label1" name="label_input"> </form>

Rendered element:

Citations