davidcosmanio/about.html at master · DavemanCosman/davidcosmanio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>David Cosman - About</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="main.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body onload="main()">
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<div class="navbar-header">
				<!--For mobile menu-->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!--a class="navbar-brand" href="#">Logo</a-->
			</div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a href="index.html">Home</a></li>
					<li class="active"><a href="#about">About</a></li>
					<li><a href="portfolio.html">Portfolio</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container-fluid text-center">
		<div class="row content">
			<div class="col-sm-2 sidenav">
				<img src="images/davidcosman.jpg" alt="David Cosman" id="smallpic" />
			</div>
			<div id="mainContent" class="col-sm-6 text-left">
				<h3>Professional Web Design and Instructional Design</h3>
				<p>Welcome to my website!</p>
				<p>I’m a graduate from Western University in Computer Science and English. I built this site to advertise my services and show some of my skill in writing and programming.</p>
				<p>My mission is to help you create awesome content for your business or project. I use all sorts of tools in my work, from common tools like the Microsoft Office suite, open source design software like GIMP, source control collaborative software like Git and Jira, and even instructional design software like Articulate Storyline. I’m quite experienced and proud of the work I do, but don’t take my word for it; check out my <a href="portfolio.html">Portfolio</a> to see some samples!</p>
				<p>I’ve put a lot of hours into this website, so if you’re impressed and like what you see, please go to the <a href="contact.html">Contact</a> page and give me a shout.</p>
				<h3>Questions and Answers</h3>
				<p><i>Why a dark color scheme?</i></p>
				<p>A white background with dark text is better for reading, but because you are probably not here to read paragraphs like this one, I chose a dark color scheme with light text because it makes it easier on the eyes to scan text. If you are reading this, you'll notice that the text is a light grey rather than white. I chose this color for paragraphs, because reading bright white text is harmful for the eyes. For the headings (like the ones above), I chose white because they call attention to the sections of text and you typically don't focus on them.</p>
				<p><i>What did you use to make this website?</i></p>
				<p>I'm currently using Bootstrap 3 to make my site accessible, with some customized styling to change the colors and image sizes. If you want to see it in action, try to resize your browser window or open my site on your smart phone or tablet! My website is hosted on Amazon Web Services.</p>
			</div>
			<div class="col-sm-4 sidenav">
				<img src="images/davidcosman.jpg" alt="David Cosman" id="bigpic" />
			</div>
		</div>
	</div>
	<footer>
		<div class="container">
			<p>© David Cosman, 2017</p>
		</div>
	</footer>
	<script src="updateImageSize.js"></script>
</body>
</html>