Add kinetic landing page design with animations, dark mode support, and responsive styling
- Enhanced hero section with floating blobs and animated title (word-by-word stagger) - Added feature cards with color accents (teal/magenta/gold), hover effects, and staggered animation - Implemented kinetic CTA section with floating background elements and animated buttons - Added comprehensive dark mode styles for all kinetic elements - Implemented responsive design for tablet (768px) and mobile (480px) breakpoints - All animations use cubic-bezier easing for snappy, kinetic feel (0.34, 1.56, 0.64, 1) - Optimized blob opacity and sizes for different screen sizes
This commit is contained in:
DylanBarnes
parent
d61c23d6a9
commit
4fce8a3377
2 changed files with 736 additions and 27 deletions
676
css/style.css
676
css/style.css
|
|
@ -130,7 +130,7 @@ header {
|
|||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 700;
|
||||
transition: all 0.4s ease;
|
||||
padding: 0.8rem 1.5rem;
|
||||
padding: 0.8rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
|
|
@ -249,6 +249,149 @@ main {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ====================== KINETIC HERO SECTION ====================== */
|
||||
|
||||
.kinetic-hero {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1a2847 50%, #2d1b4e 100%);
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: -3rem -2rem 3rem -2rem;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.kinetic-blob {
|
||||
position: absolute;
|
||||
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
|
||||
opacity: 0.1;
|
||||
filter: blur(40px);
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: linear-gradient(135deg, #00d4ff, #0099ff);
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #ff006e, #ff4757);
|
||||
bottom: -80px;
|
||||
left: -50px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.blob-3 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: linear-gradient(135deg, #ffd60a, #ffc300);
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
33% { transform: translate(30px, -50px) rotate(120deg); }
|
||||
66% { transform: translate(-30px, 30px) rotate(240deg); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -2px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title .word {
|
||||
display: inline-block;
|
||||
animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
animation-delay: calc(var(--index) * 0.1s);
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 2rem;
|
||||
animation: fadeInUp 0.8s ease 0.4s both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 3rem;
|
||||
animation: fadeInUp 0.8s ease 0.6s both;
|
||||
}
|
||||
|
||||
.scroll-indicator span {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.scroll-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(10px); }
|
||||
}
|
||||
|
||||
/* ====================== PAGE HEADER ====================== */
|
||||
|
||||
.page-header {
|
||||
|
|
@ -355,6 +498,138 @@ a:hover {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* ====================== KINETIC FEATURE SECTION ====================== */
|
||||
|
||||
.feature-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.1rem !important;
|
||||
color: #64748b !important;
|
||||
margin-bottom: 2rem !important;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.kinetic-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.kinetic-card {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
animation: slideInCard 0.8s ease both;
|
||||
animation-delay: calc(var(--index) * 0.15s);
|
||||
}
|
||||
|
||||
@keyframes slideInCard {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.kinetic-card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.kinetic-card:nth-child(1) {
|
||||
--accent-color: #00d4ff;
|
||||
}
|
||||
|
||||
.kinetic-card:nth-child(2) {
|
||||
--accent-color: #ff006e;
|
||||
}
|
||||
|
||||
.kinetic-card:nth-child(3) {
|
||||
--accent-color: #ffc300;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.kinetic-card:hover .card-icon {
|
||||
animation: rotate 1s linear infinite, pulse 0.6s ease-in-out 2;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.kinetic-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
color: #0f172a;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.kinetic-card:hover h3 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.kinetic-card p {
|
||||
color: #475569;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-accent {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50% 0 0 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.card-accent.accent-teal {
|
||||
background: linear-gradient(135deg, #00d4ff, #0099ff);
|
||||
}
|
||||
|
||||
.card-accent.accent-magenta {
|
||||
background: linear-gradient(135deg, #ff006e, #ff4757);
|
||||
}
|
||||
|
||||
.card-accent.accent-gold {
|
||||
background: linear-gradient(135deg, #ffd60a, #ffc300);
|
||||
}
|
||||
|
||||
.kinetic-card:hover .card-accent {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* ====================== BUTTONS ====================== */
|
||||
|
||||
.button-group {
|
||||
|
|
@ -414,6 +689,135 @@ a:hover {
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* ====================== KINETIC CTA SECTION ====================== */
|
||||
|
||||
.kinetic-cta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1a2847 50%, #2d1b4e 100%);
|
||||
border-radius: 16px;
|
||||
padding: 4rem 2rem;
|
||||
margin: 4rem 0;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cta-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-accent {
|
||||
position: absolute;
|
||||
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
|
||||
opacity: 0.08;
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
.accent-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #00d4ff, #0099ff);
|
||||
top: -150px;
|
||||
right: -100px;
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.accent-2 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: linear-gradient(135deg, #ff006e, #ff4757);
|
||||
bottom: -100px;
|
||||
left: 10%;
|
||||
animation: float 12s ease-in-out infinite;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.accent-3 {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background: linear-gradient(135deg, #ffd60a, #ffc300);
|
||||
bottom: 20%;
|
||||
right: 5%;
|
||||
animation: float 14s ease-in-out infinite;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 2rem;
|
||||
animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.kinetic-buttons {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.kinetic-btn {
|
||||
position: relative;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
border-radius: 50px;
|
||||
border: 2px solid white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
.kinetic-btn:nth-child(1) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.kinetic-btn:nth-child(2) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.kinetic-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.kinetic-btn:hover {
|
||||
transform: translateY(-4px) scale(1.05);
|
||||
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.kinetic-btn:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
display: inline-block;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.kinetic-btn:hover .btn-arrow {
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
/* ====================== TECH GRID ====================== */
|
||||
|
||||
.tech-grid {
|
||||
|
|
@ -842,6 +1246,109 @@ footer {
|
|||
margin: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
/* ====================== KINETIC RESPONSIVE 768px ====================== */
|
||||
|
||||
.kinetic-hero {
|
||||
min-height: 70vh;
|
||||
padding: 2rem;
|
||||
margin: -3rem -2rem 2rem -2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.hero-title .word {
|
||||
animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
animation-delay: calc(var(--index) * 0.08s);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.kinetic-blob {
|
||||
opacity: 0.06;
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
top: -80px;
|
||||
right: -80px;
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
bottom: -60px;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.blob-3 {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.kinetic-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.kinetic-card {
|
||||
animation: slideInCard 0.6s ease both;
|
||||
animation-delay: calc(var(--index) * 0.1s);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.kinetic-cta {
|
||||
padding: 3rem 1.5rem;
|
||||
margin: 3rem -2rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cta-accent {
|
||||
opacity: 0.04;
|
||||
}
|
||||
|
||||
.accent-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: -100px;
|
||||
right: -80px;
|
||||
}
|
||||
|
||||
.accent-2 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
bottom: -80px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.accent-3 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.kinetic-buttons {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.kinetic-btn {
|
||||
padding: 0.875rem 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
|
@ -877,6 +1384,109 @@ footer {
|
|||
grid-template-columns: 1fr;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
/* ====================== KINETIC RESPONSIVE 480px ====================== */
|
||||
|
||||
.kinetic-hero {
|
||||
min-height: 60vh;
|
||||
padding: 1.5rem 1rem;
|
||||
margin: -3rem -2rem 1.5rem -2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 1.75rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.hero-title .word {
|
||||
animation: slideInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
animation-delay: calc(var(--index) * 0.06s);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kinetic-blob {
|
||||
opacity: 0.04;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: -50px;
|
||||
right: -50px;
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
bottom: -40px;
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.blob-3 {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kinetic-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.kinetic-card {
|
||||
padding: 1.5rem;
|
||||
animation: slideInCard 0.5s ease both;
|
||||
animation-delay: calc(var(--index) * 0.08s);
|
||||
}
|
||||
|
||||
.kinetic-card h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.kinetic-cta {
|
||||
padding: 2rem 1rem;
|
||||
margin: 2rem -2rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cta-accent {
|
||||
opacity: 0.02;
|
||||
}
|
||||
|
||||
.accent-1,
|
||||
.accent-2,
|
||||
.accent-3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.kinetic-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.kinetic-btn {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ====================== ANIMATIONS ====================== */
|
||||
|
|
@ -1221,6 +1831,70 @@ body.dark .exercise-card th {
|
|||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* ====================== DARK MODE - KINETIC ELEMENTS ====================== */
|
||||
|
||||
body.dark .kinetic-hero {
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2a1845 100%);
|
||||
}
|
||||
|
||||
body.dark .hero-title {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .hero-subtitle {
|
||||
color: rgba(226, 232, 240, 0.7);
|
||||
}
|
||||
|
||||
body.dark .scroll-indicator span {
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
body.dark .scroll-arrow {
|
||||
color: rgba(226, 232, 240, 0.6);
|
||||
}
|
||||
|
||||
body.dark .kinetic-card {
|
||||
background: linear-gradient(135deg, #1a2332 0%, #1e2d3a 100%);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
body.dark .kinetic-card:hover {
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
body.dark .kinetic-card h3 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .kinetic-card:hover h3 {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
body.dark .kinetic-card p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .kinetic-cta {
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2a1845 100%);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
body.dark .cta-title {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .kinetic-btn {
|
||||
border-color: rgba(226, 232, 240, 0.3);
|
||||
background: rgba(226, 232, 240, 0.05);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .kinetic-btn:hover {
|
||||
background: rgba(226, 232, 240, 0.15);
|
||||
border-color: rgba(226, 232, 240, 0.5);
|
||||
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ====================== EXERCISE CARDS ====================== */
|
||||
|
||||
.exercise-card {
|
||||
|
|
|
|||
87
index.html
87
index.html
|
|
@ -13,36 +13,71 @@
|
|||
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Willkommen auf unserer Website!</h1>
|
||||
<p>Ein interaktives Lernprojekt im Bereich der Web-Entwicklung</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Über dieses Projekt</h2>
|
||||
<p>Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der PH Weingarten. Hier präsentieren wir alles Wichtige über unser Projekt und unser Team.</p>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>🎓 Bildung</h3>
|
||||
<p>Erstellung von modernen, interaktiven Web-Anwendungen</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>💻 Technologie</h3>
|
||||
<p>HTML5, CSS3, und JavaScript für ein beeindruckendes Nutzererlebnis</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>🤝 Zusammenarbeit</h3>
|
||||
<p>Teamarbeit und kreative Problemlösungen</p>
|
||||
<section class="hero kinetic-hero">
|
||||
<div class="hero-background">
|
||||
<div class="kinetic-blob blob-1"></div>
|
||||
<div class="kinetic-blob blob-2"></div>
|
||||
<div class="kinetic-blob blob-3"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">
|
||||
<span class="word" style="--index: 0">Willkommen</span>
|
||||
<span class="word" style="--index: 1">auf</span>
|
||||
<span class="word" style="--index: 2">unserer</span>
|
||||
<span class="word" style="--index: 3">Website!</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">Ein interaktives Lernprojekt im Bereich der Web-Entwicklung</p>
|
||||
<div class="scroll-indicator">
|
||||
<span>Scroll zum Erkunden</span>
|
||||
<svg class="scroll-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<h2>Erkunde unser Projekt</h2>
|
||||
<div class="button-group">
|
||||
<a href="eis_projekt.html" class="btn btn-primary">Zum Projekt →</a>
|
||||
<a href="kontakt.html" class="btn btn-secondary">Kontaktiere uns →</a>
|
||||
<section class="content-section feature-section">
|
||||
<h2 class="section-title">Über dieses Projekt</h2>
|
||||
<p class="section-subtitle">Diese Website ist ein Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der PH Weingarten. Hier präsentieren wir alles Wichtige über unser Projekt und unser Team.</p>
|
||||
|
||||
<div class="feature-grid kinetic-grid">
|
||||
<div class="feature-card kinetic-card" style="--index: 0">
|
||||
<div class="card-icon">🎓</div>
|
||||
<h3>Bildung</h3>
|
||||
<p>Erstellung von modernen, interaktiven Web-Anwendungen</p>
|
||||
<div class="card-accent accent-teal"></div>
|
||||
</div>
|
||||
<div class="feature-card kinetic-card" style="--index: 1">
|
||||
<div class="card-icon">💻</div>
|
||||
<h3>Technologie</h3>
|
||||
<p>HTML5, CSS3, und JavaScript für ein beeindruckendes Nutzererlebnis</p>
|
||||
<div class="card-accent accent-magenta"></div>
|
||||
</div>
|
||||
<div class="feature-card kinetic-card" style="--index: 2">
|
||||
<div class="card-icon">🤝</div>
|
||||
<h3>Zusammenarbeit</h3>
|
||||
<p>Teamarbeit und kreative Problemlösungen</p>
|
||||
<div class="card-accent accent-gold"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section kinetic-cta">
|
||||
<div class="cta-background">
|
||||
<div class="cta-accent accent-1"></div>
|
||||
<div class="cta-accent accent-2"></div>
|
||||
<div class="cta-accent accent-3"></div>
|
||||
</div>
|
||||
<h2 class="cta-title">Erkunde unser Projekt</h2>
|
||||
<div class="button-group kinetic-buttons">
|
||||
<a href="eis_projekt.html" class="btn btn-primary kinetic-btn">
|
||||
<span class="btn-text">Zum Projekt</span>
|
||||
<span class="btn-arrow">→</span>
|
||||
</a>
|
||||
<a href="kontakt.html" class="btn btn-secondary kinetic-btn">
|
||||
<span class="btn-text">Kontaktiere uns</span>
|
||||
<span class="btn-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue