Interactive Elements
In-Text link
CSS selector:
.in-text-link
Sample code:
<a class="in-text-link" href="#">Default Link</a>
Rendered element:
Default LinkNavigation Button
CSS selector
.nav-item
Sample code:
<nav>
<ul class="container">
<li><a href="#" class="nav-item">NAV BUTTON</a></li>
</ul>
</nav>
Rendered element:
Submit & Reset Button for Forms
CSS selector
.submit-button
.reset-button
Sample code:
<input class="submit-button" type="submit" value="Submit">
<a class="reset-button" href="#">Reset</a>
Rendered element:
ResetText 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="login.html" class="nav-item">LOGIN</a></li>
<li><a href="apply.html" class="nav-item">APPLY</a></li>
</ul>
</nav>
Rendered element:
Product Listing
CSS selector:
.product
Sample code:
<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>
Rendered element:
SPROUT MORTGAGE
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.
Apply NowWebsite Grid Structure
CSS selector:
.container .block .col[#]
Sample code:
<div class="container">
<p class="block grid-structure col1">column 1</p>
<p class="block grid-structure col2">column 2</p>
<p class="block grid-structure col3">column 3</p>
</div>
<div class="container">
<p class="block grid-structure col1">column 1</p>
<p class="block grid-structure col2">column 2</p>
<p class="block grid-structure col3">column 3</p>
<p class="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 .block .swatch .s[#]
Sample code:
<div class="container">
<p class="block swatch s1">#62D006</p>
<p class="block swatch s2">#04A05D</p>
<p class="block swatch s3">#2EBE80</p>
<p class="block swatch s4">#FFFFFF</p>
<p class="block swatch s5">#DBDBDB</p>
<p class="block swatch s6">#2D2D2D</p>
</div>
Rendered element:
#62D006
#04A05D
#2EBE80
#FFFFFF
#DBDBDB
#2D2D2D
Site Map
Synced Git Repository
To review the complete Git repository, you can view it on Taylor's GitHub account.
