<!DOCTYPE html>
<html>

	<head>
	
	  	<meta charset="UTF-8">
	
	  	<title>Profile</title>
	
		<!-- Links to css templates-->
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
		<!-- links to js-->
		<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/captain.js"></script>
		
	
	</head>

	<body>
		<!-- Logo placed here-->
	  	<h1><img src="13128567_543165655889975_2136713430_o.jpg" style = "width:250px;height:200px;"></img> </h1>
		<section id="content">
			<header>
				<!-- Information about the character (stock text)-->
		  		<figure class="profile-banner">
			  		<!--replacing my profile header with the css link just to make sure we have an image to scale-->
			  		<img src="https://unsplash.it/975/300" alt="Profile banner" />
			    		<!--img src="stock profile.jpg" alt="Profile banner" / commenting this image out for now --> 
		  		</figure>
		  		<!-- profile picture-->
		  		<figure class="profile-picture" 
		    			style="background-image: url('cap.png')">
		  		</figure>
		  	
		  		<section class="profile-stats">
		  		<!-- Menu -->
			    		<ul>
			      			<li alt="About">About </li>
			      			<li>Pictures</li>
			      			<li>Video</li>
			      			<li>ect</li>
			    		</ul>
			  	</section>
			  	<!-- Name of superhero / villain / anti-hero-->
			  	<h1 id="h1"> Captain America </h1>
			</header>
		
		  	<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
		  
		  	<section class="details">
				<h3>Details</h3>
				<!-- Information about the character (stock text)-->
				<p id = "description"></p> </p>
			</section>
			<!--Captian America's twitter feed -->
			<section class = "twitter">
				<a class="twitter-timeline" href="https://twitter.com/CaptainAmerica" data-widget-id="726026661943250944">Tweets by @CaptainAmerica</a>
				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
			</section>
		  
			<section class="post">
				<h2>Events</h2>
				<!-- Post from the character -->
				<p></p>
			</section>
			  
			<section class="post"> 
				<h2></h2>
				<p></p>
				</section>
		</section>
	
		<!-- Sise panel (having difficulty with)-->
		<!--section id="panel">
			 <section id ="side">
				<ul id="suggest">
					<li>if you like this you might like</li>
				</ul>
		  	</section>
		</section-->
	</body>
</html>
