KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center team section content with a dark, full-screen background image

Browse Source 
Update CSS to make the team section full-screen, apply a dark overlay, center text content, and use a black and white background image.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9f8d327b-c9b7-4375-aa7f-92524a6ba8f6
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/9q3pahd
This commit is contained in:
abhiramtx
2025-11-08 23:01:12 +00:00
parent 9e9daba5ba
commit 76952ecc23
2 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1762642803863.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 600 KiB

100
static/css/styles.css
View File

@@ -624,47 +624,74 @@ hr {
} }
.team-section { .team-section {
display: flex; position: relative;
align-items: center; width: 100vw;
gap: 48px; height: 100vh;
margin: 64px 0; margin: 0;
width: 100%; margin-left: calc(-50vw + 50%);
} overflow: hidden;
.team-text {
flex: 1;
text-align: left;
}
.team-text .sub-header {
text-align: left;
margin: 0 0 24px 0;
}
.team-text .sub-content {
text-align: left;
margin: 0 0 32px 0;
} }
.team-image-wrapper { .team-image-wrapper {
flex: 1; position: absolute;
border: 1px solid rgba(255, 255, 255, 0.08); top: 0;
border-radius: 16px; left: 0;
overflow: hidden; width: 100%;
height: 400px; height: 100%;
position: relative; z-index: 0;
} }
.team-image-wrapper img { .team-image-wrapper img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
filter: brightness(0.7); filter: grayscale(100%) brightness(0.65);
transition: transform 3s ease;
} }
.team-image-wrapper:hover img { .team-section::before {
transform: scale(1.1); content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.85) 100%);
z-index: 1;
}
.team-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 250px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, transparent 100%);
z-index: 2;
pointer-events: none;
}
.team-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
max-width: 800px;
width: 90%;
text-align: center;
}
.team-text .sub-header {
text-align: center;
margin: 0 0 24px 0;
color: var(--white);
}
.team-text .sub-content {
text-align: center;
margin: 0 0 32px 0;
color: var(--gray-300);
} }
.team-cta-button { .team-cta-button {
@@ -700,18 +727,11 @@ hr {
} }
.team-section { .team-section {
flex-direction: column; height: 100vh;
gap: 32px;
} }
.team-text .sub-header, .team-text {
.team-text .sub-content { width: 90%;
text-align: center;
}
.team-image-wrapper {
width: 100%;
height: 300px;
} }
} }