diff --git a/static/scripts/functions.js b/static/scripts/functions.js
index 1e52f9518de43ab446096103ba2cb4901f063024..a49dd7aefece4e42e82d9b070d4b86436671fec8 100644
--- a/static/scripts/functions.js
+++ b/static/scripts/functions.js
@@ -73,8 +73,9 @@ function countTo(start, end, element, withPercent, intervalLength){
if (window.location.href.endsWith("mit/") || window.location.href.indexOf("index") > -1) {
const headerHeight = `${document.querySelector('#home-header-container').clientHeight + 120 + document.querySelector('#home-lead').clientHeight}`
console.log(headerHeight)
- document.querySelector('#home-header-container').style.height = '0'//`${headerHeight}`
- document.querySelector('#home-header').style.font_size = 'calc(2.5*(1.475rem + 2.7vw))'
+ document.querySelector('#home-header-container').style.height = headerHeight.toString()
+ document.querySelector('#home-header').style.fontSize = 'calc(2.5*(1.475rem + 2.7vw))'
+ document.querySelector('#home-header').style.color = 'transparent'
document.querySelector('#home-lead').style.color = '#fff'
setTimeout(function() {
diff --git a/static/style.css b/static/style.css
index deab37630169cb4ad88a51e7ac48b81b9d48205c..43458206b5895b28c80488c3dbda2cdf9f08808d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -51,15 +51,13 @@ h1, .gradient-header {
#home-header {
font-size: calc(3*(1.475rem + 2.7vw));
+ transition: font-size 1s ease-in-out 3s, color 0.4s ease-in-out;
+ color:#3f0766;
}
#home-lead {
color:rgba(255, 255, 255, 0);
- transition-property: color;
- transition-duration: 1s;
- transition-timing-function: ease-in-out;
- transition-delay: 1.2s;
- margin-left:2vw;
+ transition: color 1s ease-in-out 1.2s;
}
/* body */
@@ -83,10 +81,6 @@ body {
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
-.shadowed {
- text-shadow: 1.7px 1.7px 1.7px #af465eab
-}
-
/* centering text */
.centered {
text-align:center
@@ -291,3 +285,79 @@ footer a:hover { color: white; text-decoration: underline; }
background-position: -200%;
animation: animated-gradient 2s infinite alternate-reverse;
}
+
+/* start team page card animation */
+.card-container {
+ perspective: 1000px;
+}
+.card-container:hover .card {
+ transform: rotateY(180deg);
+}
+.card-container, .front, .back {
+ width: 20vw;
+ height: 30vw;
+}
+.front, .back {
+ background: #ffffff00;
+}
+.card {
+ transition: 0.6s;
+ transform-style: preserve-3d;
+ position: relative;
+ justify-content:center;
+ align-content:center;
+}
+.front, .back {
+ backface-visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.front {
+ z-index: 2;
+ transform: rotateY(0deg);
+}
+
+.back {
+ transform: rotateY(180deg);
+ align-content:center;
+ justify-content:center;
+}
+
+.profile-circle {
+ width: 20vw;
+ height: 20vw;
+ position:absolute;
+ -webkit-border-radius: 10vw;
+ -moz-border-radius: 10vw;
+ border-radius: 10vw;
+ color: transparent;
+ background-image: linear-gradient(to right ,#afa5cb, #cfaca5, #a5d7d9, #d6aea0, #ad9fd5);
+ background-size: 1000%;
+ background-position: -200%;
+ animation: animated-gradient 18s infinite alternate-reverse;
+ z-index:-1;
+}
+
+.profile-photo {
+ height: 20vw;
+ position:absolute;
+ -webkit-border-radius: 10vw;
+ -moz-border-radius: 10vw;
+ border-radius: 10vw;
+}
+
+.profile-caption {
+ position:relative;
+ margin-top:20vw;
+ justify-content:center;
+ text-align:center;
+}
+
+.profile-bio {
+ position:relative;
+ justify-content:center;
+ text-align:center;
+}
+
+/* end team page card animation */
diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html
index aa4605852f48df63b968065454c6bfb6d37a02b7..6b11e721c0a109464dae2ce0a4cbdd67a733cb13 100644
--- a/wiki/pages/human-practices.html
+++ b/wiki/pages/human-practices.html
@@ -100,7 +100,7 @@
<h1>The Boston Mammalian Synthetic Biology Symposium</h1>
</div>
<p> On August 9th, our team presented a poster at da BOMB, more formally known
- as the Boston Mammalian Synthetic Biology Symposium. da BOMB is an annual conference held
+ as the Boston Mammalian Synthetic Biology Symposium. Da BOMB is an annual conference held
at MIT's Koch Institute for Integrative Cancer Research that attracts nearly 200 local researchers and industry professionals with years of experience in
synthetic biology. We had a wonderful time pitching our project and gaining
valuable feedback from experts along with listening to talks on genetic circuitry,
@@ -108,11 +108,11 @@
</p>
<row>
<div class="col-6">
- <embed src="https://static.igem.wiki/teams/4764/wiki/dabomb/poster.png" width='40vw'>
+ <img src="https://static.igem.wiki/teams/4764/wiki/dabomb/poster.png" width='95%'>
<figcaption style="font-size:0.9rem">Our poster for da BOMB.</figcaption>
</div>
<div class="col-6">
- <img src="https://static.igem.wiki/teams/4764/wiki/dabomb/dabomb.jpg" width='40vw'>
+ <img src="https://static.igem.wiki/teams/4764/wiki/dabomb/dabomb.png" width='95%'>
<figcaption style="font-size:0.9rem">Katie and Jeannie after a successful poster session!</figcaption>
</div>
</row>
diff --git a/wiki/pages/team.html b/wiki/pages/team.html
index dee55ab6c76b2a723159d8a23c8229989d21a328..474de7b4f7e3472a0d87cd6f21bce7e9d15e8c6e 100644
--- a/wiki/pages/team.html
+++ b/wiki/pages/team.html
@@ -11,9 +11,46 @@
<p style="margin:auto;text-align:center">Hover over each member to read a short bio.</p>
<br>
<div class="d-flex flex-row justify-content-center mw-100" style="gap:50px">
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie-bio-test.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie-dedeed.png")'>
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/allison-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/allison-bio-test.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/allison-dedeed.png")'>
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/katie-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/katie-bio-test.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/katie-dedeed.png")'>
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie.png">
+ <p class="profile-caption">Katie Spivakovsky</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Jeannie is our fabulous Team Lead! She is a rising second-year majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/katie.png">
+ <p class="profile-caption">Katie Spivakovsky</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Katie is our amazing Experiment Lead! She is a rising second-year majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/allison.png">
+ <p class="profile-caption">Allison Lin</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Allison is our wonderful Human Practices Lead! She is a rising second-year majoring in Electrical Engineering and Computer Science.</p>
+ </div>
+ </div>
+ </div>
+
+
</div>
<hr>
@@ -25,8 +62,33 @@
<p style="margin:auto;text-align:center">Hover over each mentor to read a short bio.</p>
<br>
<div class="d-flex flex-row justify-content-center mw-100" style="gap:50px">
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/amanda-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/amanda-bio.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/amanda-dedeed.png")'>
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/ellie-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/ellie-bio.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/ellie-dedeed.png")'>
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/amanda.png">
+ <p class="profile-caption">Amanda Mei</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Amanda was on the 2022 iGEM team and now serves as
+ a mentor! She is a rising senior majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/ellie.png">
+ <p class="profile-caption">Ellie Feng</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Ellie was on the 2021 iGEM team and now serves as
+ a mentor! She is a rising senior majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
</div>
<br>