Noble Cat

1.Interactive Elements

In-text link

This is the link.

Sample Code

<a href="#">This is the link.</a>

Navigation Button

Sample Code

<nav>

                <a href="#">Navigation 1</a>
                <a href="#">Navigation 2</a>
                <a href="#">Navigation 3</a>

                </nav>

Submit/Reset Buttons

Sample Code


                <button name="submit" class="submitButton">Submit</button>
                <button name="reset" class="resetButton">Reset</button>

Text Input Field

Your Name:

Sample Code

 <div class="Tlabel">
                <label for="yourName">Name</label>
                <input class="input" type="text" placeholder="Coco Feng">
                </div>

2.Text Elements

Headings

Heading 1 (Main Title)

Heading 2 (Section Header)

Heading 3 header (Sub Section Header)

Heading 4 header (Secondary Sub Section Header)

Sample Code



                <h1>Heading 1 (Main Title) </h1>
                <h2>Heading 2 (Section Header) </h2>
                <h3>Heading 3 header (Sub Section Header) </h3>
                <h4>Heading 4 header (Secondary Sub Section Header) </h4>

Paragraphs

A paragraph.

Sample Code


                <p>A paragraph.</p>

Bulleted Lists

Item 1
Item 2
Item 3

Sample Code


                <ol class="1">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                </ol>

Numbered Lists

Item A
Item B
Item C

Sample Code


                <ol class="1">
                <li>Item A</li>
                <li>Item B</li>
                <li>Item C</li>
                </ol>

3.Combined Elements

Main Navigation

Sample Code



                <nav class="nav1">

                <a href="#furniture">Cat Furnitures</a>
                <a href="#food">Cat Food</a>
                <a href="#accessories">Cat Food</a>
                <a href="#checkout">Check Out</a>
                <a href="#help">Help</a>

                </nav>

Style Guide

1.Interactive Elements

In-text link

Sample Code

Navigation Button

Sample Code

Submit/Reset Buttons

Sample Code

Text Input Field

Sample Code

2.Text Elements

Headings

Sample Code

Paragraphs

Sample Code

Bulleted Lists

Sample Code

Numbered Lists

Sample Code

3.Combined Elements

Main Navigation

Sample Code

Product Listing

Freda Cat Home Litter Box Enclosure

$94.99

Heidi Tunnel Bed with Wood Leg Elevated

$99.99

Hartung Soft Pet Carrier

$58.99

Colour Swatches