Skip to content
Snippets Groups Projects
Commit ca6a9c19 authored by Xingan Zhao's avatar Xingan Zhao
Browse files

team member,description

parent 36a64fb0
No related branches found
No related tags found
No related merge requests found
Pipeline #416164 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Header.tsx
+ 6
− 3
View file @ ca6a9c19
// import { url } from "inspector";
interface HeaderProps {
title: string;
lead: string;
image:string;
}
export function Header({ title, lead }: HeaderProps) {
export function Header({ title, lead,image }: HeaderProps) {
return (
<header className="bg-miami py-5 mb-5">
<header className="py-5 mb-5">
<div className="container h-100">
<div className="row h-100 align-items-center">
<div className="row h-100 align-items-center">
<div className="col-lg-12">
<h1 className="display-4 text-white mt-5 mb-2">{title}</h1>
<p className="lead mb-5 text-white-50">{lead}</p>
......
src/containers/App/App.css
+ 58
− 2
View file @ ca6a9c19
......@@ -104,7 +104,7 @@ footer a:hover {
}
.custom-header {
.custom-header-home {
width: 100vw;
height: 100vh;
background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */
......@@ -114,6 +114,16 @@ footer a:hover {
background-attachment: fixed; /* 固定背景图片，使其在滚动时不移动 */
}
.custom-header-team {
width: 100vw;
height: 100vh;
background-image: url('https://img0.baidu.com/it/u=3144851616,2583845916&fm=253&fmt=auto&app=138&f=JPEG?w=462&h=500'); /* 背景图片路径 */
background-size: cover; /* 使背景图片覆盖整个容器 */
background-position: center; /* 居中对齐背景图片 */
background-repeat: no-repeat; /* 防止背景图片重复 */
background-attachment: fixed; /* 固定背景图片，使其在滚动时不移动 */
}
.promotion-video {
height: 30vh; /* 设置高度为视口高度的80% */
border: none;
......@@ -128,4 +138,50 @@ footer a:hover {
.full-height-element {
height: 100vh; /* 设置元素的高度为视口高度的 100% */
}
\ No newline at end of file
}
/* 以下几个是team member响应式卡片 */
.card-container {
max-width: 300px;
margin: auto;
height: 500px;
}
.card {
transition: transform 0.2s;
}
.card-img-top {
width: 300px;
height: 400px;
}
.card-container:hover .card {
transform: scale(1.05);
}
.row-custom-height-card {
height: 300px; /* 你可以根据需要调整高度 */
}
.row-custom-height-card-space {
height: 100px; /* 你可以根据需要调整高度 */
}
/* wet-lab,dry-lab用的内容框框 */
.rounded-border {
border: 2px solid #f7a901; /* 设置边框的宽度和颜色 */
border-radius: 10px; /* 设置圆角半径 */
margin-bottom: 100px;
}
/* 文本居中 */
.center-text {
text-align: center; /* 将文本水平居中 */
}
/* 文本开头有缩进，起到空格作用 */
.indent {
text-indent: 20px; /* 设置首行缩进 20px */
}
src/contents/description.tsx
+ 33
− 3
View file @ ca6a9c19
......@@ -6,11 +6,41 @@ export function Description() {
return (
<>
<div className="row mt-4">
<div className="col">
<div className="bd-callout bd-callout-info">
Hepatic encephalopathy (HE) is a complication of cirrhosis characterized by neuropsychiatric and motor dysfunction. In 2023 it was estimated that there were 112 million individuals with liver cirrhosis worldwide, 40-60% of whom develop HE. Manifestations of HE can range from subtle (MHE) to severe (OHE) and even coma, which considerably affect the quality of life and even the survival of patients. Emerging data demonstrate the increased level of ammonia caused by liver dysfunction and overactivated microbiota in the context of cirrhosis plays an essential role in the pathogenesis of HE. Microbiome-targeted therapies for HE such as lactulose, rifaximin, probiotics, and FMT are showing promise. However, the resilience of the microbiome to sustainable change and unpredictable clinical outcomes from microbiota alterations remain challenging in the effective application of microbiome therapeutics in HE. In our project, we plan to design safe and controllable engineered bacteria that can metabolize the excessive accumulation of ammonia in the intestine of patients. We aim to improve the quality of life of patients with MHE, delaying their progression to OHE, and provide a novel idea for the microbial therapy of HE.
<div className="col-3 rounded-border"></div>
<div className="col-8">
<div className="rounded-border">
<h4 className="center-text" id="section1">Section 1</h4>
<img
src="https://inews.gtimg.com/om_bt/Oyv56nUaV015iJ8TqWik8ZUbAkYJDeULXqoSqcq4OS-zYAA/641"
alt="jojo"
className="responsive-img"
/>
</div>
<div className="rounded-border" id="section2">
<h4 className="center-text">Section 2</h4>
<img
src="https://ww3.sinaimg.cn/mw690/008awllvgy1hp23n0x2ocj30gs0go79b.jpg"
alt="jojo"
className="responsive-img"
/>
</div>
<div className="rounded-border" id="section3">
<h4 className="center-text">Section 3</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</div>
<div className="col-1"></div>
{/* <div className="bd-callout bd-callout-info">
Hepatic encephalopathy (HE) is a complication of cirrhosis characterized by neuropsychiatric and motor dysfunction. In 2023 it was estimated that there were 112 million individuals with liver cirrhosis worldwide, 40-60% of whom develop HE. Manifestations of HE can range from subtle (MHE) to severe (OHE) and even coma, which considerably affect the quality of life and even the survival of patients. Emerging data demonstrate the increased level of ammonia caused by liver dysfunction and overactivated microbiota in the context of cirrhosis plays an essential role in the pathogenesis of HE. Microbiome-targeted therapies for HE such as lactulose, rifaximin, probiotics, and FMT are showing promise. However, the resilience of the microbiome to sustainable change and unpredictable clinical outcomes from microbiota alterations remain challenging in the effective application of microbiome therapeutics in HE. In our project, we plan to design safe and controllable engineered bacteria that can metabolize the excessive accumulation of ammonia in the intestine of patients. We aim to improve the quality of life of patients with MHE, delaying their progression to OHE, and provide a novel idea for the microbial therapy of HE.
</div> */}
</div>
</>
);
......
src/contents/home.tsx
+ 1
− 1
View file @ ca6a9c19
......@@ -5,7 +5,7 @@ export function Home() {
return (
<>
<div className="custom-header left-align"></div>
<div className="custom-header-home left-align"></div>
<div className="container-fluid">
<div className="row justify-content-center bg-rice_yellow ">
......
src/contents/team.tsx
+ 95
− 40
View file @ ca6a9c19
import { Inspirations, InspirationLink } from "../components";
import React, { useState } from 'react';
export function Team() {
const links: InspirationLink[] = [
{ year: 2019, teamName: "CU", pageName: "Team" },
{ year: 2019, teamName: "UANL", pageName: "Team" },
{ year: 2019, teamName: "William_and_Mary", pageName: "Team" },
{ year: 2020, teamName: "BOKU-Vienna", pageName: "Team" },
{ year: 2020, teamName: "CAU_China", pageName: "Team_Member" },
{ year: 2020, teamName: "Lethbridge", pageName: "Members" },
];
interface CardProps {
image1: string;
image2: string;
title: string;
description: string;
}
const Card: React.FC<CardProps> = ({ image1, image2, title, description }) => {
const [hover, setHover] = useState(false);
return (
<div
className="card-container"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<div className="card">
<img
src={hover ? image2 : image1}
alt={title}
className="card-img-top"
/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p>
</div>
</div>
</div>
);
};
export function Team() {
return (
<>
<div className="row">
<div className="col-8">
<h2>What should this page contain?</h2>
<hr />
<ul>
<li>
Include pictures of your teammates, don't forget instructors and
advisors!
</li>
<li>
You can add a small biography or a few words from each team
member, to tell us what you like, and what motivated you to
participate in iGEM.
</li>
<li>
Take team pictures! Show us your school, your lab and little bit
of your city.
</li>
<li>
Remember that image galleries can help you showcase many pictures
while saving space.
</li>
</ul>
<div className="bd-callout bd-callout-info">
<strong>Important:</strong> Your wiki pages will be archived at the
end of the iGEM season and this content will remain online. Please
keep this in mind as you post photos and personal information on
this page.
<div className="custom-header-team left-align"></div>
<div className="row bg-rice_yellow">
<div className='row justify-content-center h1'>SMU&GDMU CREW</div>
<div className="col-2"></div>
<div className="col-2">
<div className='row-custom-height-card-space'></div>
<Card
image1= "https://img0.baidu.com/it/u=45513050,3171194851&fm=253&fmt=auto&app=138&f=JPEG?w=885&h=500"
image2= "https://img1.baidu.com/it/u=455465338,4231697526&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
title="yujiro"
description="Strongest man."
/>
<div className='row-custom-height-card-space'></div>
<Card
image1="https://via.placeholder.com/300x200.png?text=Image+1"
image2="https://via.placeholder.com/300x200.png?text=Image+2"
title="Card Title"
description="Card description goes here."
/>
<div className='row-custom-height-card-space'></div>
</div>
<div className="col-1"></div>
<div className="col-2">
<div className='row-custom-height-card-space'></div>
<Card
image1="https://via.placeholder.com/300x200.png?text=Image+1"
image2="https://via.placeholder.com/300x200.png?text=Image+2"
title="Card Title"
description="Card description goes here."
/>
<div className='row-custom-height-card-space'></div>
<Card
image1="https://via.placeholder.com/300x200.png?text=Image+1"
image2="https://via.placeholder.com/300x200.png?text=Image+2"
title="Card Title"
description="Card description goes here."
/>
<div className='row-custom-height-card-space'></div>
</div>
<div className="col-4">
<Inspirations inspirationLinkList={links} />
<div className="col-1"></div>
<div className="col-2">
<div className='row-custom-height-card-space'></div>
<Card
image1="https://via.placeholder.com/300x200.png?text=Image+1"
image2="https://via.placeholder.com/300x200.png?text=Image+2"
title="Card Title"
description="Card description goes here."
/>
<div className='row-custom-height-card-space'></div>
<Card
image1="https://via.placeholder.com/300x200.png?text=Image+1"
image2="https://via.placeholder.com/300x200.png?text=Image+2"
title="Card Title"
description="Card description goes here."
/>
<div className='row-custom-height-card-space'></div>
</div>
<div className="col-2"></div>
</div>
</>
);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment