Interactive Elements

Submit Buttons

CSS selector:

.button-submit

Sample code:

<input type="submit" class="button-submit" value="Submit Buttons"/>

Rendered element:

Reset Buttons

CSS selector:

.button-reset

Sample code:

<input type="reset" class="button-reset" value="Reset Buttons"/>

Rendered element:

Text Input Field with Label

CSS selector:

.label
.input-text

Sample code:

<label class="label" for="text_field">Label for Text Field: </label> <input class="input-text" id="text_field" type="text">

Rendered element:

Radio Button with Label

CSS selector:

.label
.radio-button

Sample code:

<input type="radio" class="radio-button" id="radio-label" value="LABEL"> <label class="label" for="radio-label">LABEL</label>

Rendered element:


Text Elements

Headings

CSS selector:

h1
h2
h3
h4

Sample code:

<h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4>

Rendered element:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

Paragraphs

CSS selector:

p

Sample code:

<p>Content</p>

Rendered element:

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn't hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate. She looked at her student wondering if she could ever get through. "You need to learn to think for yourself," she wanted to tell him. "Your friends are holding you back and bringing you down." But she didn't because she knew his friends were all that he had and even if that meant a life of misery, he would never give them up.

Numbered Lists

CSS selector:

ol
li

Sample code:

<ol> <li>Content</li> </ol>
  1. Sample1
  2. Sample2
  3. Sample3

Combined Elements

Product/Service Listing

CSS selector:

.listing

.product-info

.product-image

.flex-listing

.flex-listing-image

.flex-listing-item

Sample code:

<article id="product#" class="listing flex-listing"> <section class="product-image flex-listing-item"> <a class="link-intext image-as-link" href="#"> <img src="img/" alt="Image as Link"> </a> </section> <section class="product-info flex-listing-item"> <h3>Product Name</h3> <h4>Price</h4> <p>Short Description</p> <a href="#" class="link-intext">Details Link</a> </section> </article>

Rendered element:

Aloe vera

Aloe Vera

Price: $16.99

Aloe vera is a succulent plant species of the genus Aloe. The plant is stemless or very short-stemmed with thick, greenish, fleshy leaves that fan out from the plant’s central stem. The margin of the leaf is serrated with small teeth.

Details...

Payment Form

CSS selector:

.new-checkout-row

.new-checkout-container

Sample code:

<div class="new-checkout-row"> <div class="new-checkout-col-25"> <div class="new-checkout-container""> <h3>SHOPPING CART</h3> <label for="fname"">Accepted Cards:</label> <div class="icon-container"> <i class="fab fa-cc-visa fa-2x" style="color: navy"> <input class="input-text" id="text_field" type="text"> <a href="products.html" class="button-reset"> <a href="thankyou.html" class="button-submit"> </form> </div>

Rendered element:

SHOPPING CART

evergreen_logo

Checkout Cart

CSS selector:

.cart

.cart-details

.cart-row

.cart-total

.flex-cart-details

.flex-cart-row

Sample code:

<article id="checkout_cart" class="cart"> <section class="cart-details flex-cart-details"> <table> <tr> <th>Products</th> <th>Price</th><th>Amount</th> <th>Total</th> </tr> <tr> <td> <a href="" class="link-intext image-wrapper"> <imgclass="image-as-link" src="" alt=""> </a><br />Fasciated Haworthia</td> <td>$19.99/each</td><td>1</td> <td>$19.99</td> </tr> <tr> <th></th> <th></th><th>Total</th> <th>$19.99</th> </tr> </table> </section> </article>

Rendered element:

Products Price Amount
Aloe vera
Aloe Vera
$19.99 1
Two hands holding a Aglaonema Kiwi
AGLAONEMA KIWI
$34.49 1
Total $54.48

Branding Ideas

Company Overview

"Evergreen" is an online company that mainly sells plants such as succulents and bonsai. It provides knowledge and tips on plant care and holds regular online sharing sessions on plant care tips. The company's goal is to build a plant-centered community and attract more young people to have plant companions.

Potential Customers

Potential customers will be young people who want to add small plants in the room but do not have the corresponding knowledge and experience.

Quick Personas

Bruce(22, Male, Student)

About
- Bruce is a third-year student who is busy studying all day.
- He lives alone in an apartment with a cat for company.
- He is very experienced in taking care of pets but not plants.

Goals
- Bruce wanted to make the apartment more cozy.
- He hopes to learn about caring for plants and try his hand at growing them.

Pain Points
- Bruce can't find a suitable place to buy succulents because the local plant stores are far away from him.
- He fails to find a way to systematically learn to care for plants.
- He doesn't find the right community to exchange ideas about caring for plants.

Competitiveness

Compared with other websites that sell plants online, "Evergreen" not only provides the option to buy plants, but also provides customers with sufficient knowledge and skills on caring for plants.
"Evergreen" pays more attention to the whole process of customers from purchasing plants to taking care of plants than other companies. It is better than any other company at keeping in touch with customers after their purchases are over.

Brand Components

Fonts: Montserrat

Samples:

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

Designed by Ulanovsky et al. From Google Fonts
Access and use via Montserrat Fonts

Colour Palettes

Primary: #0a6d36
Primary-container: #9ef6b0
On-primary-container: #00210b
Secondary: #506352
Secondary-container: #d3e8d2
On-secondary-container: #0e1f12
Tertiary: #3a656e
On-tertiary: #ffffff
Tertiary-container: #bdeaf5
On-tertiary-container: #001f25
Error: #ba1a1a
Error-container: #ffdad6
On-error-container: #410002
Background: #fcfdf7
On-background: #191c19
Surface-variant: #dde5da
On-surface-variant: #414941
Outline: #717970

Tools used: Adobe Color Wheel , Material Theme Builder

Potential imagery / Art Direction

The main art direction is to use flat illustrations for icons and minimalist plant photos for product images. (The following pictures are just samples and will not be used in the actual website)

Plant Flat Illustrations Aloe vera

Citations

Check Citation Page