|
|
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> |