/
index.html
133 lines (116 loc) · 6.97 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
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<title>Stephanie Butenhof | Portfolio</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- BODY -->
<body>
<!-- HEADER -->
<header>
<div class="full-width">
<div class="half-width">
<h1>Stephanie Butenhof</h1>
</div>
<div class="half-width">
<!-- NAVIGATION -->
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<h2><span>Hi,</span> I'm an aspiring developer - learning something new every day!</h2>
</div>
</header>
<!-- MAIN -->
<main>
<!-- ABOUT SECTION -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I live in Norman, Oklahoma, with my fiance, five teenagers, four small dogs, and one big cat! Life is never boring around here! As a high school senior, I was "websmaster" of my school's website, proudly written by myself, entirely in HTML. There may have been glittery, blinking graphics involved, because, hey, it was the early 2000s, and they were all the rage! I had already put myself on a career track to become a teacher, so that's what I went to college for, but over time, I realized that technology has always been my true passion. Now, MANY years later, *ahem* I am finally beginning to realize that dream! I've been studying with Skillcrush's Break Into Tech Blueprint, and they have helped me to build this very website, using their HTML & CSS course! </p>
</div>
<div class="half-width">
<p> Now, I'm on track to begin Lambda School's Web23 Bootcamp Class, starting in August of 2019! Ever since I found out that remote jobs were a possibility, they've been my dream. Being able to work anywhere in the world (that has internet!), and not being tied down to one location sounds amazing! I've gotten a small taste of remote work, doing Independent Contractor work as a software tester, but I'm excited to have a full-time CAREER, where I am able to enjoy doing what I love for the rest of my life. I love how coding challenges me, and makes me feel like I'm constantly solving some sort of a puzzle - like I'm Link in a real-life game of Zelda. It's pretty sweet, and I can't wait to see where it takes me! <3</p>
</div>
</div>
</section>
<!-- WORK SECTION -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/html-icon.png" alt="HTML icon" />
<h3>Hand-Coded HTML</h3>
<p>My focus is on writing clean, well-formatted, semantic HTML5 by hand, to make sure that the content is easy to read, easy to collaborate, trouble-shoot, and accessible.</p>
</div>
<div class="third-width">
<img src="img/css-icon.png" alt="CSS icon" />
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/psd-icon.png" alt="PSD icon" />
<h3>Ease Converting Designs into Code</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is a pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact-image.png" alt="Desk with flowers" />
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<!-- EMAIL -->
<a href="mailto:hello@seestephsay.com" target="_blank">
<img id="envelope" src="img/envelope.png" alt="Envelope" />
hello[@]seestephsay.com
</a>
<!-- SOCIAL MEDIA -->
<h3 id="socialmedia-header"><strong>Or, find me on the interwebs.</strong></h3>
<ul>
<li>
<a href="https://www.twitter.com/seestephsay" target="_blank">
<img src="img/twitter.png" alt="Twitter icon" />
</a>
</li>
<li>
<a href="https://www.facebook.com/stephaniebutenhof" target="_blank">
<img src="img/facebook.png" alt="Facebook icon" />
</a>
</li>
<li>
<a href="https://www.instagram.com/seestephsay" target="_blank">
<img src="img/instagram.png" alt="Instagram icon" />
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/stephaniebutenhof" target="_blank">
<img src="img/linkedin.png" alt="LinkedIn icon" />
</a>
</li>
<li>
<a href="https://www.github.com/seestephsay" target="_blank">
<img src="img/github.png" alt="Github icon" />
</a>
</li>
</ul>
</div>
</div>
</footer>
</main>
</body>
</html>