Difference between revisions of "Team:NCKU Tainan/Integrated Human Practices"

Line 9: Line 9:
 
<body data-spy="scroll" data-target=".navbar-example">
 
<body data-spy="scroll" data-target=".navbar-example">
  
      <header>
+
    <header>
          <div class="carousel-inner" role="listbox">
+
        <div class="carousel-inner" role="listbox">
 
             <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
 
             <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
 
             </div>
 
             </div>
      </div>
+
        </div>
      </header>
+
    </header>
  
 
     <div class="container content">
 
     <div class="container content">
Line 23: Line 23:
 
                     <div id="sidelist" class="list-Fgroup">
 
                     <div id="sidelist" class="list-Fgroup">
 
                         <a class="list-group-item list-group-item-action" href="#list-item-1">Professor</a>
 
                         <a class="list-group-item list-group-item-action" href="#list-item-1">Professor</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-2">Meet up</a>
                         <a class="list-group-item list-group-item-action" href="#list-item-3">Cooperation Vist</a>
+
                         <a class="list-group-item list-group-item-action" href="#list-item-3">Enterprise Visit</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="#list-item-5">Meet Up</a>
+
                        <a class="list-group-item list-group-item-action" href="#list-item-6">Event list(待訂)</a>
+
 
                         <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
 
                         <a class="list-group-item list-group-item-action" href="#"><i class="fa fa-arrow-up fa-1x"
 
                                 aria-hidden="true"></i></a>
 
                                 aria-hidden="true"></i></a>
Line 36: Line 33:
 
                         <div class="container">
 
                         <div class="container">
 
                             <div id="list-item-1">
 
                             <div id="list-item-1">
 +
 
                                 <h3>Professor</h3>
 
                                 <h3>Professor</h3>
                                 <h10>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in arcu tincidunt,
+
                                 <h10>In order to complete our project, there are lots of theoretical knowledge we have
                                     finibus lectus sit amet, rhoncus erat. Nulla pretium eget est vel vehicula. In ut
+
                                     to understand first. Apart from devoting ourselves to researching a large number of
                                     urna
+
                                     paper, the most direct and fastest way is to go to visit professors in related
                                    elit. Donec bibendum urna non turpis cursus rhoncus. Quisque ac augue elit. Class
+
                                     fields of expertise to gain their suggestion. In addition, each of professor has
                                    aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+
                                     their specialty respectively, so accepting opinion from different professional
                                     himenaeos.
+
                                     field makes our project more comprehensive.</h10>
                                    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>
  
 
                             <div id="list-item-2">
 
                             <div id="list-item-2">
                              <div class="card">
+
 
                                    <div class="thumbnail">
+
                                <h3>Meet up</h3>
                                        <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
+
                                <h10>“A Joy Shared Is a Joy Tripled” When we met up with other iGEMers to share our
                                    </div>
+
                                     projects and the difficulties we encountered with each other we enjoyed the process
                                     <div class="right">
+
                                    and often caused resonance. What's more, we could inspire more idea and find the
                                        <h1>Meetup with Tec Chihuahua</h1>
+
                                    possibility of cooperation. </h10>
                                        <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 class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"><a>Read More</a></div>
+
                                </div>
+
  
 
                                 <div class="card">
 
                                 <div class="card">
 
                                     <div class="thumbnail">
 
                                     <div class="thumbnail">
                                         <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
+
                                         <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png"
 +
                                            class="left">
 
                                     </div>
 
                                     </div>
 
                                     <div class="right">
 
                                     <div class="right">
Line 82: Line 67:
 
                                     <h9>9</h9>
 
                                     <h9>9</h9>
 
                                     <h6>JULY</h6>
 
                                     <h6>JULY</h6>
                                     <div><a>Read More</a></div>
+
                                     <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                        data-target="#exampleModalLong"><a>Read More</a></div>
 
                                 </div>
 
                                 </div>
 +
 +
                            </div>
 +
 +
 +
                            <div id="list-item-3">
 +
 +
                                <h3>Enterprise Visit</h3>
 +
                                <h10>“Put our project in practice”  is always our final goal. Therefore, we visited the China Steel Corporation, which is the second biggest carbon emission factory in our country,  to gained the truth opinion from our future potential users. In addition, we also visit the AN-NAN campus of NCKU to learn their experience from  research to practice. Including the cost calculation, evaluation and benefit analysis, etc.</h10>
 +
 
                                 <div class="card">
 
                                 <div class="card">
 
                                     <div class="thumbnail">
 
                                     <div class="thumbnail">
                                         <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png" class="left">
+
                                         <img src="https://static.igem.org/mediawiki/2018/6/61/T--NCKU_Tainan--attribution_president.png"
 +
                                            class="left">
 
                                     </div>
 
                                     </div>
 
                                     <div class="right">
 
                                     <div class="right">
Line 98: Line 94:
 
                                     <h9>9</h9>
 
                                     <h9>9</h9>
 
                                     <h6>JULY</h6>
 
                                     <h6>JULY</h6>
                                     <div><a>Read More</a></div>
+
                                     <div class="blue action-button" type="button" class="btn btn-primary" data-toggle="modal"
 +
                                        data-target="#exampleModalLong"><a>Read More</a></div>
 +
 
 +
 
 
                                 </div>
 
                                 </div>
                            </div>
 
  
                            <div id="list-item-3">
+
 
                               
+
 
                             </div>
 
                             </div>
 
 
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 112: Line 107:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
    </div>
 
  
  
<!-- Modal -->
+
        <!-- Modal -->
  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
+
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
    aria-hidden="true">
+
            aria-hidden="true">
    <div class="modal-dialog" role="document">
+
            <div class="modal-dialog" role="document">
      <div class="modal-content">
+
                <div class="modal-content">
        <div class="modal-header">
+
                    <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+
                        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
+
                            <span aria-hidden="true">&times;</span>
          </button>
+
                        </button>
        </div>
+
                    </div>
        <div class="modal-body">
+
                    <div class="modal-body">
          <p class="hpcontent">Nullam hendrerit ipsum a commodo aliquet. Curabitur sem metus, ornare ut gravida eu, sagittis rutrum massa. Phasellus id sem sed justo convallis pharetra ut tristique ipsum. Ut facilisis leo risus, vitae sollicitudin massa ornare sit amet. Aliquam varius venenatis massa, sed finibus urna tempor a. Integer viverra tortor purus. Cras eget elit vitae nunc iaculis sagittis id ac nibh. Donec in congue nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In facilisis feugiat nunc, bibendum finibus nulla. Curabitur auctor nec ligula ac cursus. Nulla a ornare lacus. Cras vestibulum fringilla congue. Duis quis placerat ipsum, eget aliquet magna. Nunc at justo at enim posuere commodo.</p>
+
                        <p class="hpcontent">Nullam hendrerit ipsum a commodo aliquet. Curabitur sem metus, ornare ut
 +
                            gravida eu, sagittis rutrum massa. Phasellus id sem sed justo convallis pharetra ut
 +
                            tristique
 +
                            ipsum. Ut facilisis leo risus, vitae sollicitudin massa ornare sit amet. Aliquam varius
 +
                            venenatis massa, sed finibus urna tempor a. Integer viverra tortor purus. Cras eget elit
 +
                            vitae
 +
                            nunc iaculis sagittis id ac nibh. Donec in congue nisi. Vestibulum ante ipsum primis in
 +
                            faucibus orci luctus et ultrices posuere cubilia Curae; In facilisis feugiat nunc, bibendum
 +
                            finibus nulla. Curabitur auctor nec ligula ac cursus. Nulla a ornare lacus. Cras vestibulum
 +
                            fringilla congue. Duis quis placerat ipsum, eget aliquet magna. Nunc at justo at enim
 +
                            posuere
 +
                            commodo.</p>
  
          <p class="hpcontent">Nullam hendrerit ipsum a commodo aliquet. Curabitur sem metus, ornare ut gravida eu, sagittis rutrum massa. Phasellus id sem sed justo convallis pharetra ut tristique ipsum. Ut facilisis leo risus, vitae sollicitudin massa ornare sit amet. Aliquam varius venenatis massa, sed finibus urna tempor a. Integer viverra tortor purus. Cras eget elit vitae nunc iaculis sagittis id ac nibh. Donec in congue nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In facilisis feugiat nunc, bibendum finibus nulla. Curabitur auctor nec ligula ac cursus. Nulla a ornare lacus. Cras vestibulum fringilla congue. Duis quis placerat ipsum, eget aliquet magna. Nunc at justo at enim posuere commodo.</p>
+
                        <p class="hpcontent">Nullam hendrerit ipsum a commodo aliquet. Curabitur sem metus, ornare ut
 +
                            gravida eu, sagittis rutrum massa. Phasellus id sem sed justo convallis pharetra ut
 +
                            tristique
 +
                            ipsum. Ut facilisis leo risus, vitae sollicitudin massa ornare sit amet. Aliquam varius
 +
                            venenatis massa, sed finibus urna tempor a. Integer viverra tortor purus. Cras eget elit
 +
                            vitae
 +
                            nunc iaculis sagittis id ac nibh. Donec in congue nisi. Vestibulum ante ipsum primis in
 +
                            faucibus orci luctus et ultrices posuere cubilia Curae; In facilisis feugiat nunc, bibendum
 +
                            finibus nulla. Curabitur auctor nec ligula ac cursus. Nulla a ornare lacus. Cras vestibulum
 +
                            fringilla congue. Duis quis placerat ipsum, eget aliquet magna. Nunc at justo at enim
 +
                            posuere
 +
                            commodo.</p>
 +
                    </div>
 +
                </div>
 +
            </div>
 
         </div>
 
         </div>
      </div>     
 
    </div>
 
  </div>
 
 
<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>
 +
            $(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&amp;ctype=text/javascript"></script>
+
        <script src="https://2017.igem.org/Team:NCKU_Tainan/js/frame/T--NCKU_Tainan--jquery-1_12_4_min_js?action=raw&amp;ctype=text/javascript"></script>
    <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
+
        <script src="https://2018.igem.org/Template:NCKU_Tainan/js/bootstrap_min_js?action=raw&amp;ctype=text/javascript"></script>
  
 
</body>
 
</body>

Revision as of 02:58, 22 September 2018

Integrated Human Practices

Follow us

Contact us

igem.ncku.tainan@gmail.com
No.1, Daxue Rd., East Dist., Tainan City 701, Taiwan (R.O.C.)