Citations

Interactive Elements

Navigation Button

CSS Selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

In-text Link

CSS Selector:

a

Sample Code:

<a href="#">This is an in-text link</a> within a paragraph.

Rendered element:

This is an in-text link within a paragraph.

Text Input Field

CSS Selector:

label, input

Sample Code:

<form>
  <label for="name">Name<label>
  <input type="text" id="name" name="name" placeholder="Jane Doe">
<form>
<form>
  <label for="message">Message<label>
  <textarea placeholder="Enter Your Message Here" class="message-box"></textarea>
<form>

Rendered Element:

Submit/Reset Buttons

CSS Selector:

.button-submit, .button-reset, .button-bubbletea, .button-default

Sample Code:

<a href="#" class="button-default">Default</a>
<a href="#" class="button-bubbletea">Bubble Tea Buttons</a>
<a href="#" class="button-submit">Submit</a>
<a href="#" class="button-reset">Reset</a>
<a href="#" class="button-anchor">Reset</a>

Rendered Element:

Default
Bubble Tea Buttons
Submit
Reset
Anchor buttons

Headings

CSS selectors:

.header-text, .heading, .sub-heading

Sample Code:

<h1 class="head-text">Headings</h1>
<h2 class="heading">Headings</h2>
<h3 class="sub-heading">Headings</h3>
<h3 class="reward-heading">Rewards Heading</h3>
<h3 class="intext-heading">Intext heading</h3>
<h3 class="price-heading">Price heading</h3>

Rendered element:

Title

Heading

Sub Heading

Rewards heading

In text heading

Price heading

Paragraphs

CSS selectors:

.para

Sample Code:

<p class="para">Paragraph text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus vestibulum ligula, in feugiat mi tincidunt nec. Aliquam viverra vulputate odio eget accumsan. Aenean faucibus elit elit, quis varius sapien efficitur a. Sed non sapien non risus ullamcorper ornare. Sed non magna quis ex venenatis egestas a eu nibh.</p>

Rendered element:

Paragraph text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus vestibulum ligula, in feugiat mi tincidunt nec. Aliquam viverra vulputate odio eget accumsan. Aenean faucibus elit elit, quis varius sapien efficitur a. Sed non sapien non risus ullamcorper ornare. Sed non magna quis ex venenatis egestas a eu nibh.

Bullet Lists

CSS selectors:

ul, .bullet-style

Sample Code:

<ul>
  <li class="bullet-style">Bullet list example 1</li>
  <li class="bullet-style">Bullet list example 2</li>
</ul>

Rendered element:

  • Bullet list example 1
  • Bullet list example 2

Numbered Lists

CSS selector:

ol, .numbered-list

Sample code:

<ol>
  <li class="numbered-style">Numbered list example 1</li>
  <li class="numbered-style">Numbered list example 2</li>
</ol>

Rendered element:

  1. Numbered list example 1
  2. Numbered list example 2

Combined Elements

Main Navigation

CSS selector:

.navbar, .navbar-logo, .navbar-element, .navbar-link, .is-active

Sample Code:

<nav class="nav">
  <div class="nav-element">
    <a href="index.html" class="logo">
      bubble tea house
    </a>
    <div class="navbar">
      <a class="nav-link href="aboutus.html">About Us</a>
      <a class="nav-link href="bubbletea.html">Bubble Tea</a>
      <a class="nav-link href="contact.html">Contact Us</a>
      <a class="nav-link href="blog.html">Blog/Events</a>
      <a class="nav-link href="profile.html">Login</a>
    </div>
  </div>
</nav>

Rendered Element:

Product Listings

CSS selector:

.bubbletea, .grid-heading, .gird-description, .grid-description

Sample Code:

<div class"container">
  <div class="grid-row>
   <div class="grid-3or12>
    <a class="grid-link" href="milk-tea.html">
    <img class="bubbletea" src="img/bubbletea/milk_tea/milk_tea.png" alt="milk tea">
    <p class="grid-heading">Classic Milk Tea</p>
    <p class="grid-description">Hot / Cold</>
    <p class="price-description">$3.59</p>
    </a>
   </div>
  </div>
  <div class="grid-row>
   <div class="grid-3or12>
    <a class="grid-link" href="milk-tea.html">
    <img class="bubbletea" src="img/bubbletea/milk_tea/honesy_milk_tea.png" alt="honey milk tea">
    <p class="grid-heading">Honey Milk Tea</p>
    <p class="grid-description">Hot / Cold</>
    <p class="price-description">$3.59</p>
    </a>
   </div>
  </div>
  <div class="grid-row>
   <div class="grid-3or12>
    <a class="grid-link" href="milk-tea.html">
    <img class="bubbletea" src="img/bubbletea/milk_tea/coffee_milk_tea.png" alt="milk tea">
    <p class="grid-heading">coffee Milk Tea</p>
    <p class="grid-description">Hot / Cold</>
    <p class="price-description">$3.59</p>
    </a>
   </div>
  </div>
  <div class="grid-row>
   <div class="grid-3or12>
    <a class="grid-link" href="milk-tea.html">
    <img class="bubbletea" src="img/bubbletea/milk_tea/chocolate_milk_tea.png" alt="milk tea">
    <p class="grid-heading">Chocolate Milk Tea</p>
    <p class="grid-description">Hot / Cold</>
    <p class="price-description">$3.59</p>
    </a>
   </div>
  </div>
</div>

Rendered Element:

milk tea

Classic Milk Tea

Hot / Cold

$3.59
honey milk tea

Honey Milk Tea

Hot / Cold

$3.59
coffee milk tea

Coffee Milk Tea

Hot / Cold

$3.59
chocolate milk tea

Chocoloate Milk Tea

Hot / Cold

$3.59

Tables

CSS selector:

.navbar, .navbar-logo, .navbar-element, .navbar-link, .is-active

Sample Code:

<table class="table-summary">
  <tr>
   <th>Honey Milk Tea</th>
   <td>03.03.2017</td>
  </tr>
  <tr>
   <th class="summary-total">Oolong Tea</th>
   <td class="summary-total">03.02.2017</td>
  </tr>
  <tr>
   <th class="summary-total">Taro Smoothie</th>
   <td class="summary-total">02.27.2017</td>
  </tr>
  <tr>
   <th class="summary-total">Mango Smoothie</th>
   <td class="summary-total">02.17.2017</td>
  </tr>
  <tr>
   <th class="summary-total">Green Tea</th>
   <td class="summary-total">02.12.2017</td>
  </tr>
</table>

Rendered Element:

Honey Milk Tea 03.03.2017
Oolong Tea 03.02.2017
Taro Smoothie 02.27.2017
Mango Smoothie 02.17.2017
Green Tea 02.12.2017