Skip to content

Add former board members #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Synaptic149 merged 16 commits into from
May 27, 2025
Merged

Add former board members #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ab1323d
added css for flip cards
Synaptic149 May 27, 2025
73ed4e5
Added headers for current and past board members
Synaptic149 May 27, 2025
c50b32f
created html for basic flipcard
Synaptic149 May 27, 2025
a660b49
fixed indents
Synaptic149 May 27, 2025
866db8f
added shadows to cards
Synaptic149 May 27, 2025
8e3f5dd
made card square
Synaptic149 May 27, 2025
4c83379
made background black
Synaptic149 May 27, 2025
aef35ce
updated text formatting
Synaptic149 May 27, 2025
6404836
added role to front card face
Synaptic149 May 27, 2025
39a26d9
made this card thing work hopefully
Synaptic149 May 27, 2025
1710dea
added quotes
Synaptic149 May 27, 2025
820f937
added minheight
Synaptic149 May 27, 2025
ca79acd
updated sizing
Synaptic149 May 27, 2025
2e1b708
created spots for vp and secretary
Synaptic149 May 27, 2025
78a8f1c
added vp
Synaptic149 May 27, 2025
091e3e6
added secretary
Synaptic149 May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions src/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4142,6 +4142,55 @@ input, select, textarea {
padding: 0.5em 0.5em;
}

.flip-card {
background-color: transparent;
width: 100%;
aspect-ratio: 1 / 1;
min-height: fit-content;
box-shadow: 0 8px 16px 0 #db201e;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #000;
color: white;
}

/* Style the back side */
.flip-card-back {
background-color: #000;
height:fit-content;
min-height: 100%;
transform: rotateY(180deg);
padding: 0.5em 0.5em;
box-shadow: 0 16px 32px 0 #db201e;
}

/* Flexbox layout for sticky footer */
html, body {
height: 100%;
Expand Down
49 changes: 48 additions & 1 deletion src/nonprofit/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ <h3> Our Mission Statement</h3>
</section>

<h3>Our Board Members</h3>
<h4>Current Board Members</h4>
<section>
<div class="box alt">
<div class="row gtr-uniform">
Expand Down Expand Up @@ -101,7 +102,53 @@ <h4><b>Dev Sahay</b></h4>
</section>
</div>
</section>

<h4>Former Board Members</h4>
<div class="box alt">
<div class="row gtr-uniform">
<section class="col-6 col-12-small col-12-xsmall">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/people/ruben.jpg" alt="Avatar" style="width:100%">
</div>
<div class="flip-card-back">
<h4>Ruben Yoder</h4>
<p>1st Nonprofit President</p>
<blockquote>“No program better prepares students from all backgrounds for success in the real world as the <em>FIRST<sup>®</sup></em> Tech Challenge. I’ve had uncountable inspirational moments over the last 4 years, and the skills I’ve learned are invaluable.”</blockquote>
</div>
</div>
</div>
</section>
<section class="col-6 col-12-small col-12-xsmall">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/people/xandur.png" alt="Avatar" style="width:100%">
</div>
<div class="flip-card-back">
<h4>Xandur Grantt-Martin</h4>
<p>1st Nonprofit Vice President</p>
<blockquote>“As the Hawbot1cs President, I am proud to be a part of this amazing team through all our struggles and our breakthroughs.”</blockquote>
</div>
</div>
</div>
</section>
<section class="col-6 col-12-small col-12-xsmall">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/people/ray.jpg" alt="Avatar" style="width:100%">
</div>
<div class="flip-card-back">
<h4>Ray Lara</h4>
<p>1st Nonprofit Secretary</p>
<blockquote>“Hawkbot1cs is one of the cores of my life. We fly high and swoop down for the win; through all circumstances.”</blockquote>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="col-4 col-12-medium">

Expand Down
Loading