-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
140 lines (122 loc) · 8.04 KB
/
contact.html
File metadata and controls
140 lines (122 loc) · 8.04 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
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | MohamadReza</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gradient-to-br from-slate-50 via-slate-100 to-slate-200 text-gray-800 flex flex-col min-h-screen relative overflow-x-hidden">
<!-- Toast Notification -->
<div id="toast" class="fixed top-8 left-1/2 transform -translate-x-1/2 bg-white/40 backdrop-blur-xl text-gray-800 px-8 py-4 rounded-2xl shadow-xl z-50 toast border border-white/30"></div>
<!-- Top Gradient Bar -->
<div class="fixed top-0 left-0 w-full h-2 bg-gradient-to-r from-[#04142A] via-[#067CC2] to-[#E4FF00] z-50 top-gradient-bar"></div>
<!-- Navbar -->
<nav class="main-nav fixed top-6 left-1/2 transform -translate-x-1/2 z-40 flex justify-center items-center gap-6 md:gap-12 px-8 py-4 rounded-full shadow-lg transition-all duration-300">
<a href="index.html" class="text-white hover:text-blue-400 font-semibold transition">Home</a>
<a href="profile.html" class="text-white hover:text-blue-400 font-semibold transition">Profile</a>
<a href="contact.html" class="text-blue-400 font-semibold transition">Contact</a>
</nav>
<!-- Title -->
<h1 class="text-3xl md:text-4xl font-extrabold bg-gradient-to-r from-[#04142A] via-[#067CC2] to-[#E4FF00] text-transparent bg-clip-text mt-32 text-center font-vazir animate-fade-in">
تماس با من
</h1>
<!-- Contact Section -->
<main class="flex-1 flex items-center justify-center px-6 pt-12 pb-16">
<div class="w-full max-w-4xl">
<div class="w-full flex flex-col md:flex-row-reverse gap-6 items-center justify-center animate-fade-in-delay">
<!-- Form (Right column on desktop) -->
<div class="md:w-2/5 w-full flex justify-center">
<form id="contactForm" class="profile-card bg-white/60 backdrop-blur-xl rounded-2xl p-4 shadow-lg w-full max-w-md space-y-3 text-right">
<input
type="text"
id="name"
placeholder="نام شما"
class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 font-vazir"
/>
<input
type="email"
id="email"
placeholder="ایمیل شما"
class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 font-vazir"
/>
<textarea
id="message"
rows="4"
placeholder="پیام شما..."
class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 font-vazir"
></textarea>
<button
type="submit"
class="cta-button w-full py-2 rounded-full bg-[#067CC2] text-white font-semibold hover:bg-[#04142A] transition font-vazir"
>
ارسال پیام
</button>
</form>
</div>
<!-- Contact Cards (Left column on desktop) -->
<div class="md:w-3/5 w-full">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- LinkedIn Card -->
<div class="profile-card bg-white/60 backdrop-blur-xl rounded-2xl p-3 shadow-lg text-right">
<h3 class="flex items-center gap-2 font-bold text-lg mb-2">
<a href="https://www.linkedin.com/in/mohamad-reza/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">
<path d="M4.98 3.5C4.98 4.6 4.1 5.5 3 5.5S1 4.6 1 3.5 1.9 1.5 3 1.5s1.98.9 1.98 2zM1.5 8h3v12h-3V8zm7.5 0h2.8v1.7h.04c.39-.7 1.35-1.45 2.78-1.45 2.98 0 3.54 1.96 3.54 4.5v7.25h-3v-6.4c0-1.53-.03-3.5-2.13-3.5-2.14 0-2.47 1.67-2.47 3.4v6.5h-3V8z"/>
</svg>
</a>
LinkedIn
</h3>
<p class="text-gray-600 text-sm font-vazir">برای ارتباط در لینکدین</p>
</div>
<!-- Email Card -->
<div class="profile-card bg-white/60 backdrop-blur-xl rounded-2xl p-3 shadow-lg text-right">
<h3 class="flex items-center gap-2 font-bold text-lg mb-2">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-red-500">
<path d="M3 8l9 6 9-6"></path>
<path d="M21 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8"></path>
</svg>
E‑Mail
</h3>
<p class="text-gray-600 text-sm font-vazir">هماهنگیها و مکاتبات اداری</p>
</div>
<!-- Phone Card -->
<div class="profile-card bg-white/60 backdrop-blur-xl rounded-2xl p-3 shadow-lg text-right">
<h3 class="flex items-center gap-2 font-bold text-lg mb-2">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-green-600">
<path d="M22 16.92V21a2 2 0 0 1-2.18 2A19.86 19.86 0 0 1 3 5.18 2 2 0 0 1 5 3h4.09a1 1 0 0 1 1 .75c.12.66.36 1.3.7 1.88a1 1 0 0 1-.24 1L9.91 9.91a16 16 0 0 0 6.18 6.18l1.28-1.63a1 1 0 0 1 1-.24c.58.34 1.22.58 1.88.7a1 1 0 0 1 .75 1V21z"></path>
</svg>
Text & Call
</h3>
<p class="text-gray-600 text-sm font-vazir">برای هماهنگی بیشتر شماره تماستون را ارسال بفرمائید</p>
</div>
<!-- GitHub Card -->
<div class="profile-card bg-white/60 backdrop-blur-xl rounded-2xl p-3 shadow-lg text-right">
<h3 class="flex items-center gap-2 font-bold text-lg mb-2">
<a href="https://github.com/mmamadalili" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-700 hover:text-gray-900 transition-colors duration-200">
<path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.71-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1.01.07 1.54 1.04 1.54 1.04.9 1.54 2.36 1.1 2.94.84.09-.65.35-1.1.63-1.35-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0 1 12 6.8c.85.004 1.71.115 2.5.34 1.9-1.29 2.74-1.02 2.74-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.68.92.68 1.85 0 1.33-.01 2.41-.01 2.74 0 .26.18.58.69.48A10.01 10.01 0 0 0 22 12c0-5.52-4.48-10-10-10z"></path>
</svg>
</a>
GitHub
</h3>
<p class="text-gray-600 text-sm font-vazir">پروژهها و نمونه کارها</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer text-center py-6 text-sm text-gray-500">
© <span id="year"></span> <strong class="text-gray-700">MohamadReza</strong> — Let's connect.
</footer>
<script src="script.js"></script>
</body>
</html>