-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (122 loc) · 4.89 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
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Best City Guide</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="main-header container clearfix" id="home-anchor">
<h1 class="name"><a href="#">Samuel Lopez</a></h1>
<nav class="clearfix">
<ul class="main-nav clearfix">
<li>
<a href="#home-anchor">HOME</a>
</li>
<li>
<a href="#portfolio-anchor">PORTFOLIO</a>
</li>
<li>
<a href="#contact-anchor">CONTACT ME</a>
</li>
</ul>
</nav>
<!--/nav-->
</header>
<!--/.main-header-->
<div class="profile">
<div class="container clearfix">
<img alt="My profile picture" class="profile-pic" src="img/responsive-layout-profile.png" />
<p>Hi! I'm a front-end developer who loves responsive design and CSS. I recently finished a degree in
front-end web development at Treehouse and am excited to put all my skills to use!</p>
</div>
</div>
<!--/.profile-->
<section class="portfolio">
<h2 class="title" id="portfolio-anchor">PORTFOLIO</h2>
<div class="container clearfix">
<article class="marketing col">
<img alt="Marketing Project" src="img/portfolio-1.png">
<h3>Marketing Page</h3>
<p>This project shows the front page of a marketing website for a specific business I'm interested in.
</p>
</article>
<!--/.marketing-->
<article class="search col">
<img alt="Search Project" src="img/portfolio-2.png">
<h3>Search Page</h3>
<p>This project searches through a specific database to find information that the user is trying to look
up.</p>
</article>
<!--/.search-->
<article class="travel col">
<img alt="Travel Project" src="img/portfolio-3.png">
<h3>Travel Page</h3>
<p>This project compares travel times based on different transportation methods and tells you the best
one.</p>
</article>
<!--/.travel-->
<article class="map col">
<img alt="Map Project" src="img/portfolio-6.png">
<h3>Map of Favorite Spots</h3>
<p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself
walking tour.
</p>
</article>
<!--/.map-->
<article class="gallery col">
<img alt="Gallery Project" src="img/portfolio-5.png">
<h3>Photo Gallery</h3>
<p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate
through photos.</p>
</article>
<!--/.gallery-->
<article class="calculator col">
<img alt="Calculator Project" src="img/portfolio-4.png">
<h3>Calculator</h3>
<p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
</article>
<!--/.calculator-->
</div>
<!--/.container-->
</section>
<!--/.portfolio-->
<section class="contact">
<h2 class="title" id="contact-anchor">CONTACT</h2>
<div class="container">
<p>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>Phone: <a href="tel:+1111-555-1234">+1 (111) 555-1234</a></p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<!--/.container-->
</section>
<!--/.contact-->
<footer class="main-footer container">
<hr />
<h4 class="name-footer"><a href="#">Samuel Lopez</a></h4>
<nav class="clearfix">
<ul class="footer-nav clearfix">
<li>
<a href="#home-anchor">HOME</a>
</li>
<li>
<a href="#portfolio-anchor">PORTFOLIO</a>
</li>
<li>
<a href="#contact-anchor">CONTACT</a>
</li>
</ul>
<ul class="footer-nav-btt clearfix">
<li>
<a href="#home-anchor">BACK TO TOP</a>
</li>
</ul>
</nav>
<!--/nav-->
</footer>
<!--/.main-footer-->
</body>
</html>