-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
160 lines (147 loc) · 6.99 KB
/
contact.html
File metadata and controls
160 lines (147 loc) · 6.99 KB
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Vanna Khat</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dark-mode.css" id="darkModeStyle" disabled>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<h1>Vanna Khat</h1>
<span>IT Professional</span>
</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/skills.html">Skills</a></li>
<li><a href="/projects.html">Projects</a></li>
<li><a href="/contact.html" class="active">Contact</a></li>
</ul>
</nav>
<div class="theme-toggle">
<button id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</div>
<div class="mobile-menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</header>
<main>
<section class="page-header">
<div class="container">
<h1>Get In Touch</h1>
<p>I'm available for freelance work and new opportunities</p>
</div>
</section>
<section class="contact-content">
<div class="container">
<div class="contact-grid">
<div class="contact-info">
<h2>Let's Talk</h2>
<p>Have a project in mind or want to discuss potential collaboration? Feel free to reach out using the contact form or through any of the channels listed below.</p>
<div class="contact-details">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h4>Location</h4>
<p>Phnom Penh, Cambodia</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h4>Email</h4>
<p>contact@vannakhat.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-text">
<h4>Phone</h4>
<p>+855 12 345 678</p>
</div>
</div>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
</div>
</div>
<div class="contact-form">
<h2>Send a Message</h2>
<form id="contactForm">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Vanna Khat</h3>
<p>IT Professional specializing in software development and digital solutions.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/skills.html">Skills</a></li>
<li><a href="/projects.html">Projects</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect</h3>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Vanna Khat. All rights reserved.</p>
</div>
</div>
</footer>
<script src="js/script.js"></script>
<script src="js/dark-mode.js"></script>
</body>
</html>