-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (122 loc) · 6.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<title>Portfolio</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=BenchNine:300,400" rel="stylesheet">
</head>
<body>
<div class="main">
<header>
<nav>
<div class="main-nav">
<h3 class="name">Haley Ward</h3>
<ul class="main-ul">
<li><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="profile">
<img src="images/responsive-layout-profile.png" alt="my profile image" class="profile-image">
<p>Hi! I'm a front-end developer who loves responsive
design and css. I recently finished learning front-end
web development at Treehouse and am excited to put all
my skills to use!
</p>
</div>
<div class="main-content" id="portfolio">
<h2>Portfolio</h2>
<div class="row-container">
<div class="card">
<img src="images/portfolio-1.png" alt="Screenshot of my marketing page">
<div>Marketing Page</div>
<p>This project shows me the front page of a marketing
website meant for a specific business I'm ineterested in.
</p>
</div>
<div class="card">
<img src="images/portfolio-2.png" alt="Screenshot of my search page">
<div>Search Page</div>
<p>This project seaches through a specific datebase to
find information that the user is trying to look up.
</p>
</div>
<div class="card end">
<img src="images/portfolio-3.png" alt="Screenshot of my travel app">
<div>Travel App</div>
<p>This project compares travel times based on different
transportation methods and tells you the best one.
</p>
</div>
<div class="card">
<img src="images/portfolio-4.png" alt="Map of my favorite spots">
<div>Maps of Favorite Spots</div>
<p>This project usess mapping apis to plot points of my
favorite spots in the city for a do-it-yourself walking tour.
</p>
</div>
<div class="card">
<img src="images/portfolio-5.png" alt="Screenshot of my photo gallery">
<div>Photo Gallery</div>
<p>This project shows pictures from a recent trip to the
viewer and allows them to easily navigate through photos.
</p>
</div>
<div class="card end">
<img src="images/portfolio-6.png" alt="Screenshot of the calculator app I made">
<div>Calculator</div>
<p>Someone can enter in the numbers they want, and press
the big blue button and get the result.
</p>
</div>
</div>
</div>
</main>
<div class="skills" id="skills">
<div class="skills-info">Skills</div>
<p>I am currently taking course at Team Treehouse. I plan
on receiving their Front end web development tech degree.
As I continue learning, I hope to learn these languages:
</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Ember.js</li>
<li>Python</li>
<li>Java</li>
</ul>
</div>
<div class="contact-info" id="contact">
<div class="contact">Contact</div>
<p class="text-para">If you're interested in chatting or want more information
about what I've been working on, I'd love to hear from you!
</p>
<p class="text">Phone <strong class="phone"> +1(111) 555-1234</strong></p>
<p class="text">Email <strong><a href="mailto:[email protected]">[email protected]</a></strong></p>
</div>
<footer>
<nav class="footer-nav">
<h3>Haley Ward</h3>
<div class="nav">
<ul class="footer-ul">
<li><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<a class="top" href="#top">Back to Top</a>
</nav>
</footer>
</div>
</body>
</html>