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 */
:root {
--primary-color: #1a1a1a;
--secondary-color: #333;
--accent-color: #d4af37;
--text-color: #fff;
--text-secondary: #ccc;
--bg-color: #121212;
--card-bg: #1e1e1e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
color: var(--text-color);
background-color: var(--bg-color);
line-height: 1.6;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
a {
text-decoration: none;
color: var(--accent-color);
transition: all 0.3s ease;
}
a:hover {
color: var(--text-color);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background: var(--accent-color);
margin: 15px auto;
}
.btn {
display: inline-block;
padding: 12px 30px;
background: var(--accent-color);
color: var(--primary-color);
border: none;
border-radius: 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
cursor: pointer;
}
.btn:hover {
background: #e8c874;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Header & Navigation */
header {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
background-color: rgba(26, 26, 26, 0.9);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
header.scrolled {
background-color: rgba(26, 26, 26, 0.95);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-color);
}
.logo span {
color: var(--accent-color);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 40px;
}
.nav-links a {
color: var(--text-color);
font-weight: 600;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--accent-color);
bottom: -5px;
left: 0;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.hamburger {
display: none;
cursor: pointer;
}
.hamburger div {
width: 25px;
height: 3px;
background: var(--text-color);
margin: 5px;
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
display: flex;
align-items: center;
text-align: center;
color: var(--text-color);
}
.hero-content {
width: 100%;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
animation: fadeInDown 1s ease;
}
.hero p {
font-size: 1.5rem;
max-width: 700px;
margin: 0 auto 30px;
animation: fadeInUp 1s ease;
}
.hero .btn {
animation: fadeIn 1.5s ease;
}
/* About Section */
.about {
background-color: var(--primary-color);
}
.about-content {
display: flex;
align-items: center;
gap: 50px;
}
.about-img {
flex: 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.about-img img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.about-img:hover img {
transform: scale(1.05);
}
.about-text {
flex: 1;
}
.about-text h3 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--accent-color);
}
.about-text p {
margin-bottom: 15px;
color: var(--text-secondary);
}
/* Gallery Section */
.gallery {
background-color: var(--bg-color);
}
.filter-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.filter-btn {
padding: 8px 20px;
margin: 0 10px 10px 0;
background: transparent;
color: var(--text-color);
border: 1px solid var(--accent-color);
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn.active, .filter-btn:hover {
background: var(--accent-color);
color: var(--primary-color);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .overlay {
opacity: 1;
}
.overlay i {
color: var(--text-color);
font-size: 2.5rem;
}
/* Services Section */
.services {
background-color: var(--primary-color);
}
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background: var(--card-bg);
padding: 30px;
border-radius: 10px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.service-card i {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
font-size: 1.5rem;
}
.service-card p {
color: var(--text-secondary);
}
/* Contact Section */
.contact {
background-color: var(--bg-color);
}
.contact-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 50px;
}
.contact-info h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--accent-color);
}
.contact-info p {
margin-bottom: 20px;
color: var(--text-secondary);
}
.social-links {
display: flex;
margin-top: 30px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--card-bg);
border-radius: 50%;
margin-right: 15px;
color: var(--text-color);
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--accent-color);
color: var(--primary-color);
transform: translateY(-3px);
}
.contact-form .form-group {
margin-bottom: 20px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 15px;
background: var(--card-bg);
border: none;
border-radius: 5px;
color: var(--text-color);
font-family: 'Montserrat', sans-serif;
}
.contact-form textarea {
height: 150px;
resize: none;
}
.contact-form .btn {
width: 100%;
}
/* Footer */
footer {
background-color: var(--primary-color);
text-align: center;
padding: 30px 0;
}
footer p {
color: var(--text-secondary);
}
/* Lightbox */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.lightbox.active {
opacity: 1;
pointer-events: all;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 80vh;
display: block;
border-radius: 5px;
}
.close-lightbox {
position: absolute;
top: -40px;
right: 0;
color: var(--text-color);
font-size: 2rem;
cursor: pointer;
}
.lightbox-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.lightbox-nav button {
background: rgba(0, 0, 0, 0.5);
color: var(--text-color);
border: none;
padding: 10px 15px;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.lightbox-nav button:hover {
background: var(--accent-color);
color: var(--primary-color);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Styles */
@media (max-width: 992px) {
.about-content {
flex-direction: column;
}
.about-img, .about-text {
flex: none;
width: 100%;
}
.hero h1 {
font-size: 3rem;
}
.hero p {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.nav-links {
position: absolute;
top: 80px;
right: -100%;
width: 50%;
height: calc(100vh - 80px);
background: var(--primary-color);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 40px;
transition: right 0.3s ease;
}
.nav-links.active {
right: 0;
}
.nav-links li {
margin: 15px 0;
}
.hamburger {
display: block;
}
.hamburger.active div:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active div:nth-child(2) {
opacity: 0;
}
.hamburger.active div:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.hero h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
}
.filter-buttons {
flex-direction: column;
align-items: center;
}
.filter-btn {
margin: 5px 0;
width: 80%;
}
.gallery-grid {
grid-template-columns: 1fr;
}
}
// Mobile Navigation
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
hamburger.classList.toggle('active');
});
// Close mobile menu when clicking a link
links.forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
hamburger.classList.remove('active');
});
});
// Sticky Header
window.addEventListener('scroll', () => {
const header = document.getElementById('header');
header.classList.toggle('scrolled', window.scrollY > 0);
});
// Smooth Scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Gallery Filter
const filterBtns = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active class from all buttons
filterBtns.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
btn.classList.add('active');
const filter = btn.getAttribute('data-filter');
galleryItems.forEach(item => {
if (filter === 'all' || item.getAttribute('data-category') === filter) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// Lightbox
const lightbox = document.querySelector('.lightbox');
const lightboxImg = document.querySelector('.lightbox-content img');
const closeLightbox = document.querySelector('.close-lightbox');
const galleryImages = document.querySelectorAll('.gallery-item img');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentImageIndex = 0;
// Open lightbox
galleryImages.forEach((img, index) => {
img.addEventListener('click', () => {
currentImageIndex = index;
lightbox.classList.add('active');
lightboxImg.src = img.src;
document.body.style.overflow = 'hidden';
});
});
// Close lightbox
closeLightbox.addEventListener('click', () => {
lightbox.classList.remove('active');
document.body.style.overflow = 'auto';
});
// Close when clicking outside image
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.classList.remove('active');
document.body.style.overflow = 'auto';
}
});
// Navigation between images
function showImage(index) {
const images = Array.from(galleryImages);
if (index >= images.length) currentImageIndex = 0;
if (index < 0) currentImageIndex = images.length - 1;
lightboxImg.src = images[currentImageIndex].src;
}
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
currentImageIndex--;
showImage(currentImageIndex);
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
currentImageIndex++;
showImage(currentImageIndex);
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (lightbox.classList.contains('active')) {
if (e.key === 'Escape') {
lightbox.classList.remove('active');
document.body.style.overflow = 'auto';
}
if (e.key === 'ArrowLeft') {
currentImageIndex--;
showImage(currentImageIndex);
}
if (e.key === 'ArrowRight') {
currentImageIndex++;
showImage(currentImageIndex);
}
}
});
// Form submission
const form = document.getElementById('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for your message! I will get back to you soon.');
form.reset();
});
// Animation on scroll
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('section');
const windowHeight = window.innerHeight;
sections.forEach(section => {
const sectionTop = section.getBoundingClientRect().top;
if (sectionTop < windowHeight - 100) {
section.style.opacity = '1';
section.style.transform = 'translateY(0)';
}
});
});
// Initialize sections with opacity 0
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
});
// Trigger animation for hero section immediately
document.querySelector('.hero').style.opacity = '1';
إرسال تعليق
Thank you
Learning robo team