-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
174 lines (164 loc) · 11 KB
/
contact.html
File metadata and controls
174 lines (164 loc) · 11 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Personal Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4">
<nav class="flex justify-between items-center">
<div class="text-2xl font-bold text-indigo-600">Portfolio</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-gray-600 hover:text-indigo-600">Home</a>
<a href="about.html" class="text-gray-600 hover:text-indigo-600">About</a>
<a href="projects.html" class="text-gray-600 hover:text-indigo-600">Projects</a>
<a href="contact.html" class="text-indigo-600 font-medium">Contact</a>
</div>
<button id="menu-toggle" class="md:hidden text-gray-600">
<i class="fas fa-bars text-2xl"></i>
</button>
</nav>
</div>
</header>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white">
<div class="container mx-auto px-4 py-2">
<div class="flex flex-col space-y-3 pb-4">
<a href="index.html" class="text-gray-600 hover:text-indigo-600">Home</a>
<a href="about.html" class="text-gray-600 hover:text-indigo-600">About</a>
<a href="projects.html" class="text-gray-600 hover:text-indigo-600">Projects</a>
<a href="contact.html" class="text-indigo-600 font-medium">Contact</a>
</div>
</div>
</div>
<!-- Contact Section -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h1 class="text-4xl font-bold text-gray-800 mb-4">Get In Touch</h1>
<p class="text-gray-600 max-w-2xl mx-auto">Have a project in mind or want to discuss potential opportunities? Feel free to reach out using the form below or through my social media profiles.</p>
<div class="w-24 h-1 bg-indigo-600 mx-auto mt-6"></div>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<div class="bg-white rounded-xl shadow-lg p-8">
<form id="contact-form" class="space-y-6">
<div>
<label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Your Name" required>
<span class="error-text text-red-500 text-sm mt-1 hidden">Please enter your name</span>
</div>
<div>
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="your.email@example.com" required>
<span class="error-text text-red-500 text-sm mt-1 hidden">Please enter a valid email address</span>
</div>
<div>
<label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
<input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Subject" required>
<span class="error-text text-red-500 text-sm mt-1 hidden">Please enter a subject</span>
</div>
<div>
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Your message here..." required></textarea>
<span class="error-text text-red-500 text-sm mt-1 hidden">Please enter your message</span>
</div>
<button type="submit" class="w-full bg-indigo-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-indigo-700 transition duration-300">
Send Message
</button>
<div id="form-message" class="mt-4 text-center hidden"></div>
</form>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-white rounded-xl shadow-lg p-8 h-full">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Information</h2>
<div class="space-y-6 mb-10">
<div class="flex items-start">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-map-marker-alt text-indigo-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Location</h3>
<p class="text-gray-600">Karachi, Pakistan</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-envelope text-indigo-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Email</h3>
<p class="text-gray-600">porfolio@gmail.com</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-phone-alt text-indigo-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Phone</h3>
<p class="text-gray-600">+92 300 1234567</p>
</div>
</div>
</div>
<h2 class="text-2xl font-bold text-gray-800 mb-6">Follow Me</h2>
<div class="flex space-x-4">
<a href="#" class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition duration-300">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="#" class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition duration-300">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition duration-300">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition duration-300">
<i class="fab fa-dribbble text-xl"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h2 class="text-2xl font-bold text-indigo-400">Ruby</h2>
<p class="mt-2 text-gray-400">Frontend Developer & UI/UX Designer</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github text-2xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin text-2xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter text-2xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram text-2xl"></i>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 Ruby. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>