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.
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #6c63ff;
--secondary-color: #4d44db;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
--overlay-color: rgba(26, 26, 46, 0.8);
--glass-color: rgba(255, 255, 255, 0.1);
--transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--light-color);
background-color: var(--dark-color);
overflow-x: hidden;
}
/* Utility Classes */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.btn {
display: inline-block;
background: var(--primary-color);
color: var(--light-color);
padding: 12px 24px;
border: none;
border-radius: 50px;
cursor: pointer;
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: var(--transition);
}
.btn:hover {
background: var(--secondary-color);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.text-center {
text-align: center;
}
/* 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-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
/* Navbar/Header */
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 100;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 28px;
font-weight: 700;
color: var(--light-color);
text-decoration: none;
transition: var(--transition);
}
.logo:hover {
color: var(--primary-color);
}
.logo span {
color: var(--primary-color);
}
/* Hero Content */
.hero-content {
max-width: 800px;
padding: 0 20px;
text-align: center;
z-index: 10;
animation: fadeIn 1.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
background: linear-gradient(to right, #6c63ff, #ff6b6b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
/* Countdown Timer */
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
flex-wrap: wrap;
}
.countdown-item {
background: var(--glass-color);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;
min-width: 100px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition);
}
.countdown-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.countdown-number {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
}
.countdown-label {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.7;
}
/* Subscription Form */
.subscribe-form {
display: flex;
max-width: 500px;
margin: 0 auto;
background: var(--glass-color);
backdrop-filter: blur(10px);
border-radius: 50px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.subscribe-form input {
flex: 1;
padding: 15px 20px;
border: none;
background: transparent;
color: var(--light-color);
font-size: 16px;
}
.subscribe-form input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.subscribe-form input:focus {
outline: none;
}
.subscribe-form .btn {
border-radius: 0;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
/* Social Icons */
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.social-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--glass-color);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
color: var(--light-color);
font-size: 20px;
text-decoration: none;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon:hover {
background: var(--primary-color);
transform: translateY(-5px);
}
/* Footer */
.footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 14px;
opacity: 0.7;
}
/* Particles Background (Optional) */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* Responsive Styles */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1rem;
}
.countdown-item {
min-width: 80px;
padding: 15px;
}
.countdown-number {
font-size: 2rem;
}
.subscribe-form {
flex-direction: column;
border-radius: 10px;
}
.subscribe-form .btn {
border-radius: 0 0 10px 10px;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 2rem;
}
.countdown {
gap: 10px;
}
.countdown-item {
min-width: 70px;
padding: 10px;
}
.countdown-number {
font-size: 1.5rem;
}
.countdown-label {
font-size: 0.7rem;
}
}
// Countdown Timer
function updateCountdown() {
// Set the launch date (YYYY, MM-1, DD, HH, MM, SS)
const launchDate = new Date(2026, 1, 31, 0, 0, 0).getTime();
const now = new Date().getTime();
const distance = launchDate - now;
// Time calculations
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
// If the countdown is finished
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
}
}
// Update countdown every second
updateCountdown();
const countdownTimer = setInterval(updateCountdown, 1000);
// Form Submission
document.getElementById('subscribeForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input').value;
// Here you would typically send the email to your server
console.log('Subscribed email:', email);
// Show success message
alert('Thank you for subscribing! We\'ll notify you when we launch.');
this.reset();
});
// Particles.js Configuration (Optional)
// Load particles.js script dynamically if you want to use it
function loadParticlesJS() {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
script.onload = function() {
particlesJS('particles-js', {
"particles": {
"number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
"color": { "value": "#6c63ff" },
"shape": { "type": "circle" },
"opacity": { "value": 0.5, "random": true },
"size": { "value": 3, "random": true },
"line_linked": { "enable": true, "distance": 150, "color": "#6c63ff", "opacity": 0.4, "width": 1 },
"move": { "enable": true, "speed": 2, "direction": "none", "random": true, "straight": false, "out_mode": "out" }
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": true, "mode": "grab" },
"onclick": { "enable": true, "mode": "push" },
"resize": true
},
"modes": {
"grab": { "distance": 140, "line_linked": { "opacity": 1 } },
"push": { "particles_nb": 4 }
}
},
"retina_detect": true
});
};
document.body.appendChild(script);
}
// Uncomment the line below if you want to use particles.js
// loadParticlesJS();
Post a Comment
Thank you
Learning robo team