DALIA'S PORTFOLIO: STYLE GUIDE

Interactive Elements

Navigation Button Style

CSS selector:

.navItem li a

Sample code:

<li><a href="modules.html" class="navItem">Modules</a></li>

Final outcome:

Navigation Button

Text Styling

Headings

CSS selector:

.header2 .header3 #header1

Sample code:

<div> <h1 id="header1">MAIN HEADER</h1> <h2 class="header2">SUB HEADER 1</h2> <h3 class="header3">SUB HEADER 2</h3> </div>

Final outcome:

MAIN HEADER

SUB HEADER 1

SUB HEADER 2

Paragraphs

CSS selector:

.left-container p

Sample code:

<div class ="left-container"> <p>Spicy jalapeno bacon ipsum dolor amet non short loin fatback beef ribs andouille dolore sunt swine meatball eu doner occaecat anim bacon hamburger. Ea beef ribs culpa, shank brisket sirloin nostrud jerky cillum proident salami.</p></div>

Final outcome:

Spicy jalapeno bacon ipsum dolor amet non short loin fatback beef ribs andouille dolore sunt swine meatball eu doner occaecat anim bacon hamburger. Ea beef ribs culpa, shank brisket sirloin nostrud jerky cillum proident salami.

Combined Elements

Main Navigation

CSS selector:

.navBar .nav-Item li a nav li

Sample code:

<nav> <ul class="navBar sideNav"> <li><a href="index.html" class="navLogo"><img src="img/white-Vector.png"></a></li> <li><a href="competition.html" class="navItem">About Us</a></li> <li><a href="modules.html" class="navItem">Modules</a></li> <li><a href="blogGallery.html" class="navItem">Blog</a></li> <li><a href="contact-us.html" class="navItem">Contact Us</a></li> <li><a href="create-account.html" class="navItem">Join Code Green</a></li> </ul> </nav>

Final outcome:

About Us
Store
Create
Community
Help
Contact Us

Website Grid Structure

CSS selector:

.g-sect-cont .g-sect-item .btn-text .mbrown .dblue

Sample code:

<div class="g-sect-cont"> <div class="g-sect-item btn-txt mbrown" > Column Grid 1 </div> <div class="g-sect-item btn-txt dblue"> Colum Grid 2 </div> </div> <div class="g-sect-cont"> <div class="g-sect-item btn-txt mbrown">Column Grid 1</div> <div class="g-sect-item btn-txt dblue">Column Grid 2</div> <div class="g-sect-item btn-txt mbrown">Column Grid 3</div> <div class="g-sect-item btn-txt dblue">Column Grid 4</div> </div> <div class="g-sect-cont"> <div class="g-sect-item btn-txt mbrown">Column Grid 1</div> </div>

Final outcome:

Column Grid 1
Colum Grid 2
Column Grid 1
Column Grid 2
Column Grid 3
Column Grid 4
Column Grid 1

Website Colour Swatches

CSS selector:

.inter-grid-container .inter-grid-item .mbrownn .btn-txt #dbrown #mbla #mwhi

Sample code:

<div class="inter-grid-container"> <div class="c-sect-item mbrown"> <p class="btn-txt">#886D5C</p> </div> <div class="c-sect-item" id="dbrown"> <p class="btn-txt">#5A4435</p> </div> </div> <div class="inter-grid-container"> <div class="c-sect-item" id="mblue"> <p class="btn-txt">#182537</p> </div> <div class="c-sect-item dblue"> <p class="btn-txt">#4D80BC</p> </div> </div> <div class="c-sect-container"> <div class="inter-grid-item" id="mbla"> <p class="btn-txt">#000000</p> </div> <div class="c-sect-item" id="mwhi"> <p>#FFFFFF</p> </div> </div>

Final outcome:

#4F7CAC

#164144

#3BB2B8

#BCF6D9

#000000

#FFFFFF