Features Included:
-
Responsive Layout:
-
Uses CSS Grid and Flexbox for responsive design
-
Mobile-friendly with media queries for different screen sizes
-
-
Modern Design Elements:
-
Clean, professional color scheme
-
Rounded input fields and buttons
-
Subtle hover effects and animations
-
Floating labels with smooth transitions
-
-
Contact Form:
-
Fields for Name, Email, Phone, Subject, and Message
-
Required field indicators
-
Submit button with hover effect
-
-
Contact Information Panel:
-
Company address, phone, email, and office hours
-
Google Maps embed
-
Icon-based layout for better visual hierarchy
-
-
Form Validation:
-
JavaScript validation for required fields
-
Email format validation
-
Visual feedback for errors (red borders)
-
Success and error messages
-
-
Additional Features:
-
Animated sections (fade-in effect)
-
Font Awesome icons for better visual appeal
-
Placeholder animation for form inputs
-
The template is ready to use - just copy the code into an HTML file and it will work without any additional dependencies (except the Font Awesome CDN for icons). You can easily customize colors, content, and other elements to match your brand.
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--accent-color: #4cc9f0;
--light-color: #f8f9fa;
--dark-color: #212529;
--success-color: #4bb543;
--error-color: #ff3333;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7ff;
color: var(--dark-color);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Main Content */
.main-title {
text-align: center;
margin: 40px 0;
color: var(--dark-color);
}
.main-title h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.main-title p {
color: #666;
max-width: 700px;
margin: 0 auto;
}
/* Contact Section */
.contact-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.contact-form {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark-color);
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: all 0.3s;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
outline: none;
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: white;
border: none;
padding: 12px 25px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s;
}
.btn:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
/* Contact Info */
.contact-info {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-info h2 {
margin-bottom: 20px;
color: var(--dark-color);
}
.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.info-item i {
color: var(--primary-color);
font-size: 20px;
margin-right: 15px;
margin-top: 3px;
}
.info-content h3 {
font-size: 18px;
margin-bottom: 5px;
color: var(--dark-color);
}
.info-content p {
color: #666;
}
/* Map */
.map-container {
margin-top: 30px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.map-container iframe {
width: 100%;
height: 300px;
border: none;
}
/* Messages */
.message {
padding: 15px;
margin-bottom: 20px;
border-radius: 6px;
display: none;
}
.message.success {
background-color: rgba(75, 181, 67, 0.2);
color: var(--success-color);
display: block;
}
.message.error {
background-color: rgba(255, 51, 51, 0.2);
color: var(--error-color);
display: block;
}
/* Floating Labels */
.floating-label-group {
position: relative;
margin-bottom: 20px;
}
.floating-label {
position: absolute;
top: 12px;
left: 15px;
color: #999;
transition: all 0.3s;
pointer-events: none;
}
.form-control:focus + .floating-label,
.form-control:not(:placeholder-shown) + .floating-label {
top: -10px;
left: 10px;
font-size: 12px;
background-color: white;
padding: 0 5px;
color: var(--primary-color);
}
/* Responsive */
@media (max-width: 768px) {
.main-title h1 {
font-size: 2rem;
}
.contact-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.main-title h1 {
font-size: 1.8rem;
}
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.contact-form, .contact-info {
animation: fadeIn 0.5s ease-out forwards;
}
.contact-info {
animation-delay: 0.2s;
}
document.addEventListener('DOMContentLoaded', function() {
const contactForm = document.getElementById('contactForm');
const successMessage = document.getElementById('success-message');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Reset messages
successMessage.style.display = 'none';
errorMessage.style.display = 'none';
// Get form values
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const subject = document.getElementById('subject').value.trim();
const message = document.getElementById('message').value.trim();
// Simple validation
let isValid = true;
if (name === '') {
isValid = false;
document.getElementById('name').style.borderColor = 'var(--error-color)';
} else {
document.getElementById('name').style.borderColor = '#ddd';
}
if (email === '' || !validateEmail(email)) {
isValid = false;
document.getElementById('email').style.borderColor = 'var(--error-color)';
} else {
document.getElementById('email').style.borderColor = '#ddd';
}
if (subject === '') {
isValid = false;
document.getElementById('subject').style.borderColor = 'var(--error-color)';
} else {
document.getElementById('subject').style.borderColor = '#ddd';
}
if (message === '') {
isValid = false;
document.getElementById('message').style.borderColor = 'var(--error-color)';
} else {
document.getElementById('message').style.borderColor = '#ddd';
}
if (isValid) {
// In a real application, you would send the form data to a server here
// For this example, we'll just show a success message
successMessage.style.display = 'block';
contactForm.reset();
// Hide success message after 5 seconds
setTimeout(() => {
successMessage.style.display = 'none';
}, 5000);
} else {
errorMessage.style.display = 'block';
}
});
// Email validation function
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
// Add focus/blur effects for floating labels
const inputs = document.querySelectorAll('.form-control');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentNode.querySelector('.floating-label').style.color = 'var(--primary-color)';
});
input.addEventListener('blur', function() {
this.parentNode.querySelector('.floating-label').style.color = '#999';
});
});
});
إرسال تعليق
Thank you
Learning robo team