diff --git a/src/asset/miami.jpg b/src/asset/img/miami.jpg similarity index 100% rename from src/asset/miami.jpg rename to src/asset/img/miami.jpg diff --git a/src/containers/App/App.css b/src/containers/App/App.css index 620a1fe11d7caf911c5a8e57a5941e1e81bd533c..95f6d3873291b561b46bc30d476afcf56ec39d6f 100644 --- a/src/containers/App/App.css +++ b/src/containers/App/App.css @@ -14,6 +14,10 @@ body { background-color: #45b06cff; } +.bg-victoria { + background-color: rgb(211, 240, 130); +} + .bg-miami { background-image: url('/src/asset/miami.jpg'); /* 背景图片路径 */ background-size: cover; /* 使背景图片覆盖整个容器 */ @@ -92,9 +96,14 @@ footer a:hover { /* header */ .bg-miami { - background-image: url('/src/asset/miami.jpg'); /* 背景图片路径 */ + background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */ background-size: cover; /* 使背景图片覆盖整个容器 */ background-position: center; /* å±…ä¸å¯¹é½èƒŒæ™¯å›¾ç‰‡ */ background-repeat: no-repeat; /* 防æ¢èƒŒæ™¯å›¾ç‰‡é‡å¤ */ background-attachment: fixed; /* 固定背景图片,使其在滚动时ä¸ç§»åŠ¨ */ } + +.px100 { +font-size: 100px; +color: #72d6b0; +} diff --git a/src/contents/home.tsx b/src/contents/home.tsx index 66a6f488de419eee17a7f504af268a01dfda7212..6fef660ff18b04a908d4fc775ea8538dc621628e 100644 --- a/src/contents/home.tsx +++ b/src/contents/home.tsx @@ -1,107 +1,28 @@ -import { Inspirations, InspirationLink } from "../components"; +// import { url } from "inspector"; export function Home() { - const links: InspirationLink[] = [ - { year: 2022, teamName: "DTU-Denmark", pageName: "" }, - { year: 2022, teamName: "Virginia", pageName: "" }, - { year: 2022, teamName: "Crete", pageName: "" }, - { year: 2022, teamName: "Estonia_TUIT", pageName: "" }, - { year: 2022, teamName: "AshesiGhana", pageName: "" }, - { year: 2021, teamName: "SDU-Denmark", pageName: "" }, - { year: 2020, teamName: "XMU-China", pageName: "" }, - { year: 2020, teamName: "TAS_Taipei", pageName: "" }, - ]; + return ( <> - <div className="row"> - <div className="col"> - <h2>Before you start</h2> - <hr /> - <p>Please read the following pages:</p> - <ul> - <li> - <a - href="https://competition.igem.org/deliverables/team-wiki" - target="_blank" - > - Wiki Requirements page - </a> - </li> - <li> - <a - href="https://competition.igem.org/judging/pages-for-awards" - target="_blank" - > - Standard URL Pages for Awards - </a> - </li> - </ul> - </div> - </div> - <div className="row mt-4"> - <div className="col"> - <h2>Styling your wiki</h2> - <hr /> - <p> - Feel free to customize the page styling according to your - preferences, or you can simply leave the style as it is. It's wise - to focus on a clear content first, and on a clean design later. - </p> - <p> - Be cautious with the size of the assets like images, videos, and - more, that you put in your wiki. Large file sizes can hinder the - presentation of wikis due to slow internet connections. Remember to - compress large files before uploading them to iGEM servers. - </p> - <p> - This default wiki meets the requirements, enhances navigability, and - provides a user-friendly experience for visitors. You should not - feel obligated to go beyond the provided styling. - </p> - </div> - </div> - <div className="row mt-4"> - <div className="col-lg-8"> - <h2>Tips</h2> - <hr /> - <p> - This wiki will be your team's first interaction with the rest of the - world, so here are a few tips to help you get started: - </p> - <ul> - <li> - State your accomplishments! Tell people what you have achieved - from the start. - </li> - <li> - Be clear about what you are doing and how you plan to do this. - </li> - <li> - You have a global audience! Consider the different backgrounds - that your users come from. - </li> - <li> - Make sure information is easy to find; nothing should be more than - 3 clicks away. - </li> - <li> - Avoid using very small fonts and low contrast colors; information - should be easy to read. - </li> - <li> - Start documenting your project as early as possible; don't leave - anything to the last minute before the Wiki Freeze. For a complete - list of deadlines visit the{" "} - <a href="https://competition.igem.org/calendar" target="_blank"> - iGEM Competition calendar - </a> - </li> - <li>Have lots of fun!</li> - </ul> + <div className="container"> + <div className="row justify-content-center bg-victoria "> + <div></div> + + + + + <div className="col-md-8"> + <div className="row justify-content-center h1">Promotion Video</div> + <div className="embed-responsive embed-responsive-16by9"> + <video className="embed-responsive-item" controls> + <source src={"https://static.igem.org/peertube/streaming-playlists/hls/b8667885-e1be-48b2-ab9b-d1aac71db0da/e35183e1-c8b5-45b0-a83a-d2b98dcb6996-480-fragmented.mp4"} type="video/mp4" /> + Your browser does not support the video tag. + </video> + </div> </div> - <Inspirations inspirationLinkList={links} /> </div> + </div> </> ); }