|
|
| Line 3: |
Line 3: |
| | | | |
| | <html> | | <html> |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <meta name="viewport" content="width=device-width">
| |
| − | <meta name="description" content="UR iGem wiki 2020">
| |
| − | <meta name="keywords" content="UR iGem wiki 2020">
| |
| − | <meta name="author" content="Yuxin Chen">
| |
| − | <title>UR igem wiki</title>
| |
| − | <link href='https://fonts.googleapis.com/css?family=Libre Baskerville' rel='stylesheet'>
| |
| − |
| |
| − | <script>
| |
| − | function myFunction() {
| |
| − | var dots = document.getElementById("dots");
| |
| − | var moreText = document.getElementById("more");
| |
| − | var btnText = document.getElementById("myBtn");
| |
| − |
| |
| − | if (dots.style.display === "none") {
| |
| − | dots.style.display = "inline";
| |
| − | btnText.innerHTML = "Read more";
| |
| − | moreText.style.display = "none";
| |
| − | } else {
| |
| − | dots.style.display = "none";
| |
| − | btnText.innerHTML = "Read less";
| |
| − | moreText.style.display = "inline";
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| − | <!--
| |
| − | <link rel="stylesheet" href="./css/style.css">
| |
| − | -->
| |
| − |
| |
| − | <style>
| |
| − | #sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
| |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
| |
| − |
| |
| − | body{
| |
| − | font: 15px/1.5，'Libre Baskerville', Helvetica,sans-serif;
| |
| − | font-family: 'Libre Baskerville';
| |
| − | padding:0;
| |
| − | margin:0px;
| |
| − | margin-top:0px;
| |
| − | background-color:white;
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | }
| |
| − |
| |
| − | /* Global */
| |
| − | .container{
| |
| − | width:80%;
| |
| − | margin:auto;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − |
| |
| − | ul{
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − | /* Header **/
| |
| − | header{
| |
| − | background:black;
| |
| − | position:fixed;
| |
| − | width:100%;
| |
| − | color:#ffffff;
| |
| − | padding-top:15px;
| |
| − | min-height:50px;
| |
| − | border-bottom:#EC5E87 5px solid;
| |
| − | }
| |
| − |
| |
| − | header a{
| |
| − | color:#ffffff;
| |
| − | text-decoration:none;
| |
| − | text-transform: uppercase;
| |
| − | font-size:16px;
| |
| − | }
| |
| − |
| |
| − | header li{
| |
| − | float:left;
| |
| − | display:inline;
| |
| − | padding: 0 20px 0 20px;
| |
| − | }
| |
| − |
| |
| − | header #branding{
| |
| − | float:left;
| |
| − | }
| |
| − |
| |
| − | header #branding h1{
| |
| − | margin:0;
| |
| − | color:white;
| |
| − | }
| |
| − |
| |
| − | header nav{
| |
| − | float:right;
| |
| − | margin-top:10px;
| |
| − | }
| |
| − |
| |
| − | header .none a{
| |
| − | color:white;
| |
| − | font-weight:bold;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | header .highlight, header .current a{
| |
| − | color:#EC5E87;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − | header a:hover{
| |
| − | color:#EC5E87;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − | #more {display: none;}
| |
| − |
| |
| − | #showcase{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | overflow:hidden;
| |
| − | height:1269px;
| |
| − | background:url('https://static.igem.org/mediawiki/2020/4/48/T--Rochester--showcase.png') no-repeat 0 0px;
| |
| − | background-size:auto 100%;
| |
| − | /*
| |
| − | background:black no-repeat 0 -400px;
| |
| − | */
| |
| − | text-align:center;
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | /* Showcase */
| |
| − | #showcase-1{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | overflow:hidden;
| |
| − | /*
| |
| − | background:url('../img/showcase-1.png') no-repeat 0 0px;
| |
| − | background-size: cover;
| |
| − | /*
| |
| − | background:black no-repeat 0 -400px;
| |
| − | */
| |
| − | text-align:center;
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | #showcase-1 h1{
| |
| − | margin-top:200px;
| |
| − | font-size:85px;
| |
| − | padding:50px;
| |
| − | margin-bottom:40px;
| |
| − | line-height:100px;
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | /* Showcase */
| |
| − | #showcase-2{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | overflow:hidden;
| |
| − | /*s
| |
| − | min-height:700px;
| |
| − | /*
| |
| − | background:url('../img/showcase-2(3).png') no-repeat 0 -1120px;
| |
| − | background-size: cover;
| |
| − | /*
| |
| − | background:black no-repeat 0 -400px;
| |
| − | */
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | #showcase-2 h1{
| |
| − | margin-top:30px;
| |
| − | font-size:45px;
| |
| − | padding:50px;
| |
| − | margin-bottom:40px;
| |
| − | margin-left:60px;
| |
| − | line-height:100px;
| |
| − | color:#F4D03F;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | /* Showcase */
| |
| − | #showcase-3{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | overflow:hidden;
| |
| − | min-height:350px;
| |
| − | background:black no-repeat 0 -120px;
| |
| − | background-size: cover;
| |
| − | /*
| |
| − | background:#F48FB1 no-repeat 0 -400px;
| |
| − | */
| |
| − | text-align:center;
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | #showcase-3 h1{
| |
| − | margin-top:40px;
| |
| − | font-size:45px;
| |
| − | padding:50px;
| |
| − | padding-bottom:0px;
| |
| − | margin-left:60px;
| |
| − | margin-bottom:0px;
| |
| − | line-height:50px;
| |
| − | color:white;
| |
| − | text-align:left;
| |
| − | }
| |
| − |
| |
| − | #showcase-3 h2{
| |
| − | margin-top:20px;
| |
| − | margin-left:60px;
| |
| − | margin-right:130px;
| |
| − | margin-bottom:70px;
| |
| − | font-size:40px;
| |
| − | padding:0px;
| |
| − | padding-left:50px;
| |
| − | margin-bottom:40px;
| |
| − | line-height:50px;
| |
| − | color:white;
| |
| − | text-align:left;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | #background{
| |
| − | background:url('https://static.igem.org/mediawiki/2020/2/22/T--Rochester--background.png') no-repeat 0 0px;
| |
| − | min-height:1300px;
| |
| − | background-size:100% 100%;
| |
| − | padding-top:50px;
| |
| − | }
| |
| − |
| |
| − | #background h1, h2, h3{
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #background h4{
| |
| − | margin:auto;
| |
| − | font-size:85px;
| |
| − | font-weight:lighter;
| |
| − | padding:30px;
| |
| − | padding-bottom:80px;
| |
| − | padding-top:100px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #background h5{
| |
| − | margin:0px;
| |
| − | font-size:35px;
| |
| − | padding:0px;
| |
| − | margin-bottom:100px;
| |
| − | line-height:70px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | #background h6{
| |
| − | margin:auto;
| |
| − | font-size:65px;
| |
| − | font-weight:lighter;
| |
| − | padding:30px;
| |
| − | padding-bottom:0px;
| |
| − | padding-left:100px;
| |
| − | line-height:70px;
| |
| − | color:white;
| |
| − | text-align:left;
| |
| − | }
| |
| − |
| |
| − | #background h7{
| |
| − | margin:0px;
| |
| − | font-size:25px;
| |
| − | padding:0px;
| |
| − | line-height:100px;
| |
| − | padding-left:100px;
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | .background-box{
| |
| − | display:flex;
| |
| − | flex-direction:row;
| |
| − | /*
| |
| − | background-color:black;
| |
| − | */
| |
| − | margin-bottom:10px;
| |
| − | margin-top:10px;
| |
| − | }
| |
| − |
| |
| − | .background-box div{
| |
| − | /*
| |
| − | border:1px #ccc solid;
| |
| − | */
| |
| − | padding:10px;
| |
| − | }
| |
| − |
| |
| − | .background-box div h1{
| |
| − | /*
| |
| − | border:1px #ccc solid;
| |
| − | */
| |
| − | font-size:65px;
| |
| − | padding:0px;
| |
| − | margin-top:0px;
| |
| − | margin-bottom:10px;
| |
| − | line-height:80px;
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | .background-box div h2{
| |
| − | /*
| |
| − | border:1px #ccc solid;
| |
| − | */
| |
| − | padding:0px;
| |
| − | margin-top:0px;
| |
| − | color:white;
| |
| − | margin-left:10px;
| |
| − | margin-right:10px;
| |
| − | font-weight: lighter;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | .box-1{
| |
| − | flex:1;
| |
| − | order:1;
| |
| − | text-align:left;
| |
| − | /*
| |
| − | border-right:2px #ccc solid;
| |
| − | */
| |
| − | }
| |
| − |
| |
| − | .box-2{
| |
| − | flex:1;
| |
| − | order:2;
| |
| − | text-align:left;
| |
| − | /*
| |
| − | border-right:2px #ccc solid;
| |
| − | */
| |
| − | }
| |
| − |
| |
| − | .box-3{
| |
| − | flex:1;
| |
| − | order:3;
| |
| − | text-align:left;
| |
| − | }
| |
| − |
| |
| − | .box-1 h1, .box-2 h1, .box-3 h1{
| |
| − | font-size:50px;
| |
| − | text-align:center;
| |
| − | line-height:normal;
| |
| − | }
| |
| − |
| |
| − | .box-1 h2, .box-2 h2, .box-3 h2{
| |
| − | font-size:25px;
| |
| − | margin-left:30px;
| |
| − | margin-right:30px;
| |
| − | line-height:normal;
| |
| − | }
| |
| − |
| |
| − | #showcase-4{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | padding-top:20px;
| |
| − | overflow:hidden;
| |
| − | min-height:70px;
| |
| − | /*
| |
| − | background:url('../img/logo.jpg') no-repeat 0 -400px;
| |
| − | */
| |
| − | background:black no-repeat 0 -400px;
| |
| − | background-size: cover;
| |
| − | text-align:center;
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | #showcase-4 h1{
| |
| − | margin:auto;
| |
| − | font-size:65px;
| |
| − | font-weight:lighter;
| |
| − | padding:30px;
| |
| − | padding-bottom:0px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #showcase-4 h2{
| |
| − | margin:0px;
| |
| − | font-size:25px;
| |
| − | padding:0px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | #showcase-4 h3{
| |
| − | margin:0px;
| |
| − | font-size:20px;
| |
| − | padding:0px;
| |
| − | margin-bottom:30px;
| |
| − | line-height:50px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | #myBtn{
| |
| − | background-color:#EC5E87;
| |
| − | border:none;
| |
| − | font-size:25px;
| |
| − | border-radius: 5px;
| |
| − | color:white;
| |
| − | }
| |
| − |
| |
| − | #info-1{
| |
| − | padding:0px;
| |
| − | margin:0px;
| |
| − | background-color:#EC5E87;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | #info-1 h1{
| |
| − | color:white;
| |
| − | margin:0px;
| |
| − | padding:2.5px;
| |
| − | font-size:25px;
| |
| − | text-align: left;
| |
| − | line-height:50px;
| |
| − | font-weight:lighter;
| |
| − | }
| |
| − |
| |
| − | #showcase-5{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | padding-top:50px;
| |
| − | overflow:hidden;
| |
| − | min-height:350px;
| |
| − | /*
| |
| − | background:url('../img/logo.jpg') no-repeat 0 -400px;
| |
| − | */
| |
| − | background:black no-repeat 0 -400px;
| |
| − | background-size: cover;
| |
| − | text-align:center;
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | #showcase-5 h1{
| |
| − | margin:auto;
| |
| − | font-size:85px;
| |
| − | font-weight:lighter;
| |
| − | padding:30px;
| |
| − | padding-bottom:0px;
| |
| − | padding-top:50px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #showcase-5 h2{
| |
| − | margin:auto;
| |
| − | font-size:35px;
| |
| − | padding:0px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | #info-2{
| |
| − | padding:0px;
| |
| − | margin-top:0px;
| |
| − | background-color:#EC5E87;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | #info-2 h1{
| |
| − | color:white;
| |
| − | margin:30px;
| |
| − | font-size:25px;
| |
| − | text-align: left;
| |
| − | line-height:50px;
| |
| − | font-weight:lighter;
| |
| − | }
| |
| − |
| |
| − | #showcase-6{
| |
| − | width:100%;
| |
| − | margin:auto;
| |
| − | overflow:hidden;
| |
| − | min-height:200px;
| |
| − | /*
| |
| − | background:url('../img/logo.jpg') no-repeat 0 -400px;
| |
| − | */
| |
| − | background:black no-repeat 0 -400px;
| |
| − | background-size: cover;
| |
| − | text-align:center;
| |
| − | padding:auto;
| |
| − | }
| |
| − |
| |
| − | #showcase-6 h1{
| |
| − | margin:auto;
| |
| − | font-size:65px;
| |
| − | font-weight:lighter;
| |
| − | padding:30px;
| |
| − | padding-bottom:0px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #showcase-6 h2{
| |
| − | margin:auto;
| |
| − | font-size:25px;
| |
| − | padding:0px;
| |
| − | line-height:100px;
| |
| − | color:#BDBDBD;
| |
| − | text-align:center;
| |
| − | font-weight: lighter;
| |
| − | }
| |
| − |
| |
| − | #logo img{
| |
| − | display: block;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | width: 80%;
| |
| − | }
| |
| − |
| |
| − | /* Boxes */
| |
| − | #links{
| |
| − | margin-top:20px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .boxes{
| |
| − | display:flex;
| |
| − | justify-content: space-between;
| |
| − | }
| |
| − |
| |
| − | .boxes box{
| |
| − | width:20%;
| |
| − | border:1px #ccc solid;
| |
| − | border-radius: 45px;
| |
| − | text-align: center;
| |
| − | padding:20px;
| |
| − | background-color:#EC5E87;
| |
| − | }
| |
| − |
| |
| − | .boxes a{
| |
| − | width:20%;
| |
| − | border:1px #ccc solid;
| |
| − | border-radius: 45px;
| |
| − | text-align: center;
| |
| − | padding:20px;
| |
| − | background-color:#EC5E87;
| |
| − | text-decoration:none;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | .boxes a:hover{
| |
| − | width:20%;
| |
| − | border:1px #d13636 solid;
| |
| − | border-radius: 45px;
| |
| − | text-align: center;
| |
| − | padding:20px;
| |
| − | background-color:#d13636;
| |
| − | text-decoration:none;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | .box img{
| |
| − | width:90px;
| |
| − | }
| |
| − |
| |
| − | footer{
| |
| − | padding:20px;
| |
| − | margin-top:20px;
| |
| − | color:white;
| |
| − | background-color:black;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | footer h3{
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | footer h6{
| |
| − | text-align:center;
| |
| − | color:white;
| |
| − | }
| |
| − |
| |
| − | footer a.none{
| |
| − | text-decoration:none;
| |
| − | text-transform: uppercase;
| |
| − | font-size:16px;
| |
| − | font-style:italic;
| |
| − | color:#EC5E87;
| |
| − | }
| |
| − |
| |
| − | footer a:hover{
| |
| − | color:#d13636;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − | /* Media Queries */
| |
| − | @media(max-width: 768px){
| |
| − | header #branding,
| |
| − | header nav,
| |
| − | header nav li,
| |
| − | #newsletter h1,
| |
| − | #newsletter form,
| |
| − | #boxes .box,
| |
| − | article#main-col,
| |
| − | aside#sidebar{
| |
| − | float:none;
| |
| − | text-align:center;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | header{
| |
| − | padding-bottom:20px;
| |
| − | }
| |
| − |
| |
| − | #showcase h1{
| |
| − | margin-top:40px;
| |
| − | }
| |
| − |
| |
| − | #newsletter button, .quote button{
| |
| − | display:block;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | #newsletter form input[type="email"], .quote input, .quote textarea{
| |
| − | width:100%;
| |
| − | margin-bottom:5px;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | </head>
| |
| − |
| |
| | <body> | | <body> |
| | <h1>Hello</h1> | | <h1>Hello</h1> |
