|
|
| Line 1: |
Line 1: |
| − | {{NCKU_Tainan/header}} {{NCKU_Tainan/navbar}} {{NCKU_Tainan/style}}
| |
| | | | |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/HP_About_style?action=raw&ctype=text/css">
| |
| − | </head>
| |
| − |
| |
| − | <body data-spy="scroll" data-target=".navbar-example">
| |
| − |
| |
| − | <header>
| |
| − | <div class="carousel-inner" role="listbox">
| |
| − | <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
| |
| − | </div>
| |
| − | </div>
| |
| − | </header>
| |
| − |
| |
| − | <div class="container content">
| |
| − | <h1 class="head">Education & Public Engagement</h1>
| |
| − | <div class="navbar-example">
| |
| − | <div class="row">
| |
| − | <div class="col-2 side">
| |
| − | <div id="sidelist" class="list-Fgroup">
| |
| − | <a class="list-group-item list-group-item-action" href="#list-item-1">Education</a>
| |
| − | <a class="list-group-item list-group-item-action" href="#list-item-2">Event list(待訂)</a>
| |
| − | <a class="list-group-item list-group-item-action" href="#list-item-3">Public Engagement</a>
| |
| − | <a class="list-group-item list-group-item-action" href="#list-item-4">Event list(待訂)</a>
| |
| − | <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
| |
| − | aria-hidden="true"></i></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-10">
| |
| − | <div data-spy="scroll" data-target="#sidelist" data-offset="0" class="scrollspy-example">
| |
| − | <div class="container">
| |
| − | <div id="list-item-1">
| |
| − | <h3>Professor</h3>
| |
| − | <h10>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt,
| |
| − | finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut
| |
| − | urna
| |
| − | elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class
| |
| − | aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
| |
| − | himenaeos.
| |
| − | Vestibulum tempor elit at lacus placerat ullamcorper sit amet vitae ante. Phasellus
| |
| − | enim nisi, pellentesque in ligula non, consectetur congue elit. Class aptent taciti
| |
| − | sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus
| |
| − | congue dictum urna a volutpat. Aliquam a mi eget nisi cursus molestie nec sit amet
| |
| − | felis.</h10>
| |
| − | </div>
| |
| − |
| |
| − | <div id="list-item-2">
| |
| − | <div class="card">
| |
| − | <div class="thumbnail">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
| |
| − | </div>
| |
| − | <div class="right">
| |
| − | <h1>Meetup with Tec Chihuahua</h1>
| |
| − | <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
| |
| − | has two part.
| |
| − | The main part is E-coding, which use
| |
| − | bacteria to record the data. Another part is to sense the pollute in
| |
| − | Mexico. </div>
| |
| − | </div>
| |
| − | <h9>9</h9>
| |
| − | <h6>JULY</h6>
| |
| − | <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
| |
| − | More</a></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="card">
| |
| − | <div class="thumbnail">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
| |
| − | </div>
| |
| − | <div class="right">
| |
| − | <h1>Meetup with Tec Chihuahua</h1>
| |
| − | <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
| |
| − | has two part.
| |
| − | The main part is E-coding, which use
| |
| − | bacteria to record the data. Another part is to sense the pollute in
| |
| − | Mexico. </div>
| |
| − | </div>
| |
| − | <h9>9</h9>
| |
| − | <h6>JULY</h6>
| |
| − | <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
| |
| − | More</a></div>
| |
| − | </div>
| |
| − | <div class="card">
| |
| − | <div class="thumbnail">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
| |
| − | </div>
| |
| − | <div class="right">
| |
| − | <h1>Meetup with Tec Chihuahua</h1>
| |
| − | <div id="cardtext">We finished a video meeting with Tec-Monterry. Their project
| |
| − | has two part.
| |
| − | The main part is E-coding, which use
| |
| − | bacteria to record the data. Another part is to sense the pollute in
| |
| − | Mexico. </div>
| |
| − | </div>
| |
| − | <h9>9</h9>
| |
| − | <h6>JULY</h6>
| |
| − | <div><a style="text-decoration: none; color: white;" href=# target="_blank" class="action-button shadow animate blue">Read
| |
| − | More</a></div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div id="list-item-3">
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <style>
| |
| − |
| |
| − | /*header*/
| |
| − | .carousel-item {
| |
| − | height: 100vh;
| |
| − | min-height: 300px;
| |
| − | background: no-repeat center center scroll;
| |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | -o-background-size: cover;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | body {
| |
| − | background-color: #272625;
| |
| − | font-family: 'Noto Sans',"微軟雅黑","Microsoft YaHei",Helvetica,sans-serif;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | color: white;
| |
| − | font-size: 35px;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | color: white;
| |
| − | font-size: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Button */
| |
| − | .animate{
| |
| − | transition: all 0.1s;
| |
| − | -webkit-transition: all 0.1s;
| |
| − | }
| |
| − |
| |
| − | .action-button{
| |
| − | position: relative;
| |
| − | padding: 10px 40px;
| |
| − | margin: 0px 10px 10px 0px;
| |
| − | float: right;
| |
| − | margin-right: 20px;
| |
| − | margin-bottom: 20px;
| |
| − | margin-bottom: 20px;
| |
| − | margin-right: 20px;
| |
| − | border-radius: 10px;
| |
| − | font-family: 'Pacifico', cursive;
| |
| − | font-size: 25px;
| |
| − | color: #FFF;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .blue:hover{
| |
| − | background-color: #46a3ff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .blue{
| |
| − | background-color: #3498DB;
| |
| − | border-bottom: 5px solid #2980B9;
| |
| − | text-shadow: 0px -2px #2980B9;
| |
| − | }
| |
| − |
| |
| − | /* The card */
| |
| − | .card {
| |
| − | position: relative;
| |
| − | height: 400px;
| |
| − | width: 900px;
| |
| − | margin: 200px auto;
| |
| − | background-color: #FFF;
| |
| − | -webkit-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
| |
| − | -moz-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
| |
| − | box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
| |
| − | }
| |
| − |
| |
| − | /* Image on the left side */
| |
| − | .thumbnail {
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | left: 30px;
| |
| − | top: -100px;
| |
| − | height: 400px;
| |
| − | width: 400px;
| |
| − | }
| |
| − |
| |
| − | /*object-fit: cover; */
| |
| − | /*object-position: center; */
| |
| − | img.left {
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | border-radius: 3px;
| |
| − | height: 300px;
| |
| − | width: 400px;
| |
| − | -webkit-transform: translate(-50%, -50%);
| |
| − | -ms-transform: translate(-50%, -50%);
| |
| − | transform: translate(-50%, -50%);
| |
| − | }
| |
| − |
| |
| − | /* Right side of the card */
| |
| − | .right {
| |
| − | margin-left: 450px;
| |
| − | margin-right: 20px;
| |
| − | margin-top: 20px;
| |
| − | position: absolute;
| |
| − | }
| |
| − |
| |
| − | #cardtext {
| |
| − | text-align: justify;
| |
| − | font-size: 1.3rem;
| |
| − | line-height: 150%;
| |
| − | color: #4B4B4B;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* DATE of release */
| |
| − | h9 {
| |
| − | color: #bebebe;
| |
| − | font-weight:bold;
| |
| − | position: absolute;
| |
| − | left: 50px;
| |
| − | bottom: 90px;
| |
| − | font-size: 4.0rem;
| |
| − | }
| |
| − |
| |
| − | h6 {
| |
| − | color: #bebebe;
| |
| − | font-weight:bold;
| |
| − | position: absolute;
| |
| − | left: 32px;
| |
| − | bottom: 10px;
| |
| − | font-size: 2.2rem;
| |
| − | }
| |
| − |
| |
| − | /* paragraph content*/
| |
| − | h10 {
| |
| − | color: white;
| |
| − | font-size: 1.4rem;
| |
| − | line-height: 150%;
| |
| − | }
| |
| − |
| |
| − | .navbar {
| |
| − | padding-top: 10px;
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − | .navbar-brand {
| |
| − | font-size: 30px;
| |
| − | }
| |
| − | .nav-link {
| |
| − | font-size: 20px;
| |
| − | }
| |
| − | a.dropdown-item {
| |
| − | color: #4F7F52;
| |
| − | }
| |
| − | a.dropdown-item:active {
| |
| − | background-color: #4F7F52;
| |
| − | }
| |
| − | .caret {
| |
| − | display: inline-block;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | margin-left: 2px;
| |
| − | vertical-align: middle;
| |
| − | border-top: 4px solid;
| |
| − | border-right: 4px solid transparent;
| |
| − | border-left: 4px solid transparent;
| |
| − | }
| |
| − | /*滑到navbar就展開*/
| |
| − | .dropdown-menu li:hover .sub-menu {visibility: visible;}
| |
| − | .dropdown:hover .dropdown-menu {display: block;}
| |
| − |
| |
| − | .head {
| |
| − | color: white;
| |
| − | width: 70%;
| |
| − | font-size: 50px;
| |
| − | font-weight: 700;
| |
| − | border-bottom: 10px solid #7ae26f !important;
| |
| − | position: relative;
| |
| − | margin-top: 100px;
| |
| − | }
| |
| − | .container.content {
| |
| − | margin-top: 80px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 992px) {
| |
| − | .navbar {
| |
| − | padding-left: 80px;
| |
| − | padding-right: 80px;
| |
| − | }
| |
| − | }
| |
| − | @media (max-width: 768px) {
| |
| − | .navbar-right form {
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| − | @media (max-width: 568px) {
| |
| − | footer {
| |
| − | text-align: center;
| |
| − | }
| |
| − | .list-group {
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*folded-corner*/
| |
| − | .post {
| |
| − | position: relative;
| |
| − | }
| |
| − | .folded-corner {
| |
| − | position: absolute;
| |
| − | bottom: 0px;
| |
| − | right: 0px;
| |
| − | border-width: 0;
| |
| − | border-style: solid;
| |
| − | background: hsla(260,100%,100%,0.2);
| |
| − | box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
| |
| − | border-radius: 15px 0 0 0;
| |
| − | border-color: transparent #B9DEBB transparent transparent;
| |
| − | transition: border-width 0.2s ease-out;
| |
| − | }
| |
| − | .post:hover .folded-corner {
| |
| − | border-width: 40px 40px 0 0;
| |
| − | }
| |
| − | .photo .folded-corner {
| |
| − | background: hsla(260,5%,75%,0.5);
| |
| − | }
| |
| − |
| |
| − | [class*="col-"] {
| |
| − | float: left;
| |
| − | padding: 13px;
| |
| − | }
| |
| − | a.list-group-item:visited {
| |
| − | color: white;
| |
| − | }
| |
| − | a:hover {
| |
| − | background-color: transparent;
| |
| − | }
| |
| − | .list-group {
| |
| − | margin-top: 100px;
| |
| − | }
| |
| − | .col-2.side {
| |
| − | padding: 0;
| |
| − | }
| |
| − | .list-group-item {
| |
| − | padding: .55rem .35rem;
| |
| − | background-color: #272625;
| |
| − | color: white;
| |
| − | border: none;
| |
| − | font-size: 19px;
| |
| − | }
| |
| − | a.list-group-item.list-group-item-action {
| |
| − | background-color: transparent;
| |
| − | }
| |
| − | a.list-group-item.list-group-item-action:hover {
| |
| − | color: #98CC9B;
| |
| − | }
| |
| − | a.list-group-item.list-group-item-action.active {
| |
| − | background-color: transparent;
| |
| − | color: #7ae26f;
| |
| − | }
| |
| − | .scrollspy-example h4{
| |
| − | font-size: 2rem;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | img.contentimg {
| |
| − | width: 100%;
| |
| − | margin: 20px 0;
| |
| − | }
| |
| − | a.link {
| |
| − | font-size: 30px;
| |
| − | color: #4F7F52;
| |
| − | }
| |
| − | #list-item-1 {
| |
| − | padding-top: 0px;
| |
| − | text-align:justify;
| |
| − | }
| |
| − | #list-item-2 {
| |
| − | padding-top: 0px;
| |
| − | text-align:justify;
| |
| − | }
| |
| − | #list-item-3 {
| |
| − | padding-top: 0px;
| |
| − | text-align:justify;
| |
| − | }
| |
| − | #list-item-4 {
| |
| − | padding-top: 0px;
| |
| − | text-align:justify;
| |
| − | }
| |
| − | #list-item-5 {
| |
| − | padding-top: 0px;
| |
| − | text-align:justify;
| |
| − | }
| |
| − | a.reference {
| |
| − | color: #4F7F52;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $(document).ready(function() {
| |
| − | $(window).scroll(function() {
| |
| − | if ($(this).scrollTop() >= 750) {
| |
| − | var position = $("#sidelist").position();
| |
| − | if(position == undefined){}
| |
| − | else{
| |
| − | $('#sidelist').css({"position": "fixed", "top": "145px", "margin-top": "0px"});
| |
| − | }
| |
| − | } else {
| |
| − | $('#sidelist').removeAttr('style');
| |
| − | }
| |
| − | });
| |
| − | $(function(){
| |
| − | $('i.fa-arrow-up').click(function(){
| |
| − | $('html, body').animate({scrollTop:0},600);
| |
| − | return false;
| |
| − | });
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | <script src="https://2017.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&ctype=text/javascript"></script>
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − | {{NCKU_Tainan/footer}}
| |
