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

Remove card animations and adjust layout for team member sections

Browse Source 
Removes hover effects and animations from member cards, updates CSS for the 'hr' and 'member-card' elements, and repositions the descriptive text for mentor and team sections in `contributors.html`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c9bfbf59-6669-4093-a6ef-d73e67cb3ca8
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/iGbSEkT
This commit is contained in:
abhiramtx
2025-11-08 23:36:26 +00:00
parent 3439a747d5
commit a7b421f479
3 changed files with 28 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1762644883074.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

49
static/css/styles.css
View File

@@ -906,12 +906,12 @@ hr {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px; gap: 40px;
padding: 64px; padding: 0;
background: var(--gray-900); background: transparent;
border: 1px solid var(--gray-700); border: none;
border-radius: 20px; border-radius: 0;
margin: 64px auto; margin: 0;
max-width: 1200px; max-width: 100%;
} }
.member-card { .member-card {
@@ -919,19 +919,12 @@ hr {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 48px 32px; padding: 48px 32px;
background: var(--gray-800); background: rgba(26, 26, 26, 0.4);
border-radius: 16px; border-radius: 16px;
border: 1px solid var(--gray-700); border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
width: 100%; width: 100%;
} }
.member-card:hover {
background: var(--gray-700);
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.05);
}
.member-image { .member-image {
width: 120px; width: 120px;
height: 120px; height: 120px;
@@ -1577,32 +1570,6 @@ body::before {
.card, .card,
.card-sponsors, .card-sponsors,
.member-card {
position: relative;
overflow: hidden;
}
.card::after,
.card-sponsors::after,
.member-card::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.card:hover::after,
.card-sponsors:hover::after,
.member-card:hover::after {
width: 300%;
height: 300%;
}
.hero-image-section { .hero-image-section {
position: relative; position: relative;

41
templates/contributors.html
View File

@@ -36,38 +36,37 @@
<br> <br>
<h1 class="heading"><span class="emoji sponsors" id="team">Our mentors and coaches</span></h1> <h1 class="heading"><span class="emoji sponsors" id="team">Our mentors and coaches</span></h1>
<hr> <hr>
<p class="info">❤️ meet our amazing coach and mentors! ❤️</p>
<div class="team-info"> <div class="team-info">
<div class="content-container"> <div class="content-container">
<p class="info">❤️ meet our amazing coach and mentors! ❤️</p>
<div class="members-container"> <div class="members-container">
{% for mentor in mentors %} {% for mentor in mentors %}
<div class="member-card"> <div class="member-card">
{% if mentor.image_path %} {% if mentor.image_path %}
<img class="member-image" src="{{ url_for('static', filename=mentor.image_path) }}"> <img class="member-image" src="{{ url_for('static', filename=mentor.image_path) }}">
{% endif %} {% endif %}
<h2 class="member-name">{{ mentor.name }}</h2> <h2 class="member-name">{{ mentor.name }}</h2>
<p class="member-role">{{ mentor.role }}</p> <p class="member-role">{{ mentor.role }}</p>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>
<h1 class="heading"><span class="emoji team" id="team">Our team</span></h1> <h1 class="heading"><span class="emoji team" id="team">Our team</span></h1>
<hr> <hr>
<p class="info">⭐ meet our amazing team! ⭐</p>
<div class="team-info"> <div class="team-info">
<div class="content-container"> <div class="content-container">
<p class="info">⭐ meet our amazing team! ⭐</p>
<div class="members-container"> <div class="members-container">
{% for member in members %} {% for member in members %}
<div class="member-card"> <div class="member-card">
{% if member.image_path %} {% if member.image_path %}
<img class="member-image" src="{{ url_for('static', filename=member.image_path) }}"> <img class="member-image" src="{{ url_for('static', filename=member.image_path) }}">
{% endif %} {% endif %}
<h2 class="member-name">{{ member.name }}</h2> <h2 class="member-name">{{ member.name }}</h2>
<p class="member-role">{{ member.role }}</p> <p class="member-role">{{ member.role }}</p>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>