-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
116 lines (102 loc) · 3.82 KB
/
contact.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Me | Vinny Jodoin</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/site.webmanifest">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
height: 30vh;
background-image: url('images/UTK_zoom.jpg');
background-size: cover;
background-position: center 10%;
color: white;
padding: 50px 0;
text-align: center;
}
nav {
margin: 20px 0;
text-align: center;
}
nav a {
margin: 0 15px;
color: #333;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: #4CAF50;
}
section {
padding: 20px;
max-width: 1000px;
margin: 0 auto;
background-color: white;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
/* Add styles for social icons */
.social-icons a {
color: #333; /* Icon color */
font-size: 24px; /* Icon size */
margin: 0 10px; /* Spacing between icons */
text-decoration: none; /* Remove underline */
transition: color 0.3s; /* Smooth hover effect */
}
.social-icons a:hover {
color: #0077b5; /* Change color on hover, e.g., LinkedIn blue */
}
.header {
background-color: #f4f4f4;
padding: 20px;
text-align: center; /* Centers the block-level .social-icons element */
}
.social-icons {
width: 200px; /* Set a fixed width */
margin: 0 auto; /* Centers the element */
text-align: center; /* Centers the icons within the element */
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header>
<h1>Vinny Jodoin - Contact Me</h1>
</header>
<nav>
<a href="about.html">About Me</a>
<a href="projects.html">Projects</a>
<a href="experience.html">Experience</a>
<a href="contact.html">Contact</a>
</nav>
<section>
<h2>Contact</h2>
<p>I am happy to connect to discuss how my skills could best support your current or future work.
Please feel free to reach out via email, or linkedIn.
Lorem ipsum odor amet, consectetuer adipiscing elit. Quisque dui quis, ad eleifend molestie tempor. Consequat placerat dapibus cras tellus pulvinar. Finibus ligula praesent nisi nunc ad ad sem ad? Ultricies nullam elementum pulvinar purus tincidunt enim posuere dapibus iaculis. Magnis fames fusce tristique nam, tempor vitae sagittis. Dictum maximus nisl imperdiet orci libero ultrices enim.
</p>
<div class="social-icons">
<a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope"></i></a>
<a href="https://www.linkedin.com/in/your-profile" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/your-username" target="_blank"><i class="fab fa-github"></i></a>
</div>
</section>
<footer>
<p>© 2024 Vinny Jodoin. All rights reserved.</p>
</footer>
</body>
</html>