Line 1: | Line 1: | ||
{{:Team:Mingdao/test}} | {{:Team:Mingdao/test}} | ||
− | <embed src | + | |
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> | ||
+ | <title>Inter Lab</title> | ||
+ | </head> | ||
+ | <style type="text/css"> | ||
+ | |||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | box-sizing: border-box; } | ||
+ | |||
+ | body { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: 'Ubuntu' !important; } | ||
+ | |||
+ | |||
+ | .bg-container { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | background-color: #c5d7d9; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/a/ab/T--Mingdao--Interlab_background.jpg); | ||
+ | background-repeat: repeat-y; | ||
+ | background-size: 100%; | ||
+ | } | ||
+ | |||
+ | .my-main-container { | ||
+ | width: 100%; | ||
+ | padding: 50px 7%; | ||
+ | } | ||
+ | |||
+ | .main-content { | ||
+ | background-color: white; | ||
+ | width: 80%; | ||
+ | margin-left: 10%; | ||
+ | padding: 50px; | ||
+ | min-height: 180vh; | ||
+ | z-index: 10; } | ||
+ | |||
+ | .text-area { | ||
+ | margin-bottom: 80px; } | ||
+ | .text-area h1 { | ||
+ | font-size: 60px; | ||
+ | font-weight: 700; | ||
+ | font-family: 'Arizonia' !important; | ||
+ | text-align: center; } | ||
+ | .text-area p { | ||
+ | font-size: 22px; | ||
+ | font-weight: 500; } | ||
+ | |||
+ | .pdfbtn { | ||
+ | width: 100%; | ||
+ | margin: 20px 0 10px 0; | ||
+ | padding: 10px 20px; | ||
+ | border-radius: 5px; | ||
+ | background-color: #556b7e; | ||
+ | color: white; | ||
+ | display: block; | ||
+ | position: relative; } | ||
+ | .pdfbtn i { | ||
+ | position: absolute; | ||
+ | right: 50px; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); } | ||
+ | |||
+ | .pdf-container { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | height: 90vh; | ||
+ | display: none; } | ||
+ | |||
+ | .ul-container { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .ul-container ul.medal li { | ||
+ | list-style: none; } | ||
+ | .ul-container ul.medal li:before { | ||
+ | content: ''; | ||
+ | display: inline-block; | ||
+ | height: 1em; | ||
+ | width: 2em; | ||
+ | background-size: 1em; | ||
+ | background-image: url(../img/circle.png); | ||
+ | background-repeat: no-repeat; } | ||
+ | |||
+ | .ul-container ul { | ||
+ | text-align: left; | ||
+ | padding: 20px 50px; | ||
+ | margin-left: 0; | ||
+ | |||
+ | border: #556b7e solid 2px; | ||
+ | font-size: 22px; } | ||
+ | .ul-container ul li { | ||
+ | padding: 10px; | ||
+ | list-style: disc; } | ||
+ | .ul-container ul li a { | ||
+ | text-decoration: none; | ||
+ | color: #000; } | ||
+ | .ul-container ul li a:visited, .ul-container ul li a:hover, .ul-container ul li a:focus { | ||
+ | color: #000; | ||
+ | text-decoration: none; } | ||
+ | .ul-container ul li span { | ||
+ | background-color: #fadd3a; | ||
+ | padding: 1px 10px; | ||
+ | border-radius: 5px; | ||
+ | margin-left: 20px; | ||
+ | cursor: pointer; } | ||
+ | .ul-container ul li i { | ||
+ | padding-left: 10px; } | ||
+ | |||
+ | #HQ_page .text-area p { | ||
+ | font-size: 22px; | ||
+ | font-family: 'Ubuntu'; | ||
+ | font-weight: 500; } | ||
+ | .top { | ||
+ | position: fixed; | ||
+ | right: 50px; | ||
+ | bottom: 50px; | ||
+ | height: 50px; | ||
+ | width: 50px; | ||
+ | cursor: pointer; } | ||
+ | .top img { | ||
+ | width: 100%; } | ||
+ | h2 { | ||
+ | font-family: 'Ubuntu'; | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | color: #000000 !important; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <body> | ||
+ | <div class="bg-container"> | ||
+ | <div class="my-main-container"> | ||
+ | <div class="main-content"> | ||
+ | <div class="text-area"> | ||
+ | <h1>Inter Lab</h1> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="pdf-area"> | ||
+ | <div class="img-container" id="lab-1"> | ||
+ | <embed src="https://static.igem.org/mediawiki/2018/2/21/T--Mingdao--Notebook.pdf" style="width:100%; height:1000px" frameborder="0"></embed> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $('#interlab-btn-1').on('click', function(){ | ||
+ | $('#interlab-1').css('height','250vh') | ||
+ | $('#interlab-1').slideToggle("slow"); | ||
+ | $('.bg-container').css('max-height','500vh') | ||
+ | $('.main-content').css('min-height','200vh') | ||
+ | }); | ||
+ | $('#interlab-btn-2').on('click', function(){ | ||
+ | $('#interlab-2').slideToggle("slow"); | ||
+ | $('.bg-container').css('max-height','500vh') | ||
+ | $('.main-content').css('min-height','200vh') | ||
+ | }); | ||
+ | $('.top').on('click', function(){ | ||
+ | $('html, body').animate({scrollTop: '0px'}, 500); | ||
+ | }); | ||
+ | </script> | ||
+ | </html> |
Revision as of 11:39, 10 September 2018