Features Implemented:
Responsive 4-Column Layout:
- Uses CSS Grid for desktop view (4 columns)
- Switches to 2 columns on medium screens (tablets)
- Stacks to 1 column on mobile devices
Profile Column:
- Circular profile image with border
- Centered with caption
- Soft shadow and hover effect
Basic Details Column:
- Student name as heading
- Field of study as subheading
- Short bio paragraph
Portfolio Column:
- List of 5 projects with clickable links
- Hover effects for better interactivity
Contact Column:
- Contact form with name, email, and message fields
- JavaScript alert on form submission
- Download CV button with distinct styling
Design Elements:
- Clean, minimal aesthetic
- Soft shadows and rounded corners
- Hover animations for interactivity
- Professional color scheme
- Legible typography
Technical Implementation:
- Pure HTML, CSS, and JavaScript (no external libraries)
- CSS Grid for layout
- Media queries for responsiveness
- Simple form validation and feedback
The placeholder image can be replaced with an actual student photo by changing the src attribute in the profile image tag. Similarly, the download CV link can be updated to point to an actual PDF file.
:root {
--primary: #6c5ce7;
--primary-dark: #5649c0;
--dark: #1e1e2c;
--darker: #161620;
--light: #f5f5f7;
--gray: #8e8e9e;
--success: #00b894;
--error: #d63031;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--darker);
color: var(--light);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.contact-header {
text-align: center;
margin-bottom: 3rem;
}
.contact-header h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
background: linear-gradient(to right, var(--primary), #a29bfe);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.contact-header p {
color: var(--gray);
max-width: 600px;
margin: 0 auto;
}
.contact-wrapper {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.contact-form {
flex: 1;
min-width: 300px;
}
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--gray);
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 0.8rem 1rem;
background-color: var(--dark);
border: 1px solid #333344;
border-radius: 6px;
color: var(--light);
font-family: inherit;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.error-message {
color: var(--error);
font-size: 0.8rem;
margin-top: 0.3rem;
display: none;
}
.btn {
background-color: var(--primary);
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 6px;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.map-container {
flex: 1;
min-width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.map-container iframe {
width: 100%;
height: 100%;
min-height: 400px;
border: none;
filter: grayscale(20%) invert(90%) contrast(90%);
}
.toast {
position: fixed;
bottom: 2rem;
right: 2rem;
background-color: var(--success);
color: white;
padding: 1rem 2rem;
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: translateY(100px);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
@media (max-width: 768px) {
.contact-wrapper {
flex-direction: column;
}
.contact-header h1 {
font-size: 2rem;
}
}
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('contactForm');
const toast = document.getElementById('toast');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Reset error messages
document.querySelectorAll('.error-message').forEach(el => {
el.style.display = 'none';
});
// Validate form
let isValid = true;
const name = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const message = document.getElementById('message');
if (!name.value.trim()) {
document.getElementById('nameError').style.display = 'block';
isValid = false;
}
if (!email.value.trim() || !isValidEmail(email.value)) {
document.getElementById('emailError').style.display = 'block';
isValid = false;
}
if (!subject.value.trim()) {
document.getElementById('subjectError').style.display = 'block';
isValid = false;
}
if (!message.value.trim()) {
document.getElementById('messageError').style.display = 'block';
isValid = false;
}
if (isValid) {
// Simulate form submission
setTimeout(() => {
form.reset();
showToast();
}, 1000);
}
});
function isValidEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
function showToast() {
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
});
Post a Comment
Thank you
Learning robo team