Style Guide

In-text link

CSS selector:

a

Sample code:

Rendered element:

In-text link

Navigation Link

CSS selector:

.button-nav

Sample code:

Rendered element:

Text Input Field with Label

CSS selectors:

form, .form-element, label, input

Sample code:

            
                <form>
                  <div class="form-element"> 
                    <label for="first-name">First Name</label> 
                    <input id="first-name" type="text" placeholder="First Name">First Name</input>
                  </div> 
                </form>
            
          

Rendered element:

Image as a Link

CSS selector:

.image-link

Sample code:

            
              <a 
                  class="image-link" 
                  href="https://www.sketchappsources.com/free-source/846-ui-style-guide-sketch-freebie-resource.html"
                >
                <img 
                    src="img/style-guide.png"
                    alt="A style guide for a UI Design"
                    width="800"
                    height="600"
                />
              </a>
            
          

Rendered element:

Headings

CSS selector:

.heading-guide

Sample code:

Rendered element:

Heading1

Heading2

Heading3

Heading4

Paragraphs

CSS selector:

none

Sample code:

Rendered element:

This is the place where you can look for the working space in your area for your desired work.

Numbered Lists

CSS selectors:

.numbered-list

Sample code:

            
              <ul class="numbered-list"> 
                  <li>Garage space</li> 
                  <li>Backyard space</li>
                  <li>Store room space</li>
              </ul>
            
          

Rendered element:

• Garage space
• Backyard space
• Store room space

Main Navigation

CSS selector:

.main-navigation

Sample code:

            
              <nav class="main-navigation">
                <a href="">Home</a>
                <a href="">Listings</a>
                <a href="">About us</a>
                <a href="">Advanced Search</a>
              </nav>
            
          

Product/Service Listing

Garage space

• Size: 150sqft
• Location: 1000 Pacific Ave, Pacific Ocean, P4O 2P0
• Price: $ 50 per day (Negotiable)
• Contact: Available on request

Colors

CSS selectors:

.p1-colors, .medium-aquamarine

Sample code:

            
              <div class="p1-colors">
                <div class="medium-aquamarine">#56E39F</div>
              </div>
            
          

Rendered element:

Fonts

• Roboto Serif Bold
• Roboto Serif Bold Itatlic
• Montserrat Light