P02 - Style Guide Template

Interactive Elements

In-text link

CSS selector:

click the link.

Sample code:

<h3>In-text link</h3>

Navigation Link

CSS selector:

.flowerNav

Rendered element:

Sample code:

<nav><div class="flowerNav"><a href="#interactive_elements">Interactive Elements</a>
        <a href="#text_elements">Text Elements</a>
        <a href="#combined_elements">Combined Elements</a>
        <a href="productlist.html">Product List</a>
        <a href="checkout.html">Checkout</a>
        <a href="#citations">Citations</a></div>

Submit/Reset Buttons

CSS selector:

.button-nav2

Rendered element:

Submit/Reset

Sample code:

<a href="#" class="button-nav2">Submit/Reset</a>

Text Input Field with Label

CSS selector:

.lab

Rendered element:

Sample code:

<label for="yname">Flower name: </label><br>
        <input class="lab" type="text" id="yname" name="input"/>

Radio Button with Label

CSS selector:

input[type='radio']

Rendered element:

Sample code:

<form id="radio_btn_select"></label>Choose your choices: </label>
        <input type="radio" name="flowertype" id="weddingFlower" />
        <label for="weddingFlower">Wedding Flower></label>
        <input type="radio" name="flowertype" id="forParent" />
        <label for="forParent">For Parent></label>
        < type="radio" name="flowertype" id="proposal"/>
        <label for="proposal">Proposal></label></form>

Image as a Link

CSS selector:

.image

.overlay

Rendered element:

Fresh Plant

Fresh Flower

Sample code:

<div class="container"> <img class="image" alt="image" src="9EC95C9C-17DD-465E-9BFD-36BC9917903C_1_105_c.jpeg"></a>
        <div class="overlay">Fresh Flower</div></div>

Text Elements

Headings

This is heading one

This is heading two

This is heading three

This is heading four

Sample code:


        <h2>This is heading one</h2>
        <h3>This is heading two</h3>
        <h4>This is heading three</h4>
        <h5>This is heading four</h5>

Paragraphs

This is a project 1 checked


        <p>This is a project 1 checked</p>

Numbered Lists

Bouquets
Light Dome
Flower Boxes

Sample code:

<li>Bouquets</li>
        <li>Light Dome</li>
        <li>Flower Boxes</li>

Combined Elements

Main Navigation

Product/Service Listing

Click to the link

Chekout & Payment Form

Order Summary

	ab-Jab the Marble Queen Pothos Small Plant Quality
$59

	Open media 1 in gallery view Nala the Cat Palm XL Plant Quality
$89

	Pablo the Mexican Fence Post Cactus XL Plant Quality
$179

Tax 12%

Delivery

Total

$68.75

$4.95

$435.55

Please select your card:

Submit

Sample code:


            <label for="input">Name:</label><br>
            <input type="text" id="input" name="input"><br>
            <label for="Address">Address:</label><br>
            <input type="text" id="address" name="input"><br>
            <label for="card_number">Card Number:</label><br>
            <input type="text" id="card_number" name="input"><br>
            <label for="cvv">CVV:</label><br>
            <input type="text" id="cvv" name="input"><br>
            <label>Choose your Payment Form: </label>          
      
            <input type="radio"  name="paymenttype"  id="visa"
         value="F1"  checked="checked" />
         <label for="visa">Visa </label>
        
            <input type="radio"  name="paymenttype"  id="paypal"
         value="F2" />
         <label for="paypal">Paypal label>
        
            <input type="radio"  name="paymenttype"  id="mastercard"
         value="F3" />
         <label for="mastercard">Mastercard </label>

Checkout Cart

Basic branding ideas for company.

1.This company selling the products of plant. We offer shipping method that convenience for the people we want to order online. Our product spread into difference kinds: plant for outdoor, plant for indoor, pet-friendly plant, gifts plant.
2. The company tends to offer plants for customer who do not have time shoppong plant store and prefer to buy plants online.
3. The attractive service of this company is that you can send plants to your home which you can order plants online, and you can also make your own plants according to your needs.

Interactive Elements

In-text link

CSS selector:

Sample code:

Navigation Link

CSS selector:

Rendered element:

Sample code:

Submit/Reset Buttons

CSS selector:

Rendered element:

Sample code:

Text Input Field with Label

CSS selector:

Rendered element:

Sample code:

Radio Button with Label

CSS selector:

Rendered element:

Sample code:

Image as a Link

CSS selector:

Rendered element:

Sample code:

Text Elements

Headings

This is heading one

This is heading two

This is heading three

This is heading four

Sample code:

Paragraphs

Numbered Lists

Sample code:

Combined Elements

Main Navigation

Product/Service Listing

Chekout & Payment Form

Order Summary

Sample code:

Checkout Cart

Basic branding ideas for company.

Assemble brand components

Font One: Josefin Sans:

Use the Louis George cafe for the products name, body text and informations. And this font colour is Black.

Colour palettes:

Use these four colors to match the plants, with green color as the main color.

Citations