diff --git a/static/style.css b/static/style.css
index d227671577d0e173d9055f85f718b62d2bc2cf6a..16ae048a65e28308c8385ffe07149ad593bfa808 100644
--- a/static/style.css
+++ b/static/style.css
@@ -246,6 +246,20 @@ h1 { padding-bottom: 20px; }
src: url("https://static.igem.wiki/teams/4771/wiki/fonts/novecento-normal.ttf") format("truetype");
}
+@font-face {
+ font-family: "playfairdisplay";
+ src: url("https://static.igem.wiki/teams/4771/wiki/fonts/playfairdisplay-variablefont-wght.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "lato-italic";
+ src: url("https://static.igem.wiki/teams/4771/wiki/fonts/lato-italic.ttf") format("truetype");
+}
+
+.home-font{
+ font-family: "lato-italic";
+}
+
.title {
padding-top: 60px;
margin-top: -40px;
@@ -342,6 +356,151 @@ h1 { padding-bottom: 20px; }
}
}
+.third-divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+}
+
+.third-divider svg {
+ position: relative;
+ display: block;
+ width: calc(100% + 1.3px);
+ height: 52px;
+ transform: translateY(2px) rotateY(180deg);
+}
+
+.third-divider .shape-fill {
+ fill: #d8f2ed;
+}
+
+.forth-divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+ transform: rotate(180deg) rotateY(180deg);
+}
+
+.forth-divider svg {
+ position: relative;
+ display: block;
+ width: calc(100% + 1.3px);
+ height: 160px;
+}
+
+.forth-divider .shape-fill {
+ fill: #FBFAF3;
+}
+
+.fifth-divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+ transform: rotate(180deg);
+}
+
+.fifth-divider svg {
+ position: relative;
+ display: block;
+ width: calc(120% + 50px);
+ height: 100px;
+}
+
+.fifth-divider .shape-fill {
+ fill: #fce4ce;
+}
+
+.sixth-divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+}
+
+.sixth-divider svg {
+ position: relative;
+ display: block;
+ width: calc(100% + 1.3px);
+ height: 52px;
+ transform: translateY(2px) rotateY(180deg);
+}
+
+.sixth-divider .shape-fill {
+ fill: #eec9f0;
+}
+
+.seventh-divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+}
+
+.seventh-divider svg {
+ position: relative;
+ display: block;
+ width: calc(100% + 1.3px);
+ height: 100px;
+ transform: translateY(2px);
+}
+
+.seventh-divider .shape-fill {
+ fill: #d8f6f7;
+}
+
+.eighth-divider {
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+}
+
+.eighth-divider svg {
+ position: relative;
+ display: block;
+ width: calc(150% + 50px);
+ height: 88px;
+}
+
+.eighth-divider .shape-fill {
+ fill: #dbf8d0;
+}
+
+.ninth-divider {
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+}
+
+.ninth-divider svg {
+ position: relative;
+ display: block;
+ width: calc(150% + 50px);
+ height: 110px;
+}
+
+.ninth-divider .shape-fill {
+ fill: #FBFAF3;
+}
+
.footer-divider {
position: absolute;
bottom: 0;
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 4f0c96631d2a3d6a9f1a0c3ed7743a0028272d58..c2928cc7b0f17570d33d01f6a3661123334ffa21 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -35,15 +35,9 @@
<!-- Page Content -->
<!-- Welcome -->
- <div class="row d-flex justify-content-center curvy-dividerr" style="z-index: 2; background-color: #FBFAF3; height: 70vh;position: relative;">
- <div class="col-lg-6 d-flex ease-in-container">
- <img src="https://static.igem.wiki/teams/4771/wiki/img-6936.png" alt="" style="max-width: 100%; height: 30rem;margin-left: 12vw;">
- </div>
- <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center ease-in-container" style="text-align: center;">
- <h3>First Part</h3>
- <p>
- say something...<span class="reference"><sup>1</sup><span class="tooltip">David P, Jad M, Andrew W,et al. BioPhi: A platform for antibody design, humanization, and humanness evaluation based on natural antibody repertoires and deep learning[J/OL], mAbs, 14:1.(2022).</span></span>
- </p>
+ <div class="row d-flex justify-content-center curvy-dividerr" style="z-index: 2; background-color: #FBFAF3; height: 50vh;position: relative;">
+ <div class="d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;margin-bottom: 5vw;">
+ <h3>In this vast and colorful world, life exists in a myriad of ways.</h3>
</div>
<div class="counter-div-bottom" style="z-index: -10;">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
@@ -53,14 +47,11 @@
</div>
<div class="row d-flex justify-content-center align-items-center curvy-dividerr" style="z-index: 1; background-color: #eec4f6; height: 70vh;position: relative;">
- <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center ease-in-container" style="text-align: center;">
- <h3>Second Part</h3>
- <p>
- say something...
- </p>
+ <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;margin-bottom: 200px;margin-left: 50px;color: #381f4d;">
+ <h3>Pets, those selfless companions in our lives, are the beings that silently accompany us. They are a part of our families and even more so, our soulmates.</h3>
</div>
- <div class="col-lg-6 d-flex align-items-center ease-in-container">
- <img src="https://static.igem.wiki/teams/4771/wiki/img-6936.png" alt="" style="max-width: 100%; height: 30rem;">
+ <div class="col-lg-5 d-flex align-items-center ease-in-container">
+ <img src="https://static.igem.wiki/teams/4771/wiki/home/1.png" alt="" style="max-width: 100%; height: 30rem;margin-bottom: 200px;">
</div>
<div class="second-divider-bottom">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
@@ -70,14 +61,104 @@
</div>
<div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #afd3eb; height: 70vh;position: relative;">
- <div class="col-lg-6 d-flex ease-in-container">
- <img src="https://static.igem.wiki/teams/4771/wiki/img-6936.png" alt="" style="max-width: 100%; height: 30rem;margin-left: 12vw;">
+ <div class="col-lg-5 d-flex ease-in-container">
+ <img src="https://static.igem.wiki/teams/4771/wiki/home/2.png" alt="" style="max-width: 100%; height: 30rem;">
+ </div>
+ <div class="col-lg-5 d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;color: rgb(27, 15, 97);">
+ <h3>In the expansive farmlands, cattle, pigs, and sheep stand as the backbone of the livestock industry. Their well-being is not only the farmers' duty but also humanity's commitment to nature.</h3>
+ </div>
+ <div class="third-divider">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center align-items-center curvy-dividerr" style="z-index: 1; background-color: #d8f2ed; height: 70vh;position: relative;">
+ <div class="flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;margin-bottom: 100px;color: #03210a;">
+ <h3 style="margin-bottom: 50px;">In the embrace of nature, every form of life is a child worthy of love.</h3>
+ <h3 style="margin-bottom: 50px;">In the 21st century, healthcare has emerged as a critical global issue.</h3>
+ <h3>Antibody drugs, with their better specificity and lower side effects</h3>
+ <h3>, account for a large proportion of newly approved human drugs. </h3>
</div>
- <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center ease-in-container" style="text-align: center;">
- <h3>Third Part</h3>
- <p>
- say something...
- </p>
+ <div class="forth-divider">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #FBFAF3; height: 70vh;position: relative;">
+ <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;margin-bottom: 50px;margin-left: 50px;color: #381f4d;">
+ <h3>However, the design of effective drugs for various types of animals is a very slow process. Overuse of antibiotics in pet hospitals can cause many problems.</h3>
+ </div>
+ <div class="col-lg-5 d-flex align-items-center ease-in-container">
+ <img src="https://static.igem.wiki/teams/4771/wiki/home/3.png" alt="" style="max-width: 100%; height: 27rem;margin-bottom: 50px;margin-left: 2vw;">
+ </div>
+ <div class="fifth-divider" style="z-index: 2;">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #fce4ce; height: 70vh;position: relative;">
+ <div class="col-lg-5 d-flex ease-in-container">
+ <img src="https://static.igem.wiki/teams/4771/wiki/home/4.png" alt="" style="max-width: 100%; height: 30rem;">
+ </div>
+ <div class="col-lg-5 d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;color: rgb(28, 15, 3);">
+ <h3>Inspired by the humanization of mouse-derived antibodies, we hope to design antibodies suitable for more species. </h3>
+ </div>
+ <div class="sixth-divider">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #eec9f0; height: 70vh;position: relative;">
+ <div class="flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;color: #230328;width: 75%;margin-top: 7vw;">
+ <h3 style="margin-bottom: 50px;">Leveraging deep learning technology and based on self-collected antibody data, we develop a comprehensive automated monoclonal antibody drug design system.</h3>
+ <h3 style="margin-bottom: 50px;">Our system starts with the other sources of antibody sequences against target species antigen (such as mouse-derived antibodies), automatically generates antibody sequences that may have better efficacy and lower immunogenicity, and performs comprehensive scoring.</h3>
+ </div>
+ <div class="seventh-divider">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #d8f6f7; height: 80vh;position: relative;">
+ <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;margin-bottom: 100px;margin-left: 50px;color: #381f4d;">
+ <h3>Through our pioneering model, we design antibody sequences of healing with lower immunogenicity, guiding our animal friends back to the embrace of health.</h3>
+ </div>
+ <div class="col-lg-5 d-flex align-items-center ease-in-container">
+ <img src="https://static.igem.wiki/teams/4771/wiki/home/5.png" alt="" style="max-width: 100%; height: 27rem;margin-bottom: 100px;margin-left: 2vw;">
+ </div>
+ <div class="eighth-divider" style="z-index: 2;">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #dbf8d0; height: 80vh;position: relative;">
+ <div class="col-lg-5 d-flex ease-in-container">
+ <img src="https://static.igem.wiki/teams/4771/wiki/home/6.png" alt="" style="max-width: 100%; height: 30rem;margin-bottom: 6vw;">
+ </div>
+ <div class="col-lg-5 d-flex flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;color: rgb(7, 30, 2);margin-bottom: 5vw;">
+ <h3>Our work helps animals avoid suffering from diseases, and contributes to creating a better living environment for both humans and animals.</h3>
+ </div>
+ <div class="ninth-divider">
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
+ </svg>
+ </div>
+ </div>
+
+ <div class="row d-flex justify-content-center curvy-dividerr" style="background-color: #FBFAF3; height: 60vh;position: relative;">
+ <div class="flex-column justify-content-center align-items-center ease-in-container home-font" style="text-align: center;color: #230328;width: 75%;margin-top: 7vw;">
+ <h3>This is where science meets compassion, and it's the future we are shaping together. Our research is not only enhancing the lives of pets and livestock but also driving the forefront of life sciences. We believe that the power of technology is making the world a better place, allowing every life to flourish in health.</h3>
</div>
<div class="footer-divider">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
@@ -85,6 +166,7 @@
</svg>
</div>
</div>
+
</div>
{% endblock %}
\ No newline at end of file
diff --git a/wiki/pages/software.html b/wiki/pages/software.html
index 354a602f0eed927ded4fa545e9710d3e0c5cf784..6bdc66ac21be416b90c4573f51fd6eb187cd2c60 100644
--- a/wiki/pages/software.html
+++ b/wiki/pages/software.html
@@ -231,7 +231,7 @@
</div>
<div style="text-align:center">
<figure class="figure" data-bs-toggle="modal" data-bs-target="#figure12">
- <img src="https://static.igem.wiki/teams/4771/wiki/software/12.png" class="figure-img img-fluid rounded" alt="Software output" style="width: 80%;">
+ <img src="https://static.igem.wiki/teams/4771/wiki/software/21.png" class="figure-img img-fluid rounded" alt="Software output" style="width: 80%;">
<figcaption class="figure-caption">Figure 11. Software output</figcaption>
</figure>
</div>
@@ -264,7 +264,7 @@
<p>
<div style="text-align:center">
<figure class="figure" data-bs-toggle="modal" data-bs-target="#figure15">
- <img src="https://static.igem.wiki/teams/4771/wiki/software/20.png" class="figure-img img-fluid rounded" alt="Generated PDB file" style="width: 55%;">
+ <img src="https://static.igem.wiki/teams/4771/wiki/software/15-2.png" class="figure-img img-fluid rounded" alt="Generated PDB file" style="width: 55%;">
<figcaption class="figure-caption">Figure 14. Generated PDB file</figcaption>
</figure>
</div>