-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (99 loc) · 4.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paul Van Leuven</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Muli:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="content container">
<header class="main-header">
<h1 class="title">Paul Van Leuven</h1>
<ul id="nav" class="nav">
<li><a href="#nav">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>
</header>
<div class="banner clearfix">
<img class="profile-pic" src="images/fampic.png" alt="profile pic">
<p>Hi! I'm a front end web developer who is honing my skills are creating websites using HTML and CSS. Here you will find an example of one of my first websites. It is designed with the mobile first approach.</p>
</div>
</nav>
<main class="main-content container">
<h2 id="portfolio">Portfolio</h2>
<div class="portfolio">
<div class="box">
<img src="images/portfolio-1.png" alt="marketing">
<p class="label">Marketing Page</p>
<p>This picture shows the front page of a marketing page that I am interested in.</p>
</div>
<div class="box">
<img src="images/portfolio-2.png" alt="search">
<p class="label">Search Page</p>
<p>This project searches through a specific database to find relevant information on the internet.</p>
</div>
<div class="box">
<img src="images/portfolio-3.png" alt="travel">
<p class="label">Travel App</p>
<p>This project compares travel times based on different transportation methods and tells you the best one.</p>
</div>
<div class="box">
<img src="images/portfolio-4.png" alt="map">
<p class="label">Map of Favorite Spots</p>
<p>This project uses mapping apps to plot a path to different parts of a city while on a walking tour.</p>
</div>
<div class="box">
<img src="images/portfolio-5.png" alt="photos">
<p class="label">Photo Gallery</p>
<p>This project shows trips from a recent trip to the viewer and allows them to navigate through the photos.</p>
</div>
<div class="box">
<img src="images/portfolio-6.png" alt="calculator">
<p class="label">Calculator</p>
<p>Someone can enter in the numbers they want and press the big blue button to get a result.</p>
</div>
</div>
<div>
<h2 id="skills">Skills</h2>
<div class="skills">
<div class="skills-box">
<img src="images/portfolio-1.png" alt="marketing">
<p class="label">Teaching</p>
<p>With over eight years of classroom teaching experience, I have developed my skills at educating students from a variety of different backgrounds and with a variety of different skill levels.</p>
</div>
<div class="skills-box">
<img src="images/portfolio-2.png" alt="search">
<p class="label">Learning</p>
<p>I have dedicated myself to being a lifelong learner. I have always strived to put my mind towards aquiring a new skill and putting those new skills to the test. Coding is the next part of the journey.</p>
</div>
</div>
</div>
<div class="contact">
<h2 id="contact">Contact</h2>
<p class="contact-p">If you're interested in chatting and want more information about what I have been working on, feel free to get in touch.</p>
<p><span>☎</span> Phone: (555) 777-2222</p>
<p><span>✉</span> Email: babybeluga@raffi.com</p>
</div>
</main>
<footer>
<div class="small-footer">
<p>Paul Van Leuven</p>
<a class="top" href="#">back to top</a>
</div>
<div class="big-footer">
<p>Paul Van Leuven</p>
<ul class="nav">
<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>
</footer>
</body>
</html>