From 4d8c69e737836c29fa1e681e972094de7e6994c6 Mon Sep 17 00:00:00 2001
From: Your Name <email@example.com>
Date: Tue, 10 Oct 2023 20:13:06 +0800
Subject: [PATCH] update home.html
---
static/style.css | 159 +++++++++++++++++++++++++++++++++++++++
wiki/pages/home.html | 128 +++++++++++++++++++++++++------
wiki/pages/software.html | 4 +-
3 files changed, 266 insertions(+), 25 deletions(-)
diff --git a/static/style.css b/static/style.css
index d227671..16ae048 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 4f0c966..c2928cc 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 354a602..6bdc66a 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>
--
GitLab