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

Navigation Link

CSS selector:

.nav-link

Sample code:

<a href="#" class="nav-link">Navigation Link</a>

Rendered element:

Navigation Link

Submit/Reset Buttons

CSS selector:

.submit-reset

Sample code:

<input type="submit">
<input type="reset">

Rendered element:

Text Input Field with Label

CSS selector:

.text-input

Sample code:

<input type="text" id="text" name="text">
<label for="text">Label</label>

Rendered element:

Radio Button with Label

CSS selector:

.radio-button

Sample code:

<input type="radio" id="radio-button" name="label" value="label">
<label for="radio-button">Label</label>

Rendered element:

Label

Image as a Link

CSS selector:

.image-link

Sample code:

<a href="#" class="image-link"><img source="image.png" alt="a image"></a>

Rendered element:

Text Elements

Headings

Sample code:

<h1>Heading 1</h1>

                        <h2>Heading 2</h2>

                        <h3>Heading 3</h3>

                        <h4>Heading 4</h4>

Rendered element:

Heading1

Heading2

Heading3

Heading4

Paragraphs

Sample code:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
                        pellentesque eu, pretium quis, sem. </p>

Rendered element:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Numbered Lists

Sample code:

<ol type="1">

                        <li>item1</li>

                        <li>item2</li>

                        <li>item3</li>

                        </ol>

Rendered element:

item1
item2
item3

Combined Elements

Main Navigation

Sample code:

<nav class="main-nav">

                        <a class="nav-link" href="#">Home</a>

                        <a class="nav-link" href="#">About</a>

                        <a class="nav-link" href="#">Shop</a>

                        <a class="nav-link" href="#">Contact</a>

                        </nav>

Rendered element:

Product/Service Listing

Sample code:


                        <h4>Rendered element:</h4>

                        <img src="lipstick.jpg"/ alt="lipstick">

                        <h5>WANDF Lipstick 01</h5>

                        <p>$50.00</p>

                        <a href = "#">view details</a>

Rendered element:

WANDF Lipstick 01

$50.00

view details

WANDF Lipstick 02

$60.00

view details

WANDF Lipstick 03

$70.00

view details

Payment Form

Sample code:

<label for="name">Name</label>

                        <input type="text" id="name" name="name"><br>

                        <label for="address">Address</label>

                        <input type="text" id="address" name="adress"><br>

                        <label for="address">Phone Number</label>

                        <input type="text" id="phone-num" name="phone-num"><br>

                        <p>Payment Option:</p>

                        <input type="radio" id="master-card" name="payment" value="master-card">

                        <label for="master-card">Master Card</label><br>

                        <input type="radio" id="visa" name="payment" value="visa">

                        <label for="visa">Visa</label><br>

                        <input type="radio" id="paypal" name="payment" value="paypal">

                        <label for="paypal">Paypal</label><br>

                        <input type="submit" value="Submit">

Rendered element:

Checkout Cart

Sample code:


                        <p>item1 <span class="price">15.00</span> <span class="amount">x1</span></p>

                        <p>item2 <span class="price">25.00</span> <span class="amount">x1</span></p>

                        <p>Total: 40.00</p>

Rendered element:

GLAMOUR VELVET LIQUID LIPSTICK

$50.00

BLURRING LIQUID LIP

$70.00

Total: $120.00

Basic Branding Ideas

What does the company do, or offer?

Lips&Lips is a third party lipstick retailer sales the brands from Asia, for example, 3CE, Perfect Diaries and etc.

Who is the company to potential customers?

The potential customers are teenager girls who like brand of lipstick from Asia with fashion design.

Why might this company entice someone to purchase a product or service?

In Canada, most of retailers like Sephora only sales brand lipstick from U.S or Europe. Most of their target audiences are woman instead of teenagers. This store provides the option for tennagers to purchase the brands designed for them which is hard to find in North America.

Assemble Brand Components

Font

Heading#1 - Assistant

Heading#2 - Assistant

Heading#3 - Achivo

Heading#4 - Achivo

Paragraphs/buttons - PT Sans

P02 - Style Guide

Interactive Elements

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Radio Button with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

Sample code:

Rendered element:

Heading1

Heading2

Heading3

Heading4

Paragraphs

Sample code:

Rendered element:

Numbered Lists

Sample code:

Rendered element:

Combined Elements

Main Navigation

Sample code:

Rendered element:

Product/Service Listing

Sample code:

Rendered element:

WANDF Lipstick 01

WANDF Lipstick 02

WANDF Lipstick 03

Payment Form

Sample code:

Rendered element:

Checkout Cart

Sample code:

Rendered element:

Total: $120.00

Basic Branding Ideas

What does the company do, or offer?

Who is the company to potential customers?

Why might this company entice someone to purchase a product or service?

Assemble Brand Components

Font

Heading#1 - Assistant

Heading#2 - Assistant

Heading#3 - Achivo

Heading#4 - Achivo

Main title sample

subtitle text sample

Color Platte

Icons

Footer

Citations