Features Implemented:
Neumorphism Design:
- Soft shadows and rounded corners throughout
- Light gray background (#e0e5ec)
- Both inset and outset shadows for the 3D effect
Contact Form:
- Name field (text input)
- Email field (email input)
- Subject field (text input)
- Message field (textarea)
- Submit button with neumorphic styling
Contact Information Section:
- Phone number
- Email address
- Physical address
- Map placeholder
- Neumorphic icons for each contact method
Responsive Layout:
- Works on both mobile and desktop
- Flexbox layout that stacks on smaller screens
Form Validation:
- Checks if all fields are filled
- Validates email format
- Shows error messages with visual feedback
- Success message when form is valid
Visual Effects:
- Hover and active states for buttons
- Focus states for form inputs
- Error states with red shadows
The design follows neumorphism principles with soft shadows that create the illusion of elements being extruded from or inset into the background.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #e0e5ec;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
width: 100%;
max-width: 900px;
}
h1 {
text-align: center;
color: #4a5568;
margin-bottom: 40px;
font-size: 2.5rem;
text-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #ffffff;
}
.contact-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.contact-form {
flex: 1;
min-width: 300px;
}
.contact-info {
flex: 1;
min-width: 300px;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
color: #4a5568;
font-weight: 500;
}
input, textarea {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: #e0e5ec;
box-shadow: inset 5px 5px 10px #b8b9be,
inset -5px -5px 10px #ffffff;
font-size: 16px;
color: #4a5568;
outline: none;
transition: all 0.3s ease;
}
input:focus, textarea:focus {
box-shadow: inset 2px 2px 5px #b8b9be,
inset -2px -2px 5px #ffffff;
}
textarea {
resize: vertical;
min-height: 150px;
}
button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: #e0e5ec;
box-shadow: 8px 8px 15px #b8b9be,
-8px -8px 15px #ffffff;
font-size: 16px;
font-weight: 600;
color: #4a5568;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
box-shadow: 4px 4px 8px #b8b9be,
-4px -4px 8px #ffffff;
}
button:active {
box-shadow: inset 5px 5px 10px #b8b9be,
inset -5px -5px 10px #ffffff;
}
.info-card {
padding: 30px;
border-radius: 20px;
background: #e0e5ec;
box-shadow: 10px 10px 20px #b8b9be,
-10px -10px 20px #ffffff;
height: 100%;
}
.info-card h2 {
color: #4a5568;
margin-bottom: 20px;
font-size: 1.8rem;
}
.info-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.info-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: #e0e5ec;
box-shadow: 5px 5px 10px #b8b9be,
-5px -5px 10px #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
flex-shrink: 0;
}
.info-text h3 {
color: #4a5568;
margin-bottom: 5px;
}
.info-text p {
color: #718096;
}
.map-container {
width: 100%;
height: 200px;
border-radius: 15px;
overflow: hidden;
margin-top: 30px;
box-shadow: 10px 10px 20px #b8b9be,
-10px -10px 20px #ffffff;
}
.neumorphic-map {
border-radius: 15px;
}
.error {
color: #e53e3e;
font-size: 14px;
margin-top: 5px;
display: none;
}
input.error-field, textarea.error-field {
box-shadow: inset 5px 5px 10px #feb2b2,
inset -5px -5px 10px #ffffff;
}
@media (max-width: 768px) {
.contact-container {
flex-direction: column;
}
h1 {
font-size: 2rem;
margin-bottom: 30px;
}
}
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// Reset errors
document.querySelectorAll('.error').forEach(el => {
el.style.display = 'none';
});
document.querySelectorAll('input, textarea').forEach(el => {
el.classList.remove('error-field');
});
// 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();
let isValid = true;
// Validate name
if (name === '') {
document.getElementById('nameError').style.display = 'block';
document.getElementById('name').classList.add('error-field');
isValid = false;
}
// Validate email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === '' || !emailRegex.test(email)) {
document.getElementById('emailError').style.display = 'block';
document.getElementById('email').classList.add('error-field');
isValid = false;
}
// Validate subject
if (subject === '') {
document.getElementById('subjectError').style.display = 'block';
document.getElementById('subject').classList.add('error-field');
isValid = false;
}
// Validate message
if (message === '') {
document.getElementById('messageError').style.display = 'block';
document.getElementById('message').classList.add('error-field');
isValid = false;
}
// If form is valid, submit it (in a real app, you would send to server)
if (isValid) {
alert('Thank you for your message! We will get back to you soon.');
this.reset();
}
});
Post a Comment
Thank you
Learning robo team