Interactive Elements
In-Text link
CSS selector:
.in-text-link
Sample code:
<a class="in-text-link" href="#">Default Link</a>
Rendered element:
Default LinkButtons
CSS selector
.nav-item, .apply-para-button, .normal-button
Sample code:
<nav>
<ul class="container">
<li><a href="#" class="nav-item">NAV BUTTON</a></li>
</ul>
</nav>
<a href="login-for-product.html" class="apply-para-button">LOG IN TO APPLY</a>
<a href="lending.html" class="normal-button">MORE INFO</a>
Rendered element:
LOG IN TO APPLY MORE INFOSubmit Button for Forms
CSS selector
.submit-button
Sample code:
<input class="submit-button" type="submit" value="Submit">
<a class="submit-button" href="#">Reset</a>
Rendered element:
Text Input Field & Label
CSS selector
.text-input
Sample code:
<form class="text-input">
<label for="example-info">Enter information:</label><br>
<input type="text" name="example-info">
</form>
Rendered element:
Text Styling
Headings
CSS selectors:
h1, h2, and h3 element tags
Sample code:
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
Rendered element:
Heading1
Heading2
Heading3
Paragraph
CSS selectors:
p element tag
Sample code:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius quam neque, ut interdum mi volutpat eget. Suspendisse mauris turpis, gravida non purus nec, porta suscipit nisi.</p>
Rendered element:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius quam neque, ut interdum mi volutpat eget. Suspendisse mauris turpis, gravida non purus nec, porta suscipit nisi.
Bulleted List
CSS selector:
ul element tag
Sample code:
<ul class="styling-bullet">
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>
Rendered element:
- Apple
- Orange
- Grape
Numbered List
CSS selector:
ol element tag
Sample code:
<ol class="styling-ordered">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
Rendered element:
- Item A
- Item B
- Item C
Combined Elements
Main Navigation
CSS selector:
nav element tag
Sample code:
<nav>
<ul class="container">
<li class="nav-logo"><a href="index.html" class="nav-logo-item">sprout credit union</a> </li>
<li><a href="products.html" class="nav-item">PRODUCTS</a></li>
<li><a href="contact.html" class="nav-item">CONTACT</a></li>
<li><a href="login.html" class="apply-button">LOGIN</a></li>
</ul>
</nav>
Rendered element:
Product Listing
CSS selector:
.product, .product-text, .block
Sample code:
<a href="about.html" class="block">
<img src="image/fistbump.jpeg" class="main-blocks-content" alt="block-content">
<h2>about us</h2>
<p class="index-item-dexcription">Find out more about us as a credit union! We thrive to assist our clients to achieve their life goals. Visit here to see what other people are saying about us!</p>
</a>
<div class="product">
<h2 class="product-text">SPROUT MORTGAGE</h2>
<p class="product-text">Lorem ipsum dolor sit amet, quis nibh nec auctor, dictumst in at non quisque elit, morbi id sit erat, potenti wisi dictum amet, lectus id.</p>
<a href="apply.html" class="normal-button">Apply Now</a>
</div>
<div class="product">
<h2 class="product-text">No-Fee Chequing</h2>>
<p class="product-text">Here’s a no-fuss chequing account for your daily banking needs. Don’t get charged anything for your daily chequing transactions (i.e. point of sale transactions, pre-authorized debits, Canadian credit union ATM withdrawals, in branch withdrawals, in and branch bill payments.)</p>
<a href="#" class="apply-para-button">LOG IN TO APPLY</a>
</div>
Rendered element:
Banking Accounts
Accounts for your daily transactional and savings needs. All of our options give you value and flexibility that the other guys just can’t figure out.
MORE INFONo-Fee Chequing
Here’s a no-fuss chequing account for your daily banking needs. Don’t get charged anything for your daily chequing transactions (i.e. point of sale transactions, pre-authorized debits, Canadian credit union ATM withdrawals, in branch withdrawals, in and branch bill payments.)
LOG IN TO APPLYWebsite Grid Structure
CSS selector:
.container .grid-block .col[#]
Sample code:
<div class="container">
<p class="grid-block grid-structure col1">column 1</p>
<p class="grid-block grid-structure col2">column 2</p>
<p class="grid-block grid-structure col3">column 3</p>
</div>
<div class="container">
<p class="grid-block grid-structure col1">column 1</p>
<p class="grid-block grid-structure col2">column 2</p>
<p class="grid-block grid-structure col3">column 3</p>
<p class="grid-block grid-structure col4">column 4</p>
</div>
Rendered element:
column 1
column 2
column 3
column 1
column 2
column 3
column 4
Website Colour Swatches
CSS selector:
.container .grid-block .swatch .s[#]
Sample code:
<div class="container">
<p class="grid-block swatch swa1">#62D006</p>
<p class="grid-block swatch swa2">#04A05D</p>
<p class="grid-block swatch swa3">#2EBE80</p>
<p class="grid-block swatch swa4">#FFFFFF</p>
<p class="grid-block swatch swa5">#DBDBDB</p>
<p class="grid-block swatch swa6">#2D2D2D</p>
</div>
Rendered element:
#71B9C1
#2CA675
#0F4F46
#FFFFFF
#DBDBDB
#2A2A2A
Site Map
Synced Git Repository
To review the complete Git repository, you can view it on Taylor's GitHub account.
