<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Modern Contact Form | Learn With Arshyan</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background: linear-gradient(120deg, #6a11cb, #2575fc);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrapper {
background: #fff;
width: 90%;
max-width: 950px;
display: flex;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.contact-left {
background: linear-gradient(135deg, #00f2fe, #4facfe);
flex: 1;
color: white;
padding: 50px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-left h2 {
font-size: 32px;
margin-bottom: 20px;
}
.contact-left p {
font-size: 16px;
margin-bottom: 8px;
}
.contact-right {
flex: 1;
padding: 50px 40px;
background: #ffffff;
}
.contact-right h2 {
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
outline: none;
background: transparent;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #2575fc;
}
.form-group label {
position: absolute;
top: -10px;
left: 12px;
background: white;
padding: 0 5px;
font-size: 14px;
color: #2575fc;
}
.form-group textarea {
resize: none;
min-height: 100px;
}
.form-group span {
color: #ff4d4d;
font-size: 13px;
display: none;
}
.form-right button {
width: 100%;
padding: 14px;
border: none;
background: linear-gradient(to right, #4facfe, #00f2fe);
color: white;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
.form-right button:hover {
transform: translateY(-2px);
}
@media(max-width: 768px) {
.contact-wrapper {
flex-direction: column;
}
.contact-left,
.contact-right {
padding: 30px 25px;
}
.contact-left h2,
.contact-right h2 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="contact-wrapper">
<div class="contact-left">
<h2>Get in Touch</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>📧 support@learnwitharshyan.com</p>
<p>📍 Lahore, Pakistan</p>
<p>📞 +92 300 0000000</p>
</div>
<div class="contact-right form-right">
<h2>Contact Us</h2>
<form id="contactForm" onsubmit="return validateForm()">
<div class="form-group">
<input type="text" id="name" required />
<label for="name">Your Name</label>
<span id="nameError">Please enter your name.</span>
</div>
<div class="form-group">
<input type="email" id="email" required />
<label for="email">Your Email</label>
<span id="emailError">Enter a valid email.</span>
</div>
<div class="form-group">
<textarea id="message" required></textarea>
<label for="message">Your Message</label>
<span id="messageError">Message cannot be empty.</span>
</div>
<button type="submit">Send Message</button>
</form>
</div>
</div>
<script>
function validateForm() {
let valid = true;
const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const message = document.getElementById("message").value.trim();
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const messageError = document.getElementById("messageError");
nameError.style.display = "none";
emailError.style.display = "none";
messageError.style.display = "none";
if (name === "") {
nameError.style.display = "block";
valid = false;
}
if (!email.match(/^\S+@\S+\.\S+$/)) {
emailError.style.display = "block";
valid = false;
}
if (message === "") {
messageError.style.display = "block";
valid = false;
}
if (valid) {
alert("Message sent successfully!");
document.getElementById("contactForm").reset();
}
return false;
}
</script>
</body>
</html>
]]>
