/
index.html
163 lines (159 loc) · 8.54 KB
/
index.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kerri Resing, Developer</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:400,700|Quattrocento:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#about">Kerri Resing, Developer</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li id="about-me"><a href="#about">About Me</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#skills">Skills and Services</a></li>
<li><a href="#featured">Featured Work</a></li>
<li><a href="work.html#portfolio">Portfolio</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="about" class="container-fluid row">
<div class="col-sm-3 col-sm-offset-1">
<img src="images/kerri-picture.jpg" alt="Kerri" class="img-circle img-responsive">
</div>
<div class="col-sm-7">
<h1 id="skills">About Me</h1>
<p id="skills">
I currently live in Kirkland, WA with my husband, Tom, daughter, Elise, and Chester the cat. My background includes degrees in education and psychology, owning and managing two successful children's businesses and business consulting. During this time, I learned how much an effective website can help to grow a business and wanted to learn even more. Now I’ve made a switch to web development, where I can use my organizational skills and knowledge of business operations to write simple, efficient code to help you get the results you want from your website.</p>
</div>
</div>
<div id="work-summary" class="container-fluid">
<div class="container-fluid row">
<h2 class="text-center" id="skills-header">Skills and Services</h2>
</div>
<div class="row col-sm-12">
<div class="col-sm-4 text-center">
<i class="fa fa-code fa-4x center-block"></i>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, formatted HTML5 by hand to make sure that the content is easy to read, collaborate on, and update.</p>
</div>
<div class="col-sm-4 text-center">
<i class="fa fa-css3 fa-4x center-block"></i>
<h3>Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I like to keep my CSS lean and fast to load, and I make it a habit to stay up to date on current practices.</p>
</div>
<div class="col-sm-4 text-center">
<i class="fa fa-desktop fa-4x center-block"></i>
<h3 id="featured">Designs into Code</h3>
<p>You can trust me to take a designer’s PSD and quickly & accurately convert it into a webpage.</p>
</div>
</div>
</div>
<div>
<div class="container-fluid row">
<h2 class="text-center">Portfolio - Featured Work</h2>
</div>
<div class="container-fluid row">
<div class="col-sm-4 col-sm-offset-2">
<figure class="figure">
<a href="unplugged-website/index.html" target="_blank"><img src="images/unplugged-page.png" alt="indie rock website" class="img-thumbnail img-responsive"></a>
<figcaption class="figcaption">A fully responsive website with multiple pages created as part of the <a href="http://www.skillcrush.com" target="blank">Skillcrush</a> curriculum.</figcaption>
</figure>
</div>
<div class="col-sm-4">
<figure class="figure">
<a href="rogue-pickings/index.html" target="_blank"><img src="images/rogue-pickings.png" alt="Food Truck page" class="img-thumbnail img-responsive"></a>
<figcaption class="figcaption">The home page of a website created for a fictional food truck.</figcaption>
</figure>
</div>
</div>
<div class="container-fluid row">
<div class="col-sm-4 col-sm-offset-2">
<figure class="figure">
<a href="flexbox-portfolio/index.html" target="_blank"><img src="images/flexbox-portfolio.png" alt="flexbox example" class="img-thumbnail img-reponsive"></a>
<figcaption class="figcaption">An example of a responsive portfolio page using flexbox.</figcaption>
</figure>
</div>
<div class="col-sm-4">
<figure class="figure">
<a href="chester.html" target="_blank"><img src="images/chester-site.png" alt="Page about my cat" class="img-thumbnail img-responsive"></a>
<figcaption class="figcaption">A quick site created for my cat, Chester.</figcaption>
</figure>
</div>
</div>
<div class="container-fluid row">
<h4 class="text-center">Want to see more? <a href="work.html">Click here</a> to see more of my portfolio.</h4>
</div>
</div>
<div id="contact" class="container-fluid">
<h2 class="text-center">Contact Me</h2>
<div class="row col-sm-12">
<div class="col-sm-4 col-sm-offset-1">
<h3 class="text-right">Like what you see?</h3>
<h4 class="text-right">Let's meet for coffee. <a href="mailto:kerri.dev@resing.net">Email me</a> and I will get back to you as quickly as possible.</h4>
<h4 class="text-right">Around the web:</h4>
<ul>
<li><a href="http://www.github.com/kresing" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a href="http://linkedin.com/in/kresing" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://twitter.com/kresing" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://instagram.com/kerriwins" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.freecodecamp.com/kresing" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-sm-5">
<!-- email form
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">I'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" class="form-control" id="exampleInputName1" placeholder="Name" required>
</div>
<div class="form-group">
<label for="exampleMessageArea">Message</label>
<textarea class="form-control" id="exampleMessageArea" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> -->
<figure class="figure">
<img src="images/contact-image.jpg" alt="Contact" class="img-responsive">
</figure>
</div>
</div>
</div>
<div id="footer" class="container-fluid row">
<div class="col-sm-12 text-center">
<p>Made with ♥ and iced lattes by <a href="http://www.github.com/kresing" target="_blank">Kerri Resing</a></p>
</div>
</div>
</body>
</html>