<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}
body{
background:#f5f7fb;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
padding:20px;
}
.contact-box{
width:100%;
max-width:700px;
background:#fff;
padding:40px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
h1{
font-size:36px;
color:#222;
margin-bottom:10px;
text-align:center;
}
p{
color:#666;
text-align:center;
margin-bottom:30px;
line-height:1.6;
}
.form-group{
margin-bottom:20px;
}
label{
display:block;
margin-bottom:8px;
font-weight:600;
color:#333;
}
input,
textarea{
width:100%;
padding:15px;
border:1px solid #ddd;
border-radius:10px;
font-size:16px;
outline:none;
transition:.3s;
}
input:focus,
textarea:focus{
border-color:#007bff;
box-shadow:0 0 8px rgba(0,123,255,.15);
}
textarea{
height:180px;
resize:vertical;
}
button{
width:100%;
padding:16px;
background:#007bff;
color:#fff;
font-size:18px;
border:none;
border-radius:10px;
cursor:pointer;
transition:.3s;
}
button:hover{
background:#0056d2;
}
.contact-info{
margin-top:35px;
padding-top:25px;
border-top:1px solid #eee;
text-align:center;
}
.contact-info h3{
margin-bottom:12px;
color:#222;
}
.contact-info p{
margin:8px 0;
color:#555;
}
.contact-info a{
color:#007bff;
text-decoration:none;
}
.contact-info a:hover{
text-decoration:underline;
}
@media(max-width:600px){
.contact-box{
padding:25px;
}
h1{
font-size:28px;
}
}
</style>
</head>
<body>
<div class="contact-box">
<h1>Contact Us</h1>
<p>
Have a question about Online Image Converter? Found a bug or want to suggest a new feature? Send me a message and I'll get back to you as soon as possible.
</p>
<form>
<div class="form-group">
<label>Your Name</label>
<input type="text" placeholder="John Doe">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="you@example.com">
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" placeholder="How can I help?">
</div>
<div class="form-group">
<label>Message</label>
<textarea placeholder="Write your message here..."></textarea>
</div>
<button type="submit">Send Message</button>
</form>
<div class="contact-info">
<h3>Contact Information</h3>
<p>Email:</p>
<p>
<a href="mailto:rose572ali@gmail.com">
rose572ali@gmail.com
</a>
</p>
</div>
</div>
</body>
</html>
rose572ali@gmail.com
+923086399365
+12