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.
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, sans-serif;
}
body {
background-color: #121212;
color: #333;
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
height:100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Grid Layout */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.column {
background-color:#202020;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.column:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Column 1 - Profile Photo */
.profile-photo {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #e9ecef;
margin-bottom: 15px;
}
.profile-caption {
color: #dadada;
font-size: 0.9rem;
}
/* Column 2 - Basic Details */
.basic-details h2 {
background: -webkit-linear-gradient(180deg, #A463BF, #647eff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
text-align: center;
font-size: 30px;
font-family:'Times New Roman', Times, serif;
font-weight: 900;
}
.basic-details h3 {
color: #ffffff;
margin-bottom: 15px;
font-size: 1.1rem;
}
.basic-details p {
color: #c3c3c3;
font-size: 0.95rem;
}
/* Column 3 - Portfolio Section */
.portfolio-section h2 {
color: #dadada;
margin-bottom: 15px;
}
.project-list {
list-style-type: none;
}
.project-list li {
margin-bottom: 12px;
}
.project-link {
display: block;
padding: 8px 12px;
background-color: #4b4b4b;
color: #fefefe;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.project-link:hover {
background-color: #000000;
}
/* Column 4 - Contact + Download CV */
.contact-section h2 {
color: #dadada;
margin-bottom: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #dadada;
font-size: 0.9rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #121212;
border-radius: 4px;
font-size: 0.9rem;
background-color:#4b4b4b;
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.send-btn {
background-color: #4b4b4b;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.send-btn:hover {
background-color: #393939;
}
.download-btn {
display: block;
width: 100%;
background: linear-gradient(120deg, #A463BF, #647eff);
color: white;
text-align: center;
padding: 10px 15px;
border-radius: 4px;
text-decoration: none;
margin-top: 20px;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.download-btn:hover {
background-color: #138496;
}
/* Responsive Design */
@media (max-width: 992px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
}
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Thank you for your message! This is a demo - your message hasn\'t been sent.');
this.reset();
});
إرسال تعليق
Thank you
Learning robo team