Interactive Elements

In-text link

CSS selector:

Sample code:


          <a href="http://www.snowyvillages.ca" target="blank">See more dessert options here.</a>

Rendered element:

Click here to see more dessert options.

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Default Button</a>

Rendered element:

Default Button

Text Input Field with Label

CSS selector:

form, label, input

Sample code:


          <form method="post" action="#">

          <label for="form-name">First Name:</label>

          <input type="text" id="form-email" placeholder="Jane">

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

          </form>

Rendered element:

Image as a Link

CSS selector:

a img, a:hover img, a:focus img

Sample code:


          <a href="http://www.snowyvillages.ca" target="blank">

          <img src="img/02greentea_landing.jpg" alt="An appetizing shaved ice dessert with matcha topping sprinkled.">

          </a>

Rendered element:

An appetizing shaved ice dessert with matcha topping sprinkled. — Check out what is in store at CloudPuff Pastries!

Text Elements

Headings

CSS selector:

h1, h2, h3, h4, h5

Sample code:


          <h1>Heading 1</h1>

          <h2>Heading 2</h2>

          <h3>Heading 3</h3>

          <h4>Heading 4</h4>

          <h5>Heading 5</h5>

Rendered element:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS selector:

Sample code:


          <p>At CloudPuff Pastries we strive to bring customers a taste of angelic delight.
          With a wide selection of freshly made drinks and desserts, there is something for everyone.
          Our fluffy cakes, creamy treats, and sweet confections are bound to bring you a little slice of heaven.</p>

Rendered element:

At CloudPuff Pastries we strive to bring customers a taste of angelic delight. With a wide selection of freshly made drinks and desserts, there is something for everyone. Our fluffy cakes, creamy treats, and sweet confections are bound to bring you a little slice of heaven.

Numbered Lists

CSS selector:

ol, li

Sample code:


          <ol>

          <li>Injeolmi Bingsoo</li>

          <li>Matcha Bingsoo</li>

          <li>Strawberry Bingsoo</li>

          </ol>

Rendered element:

Injeolmi Bingsoo
Matcha Bingsoo
Strawberry Bingsoo

Combined Elements

Main Navigation

CSS selector:

.button-nav

Sample code:


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

          <a href="#" class="button-nav">Menu</a>

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

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

Rendered element:

Product/Service Listing

Citations

Matteson, Steve. Designer. 2011. Open Sans [Font]. Retrieved from https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans
Creator. (Role). (Year). Title [Media]. Retrieved from URL.
https://digitalsynopsis.com/design/beautiful-color-palettes-combinations-schemes/
http://www.keelyreyes.com/illustration
http://www.snowyvillages.ca

Branding

Interactive Elements

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Link

CSS selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

Rendered element:

Text Elements

Headings

CSS selector:

Sample code:

Rendered element:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Combined Elements

Main Navigation

CSS selector:

Sample code:

Rendered element:

Product/Service Listing

Citations