<!DOCTYPE html>
<html>
	<head>
		<title>[skyneilson.com] Style Guide</title>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link href="css/styleguide.css" type="text/css" rel="stylesheet" />
	<link href="index.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
	<header>
		<?php include'header.php'; ?>
	</header>
		<h1 class="styleguide">[skyneilson.com] Style Guide</h1>
		
		
<!-- Overview Section -->

		<section>
			<h2 class="styleguide">Overview</h2>
			<h3 class="styleguide">Site Purpose</h3>
			<p class="styleguide">[My website is about my portfolio work that I have completed in the past classes I have taken and to use it as a resume. I will display projects of logos and images and workbooks as well as some summaries to my life's accomplishments. ]</p>
			<h3 class="styleguide">Target Audience</h3>
			<p class="styleguide">[My target audience are employers looking to hire me for my work experience in web design and anyone else who would like to see my work. I plan to target my audience to businesses that I seek employment in.]</p>
		</section>
		
<!-- Layout Section -->		
		
		<section>
			<h2 class="styleguide">Layout</h2>
			<h3 class="styleguide">Sitemap</h3>
			<img src="images/sitemap.jpg" alt="[skyneilson.com] Sitemap image"/>
		</section>
		
<!-- Branding Section -->		
		
		<section>	
			<h2 class="styleguide">Branding</h2>
			<h3 class="styleguide">Website Logo</h3>
			<img src="images/logo.png" alt="[Skylar Neilson] Logo image"/>
			<h3 class="styleguide">Color Palette</h3>
			<p class="styleguide">I chose my colors from a color palette website and they seemed to go well with the content and images that will be placed in the website.
			The colors are cool and more masculine which is what I am going for with my website design.</p>
			<div id="color1" class="colorgroup">
				<h4 class="styleguide">[Black]</h4>
				<p class="styleguide">#[000000]<br/>
				[0, 0, 0]</p>
				<div class="swatches" id="swatch1"></div>
			</div>
			<div id="color2" class="colorgroup">
				<h4 class="styleguide">[Midnight blue]</h4>
				<p class="styleguide">#[2F4E6F]<br/>
				[47, 78, 111]</p>
				<div class="swatches" id="swatch2"></div>
			</div>
			<div id="color3" class="colorgroup">
				<h4 class="styleguide">[CBlue Nepal]</h4>
				<p class="styleguide">#[98B1C4]<br/>
				[152, 177, 196]</p>
				<div class="swatches" id="swatch3"></div>
			</div>
			<div id="color4" class="colorgroup">
				<h4 class="styleguide">[Hot Cinnamon]</h4>
				<p class="styleguide">#[E15119]<br/>
				[225, 81, 25]</p>
				<div class="swatches" id="swatch4"></div>
			</div>
			<div class="clear"></div>
		</section>
		
<!-- Typography Section -->		
		
		<section>	
			<h2 class="styleguide">Typography</h2>
			<p class="styleguide">The font families that I chose for my website are San-Serif:"Arial Black", Gadget, sans-serif for the paragraphs and I chose Georgia and serif for the heading and the links along with the menus so that the fonts are contrasting between each other.
			I also like the way it is to easily read with these fonts.</p>
			<h3 class="styleguide">Heading Font</h3>
			<h4>ABCDEFGHIJKLMNOPQRSTUVWXYZ&lt;br/&gt;
			abcdefghijklmnopqrstuvwxyz&lt;br/&gt;
			1234567890!@#$%^&amp;*()_+</h4>
			<h3>-Sample Heading-</h3>
			<h3 class="styleguide">Body Copy Font</h3>
			<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ&lt;br/&gt;
			abcdefghijklmnopqrstuvwxyz&lt;br/&gt;
			1234567890!@#$%^&amp;*()_+</p>
			<p>Lorem ipsum nonsed eicillabore essum fugit lantisit, si nis eictia num fugiam et quatquis resto eossitem quunt quae sit dolupis maio omnimo il id maio bea ipid que conseque volorem. Et facidebit vel ma doluptasitis num, ullandebit hicto beaquos tiumquis postrum cori odit eosam quiatur? Volo quid minvel earuptatem quiatur?</p>
			<p>Mod qui quunturiam idenderro ma et ex ex ex exerum faci repel molut evelign amenduciis moloreperum qui nullupt ustrumet, sequi a pre non net is dia comnimusant isque voleseque eatur simpori beruptae quam fugit eostios quasi nulpa quatur molorero quam eventio ma venis quideri atiaturione volupiscia sime denestis et hil magnatem aliquundella cusanihit fuga. Pienia dolo tem voluptassi volor as voluptae nulla sed maximincium sapelen tiatqui busapernatus aspis as aborioreic tet recta volessu ndelit hil is explame niminve ratur?
Mus andebis si adipsamus ad moluptiae cum este verupid es sequam veri tem sequi re volum doluptatque veriorepudis et, tetum as porem et que sim natiis doluptatures et, sam rehent alicipis suntio conestio ipsandam que prem idi quiasped mod maximod iatium ex et quassimin nonempo reperisci te nonsedit ut auta volorisque paribus.</p>
		</section>
		

	
		
<!-- HTML Elements Section -->		
		
		<section>
			<h2 class="styleguide">HTML Elements</h2>
			<h3 class="styleguide">Headings</h3>
			<h1>h1</h1>
			<h2>h2</h2>
			<h3>h3</h3>
			<h4>h4</h4>
			<h5>h5</h5>
			<h6>h6</h6>
			<h3 class="styleguide">Lists</h3>
			<h4 class="styleguide">Unordered List</h4>
			<ul class="boo">
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
			<h4 class="styleguide">Ordered List</h4>
			<ul class="boo">
			  <li>Not Applicable</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
			
			<h3 class="styleguide">Links</h3>
			<a href="#">Link style 1</a><br/>
			<a href="#" class="linkstyle2">Link style 2</a>

			<h3 class="styleguide">Paragraphs</h3>
			<p>Lia sitio blabore ruptatium, to dolorum erum siniscia cor serum sinum solupti aecepe dolupta quiaturion exerum quasi ut et eatemolorem fugit, adistis ab in et dolectem venda custisint occabor esequas core mod est, anditium everes as idundae rferferferi qui re dit eaquo veliquia qui totatiam denis iniscii squatur?</p>
			<p>Ant aliquias alis es ma proribus. Solest, officiendic tem eatibeatium re voluptas es diae eate a eostrume nis il erum facit et ex est, ipsae cum simodi tet quos ma volupta aut latur, et quamus nobis netur seritius excero voloratuscia essequaspis sequo cus, everum nissit et fugiaeperor acepedit quatiam et eum volo dicaeribus dest lab illiqua temporrum, que quam que perovidus, voluptatur, officto doluptata nempore icipsapid eatas es eum quiaspis earum que offic tem fugita voluptatinis quis as audigen derferf erition sectasitia solupta nam net quatur andis del ium re enihit aut apelist et es milit quaes ulles expliquunt volorum eictium quia iur, nis dit asped estiatem. </p>
			
			<h3 class="styleguide">Figure & Figcaption</h3>
			<figure>
				<img src="images/diving2.jpg" alt="Figure image"/>
				<figcaption>This is the figcaption</figcaption>
			</figure>		
		</section>
		
<!-- References Section -->		
		
		<section>
			<h2 class="styleguide">References</h2>
			<!-- List the websites you used as inspiration or plan on using for inspiration. Also include which elements of these websites you used or plan on using. -->
			<h3 class="styleguide">Links to Web Design Examples</h3>
			<ul class="styleguide">
				<li><a href="http://www.artofmanliness.com/">http://www.artofmanliness.com/</a> I used this site as inspiration for a little bit of the format for my own website.</li>
				<li><a href="http://skylarjn.wordpress.com/">http://skylarjn.wordpress.com/</a> I plan on using a little bit of the navigation menus from this site as inspiration for how I want to have a few of the side navigations to look like in my web pages.</li>
				<li><a href="http://www.apple.com/">http://www.apple.com/</a>I enjoy the easy look and feel to this website and opens up my vision of how I would like to create my main nav at the top of the screen.</li>
			</ul>
		</section>
		<footer>
			<?php include'footer.php'; ?>
		</footer>
		
	</body>
</html>