Difference between revisions of "Team:Hong Kong UCCKE"

Line 1: Line 1:
{{Hong_Kong_UCCKE/CSS/reset.css}}
+
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}}
{{Hong_Kong_UCCKE/CSS/bootstrap.css}}
+
{{Hong_Kong_UCCKE/CSS/style.css}}
+
{{Hong_Kong_UCCKE/CSS/latofonts.css}}
+
{{Hong_Kong_UCCKE/CSS/font-awesome.css}}
+
{{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}}
+
 
<html>
 
<html>
 
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
 
<link rel="stylesheet" href="https://2016.igem.org/Team:Leiden/libraries/font-awesome-4-6-3/css/font-awesome-min?action=raw&amp;ctype=text/css" type="text/css" />
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<div class="wholehead">
 
<div class="wholehead">
 +
 
</html>
 
</html>
 
{{Hong_Kong_UCCKE/crazyheader}}
 
{{Hong_Kong_UCCKE/crazyheader}}
 
<html>
 
<html>
        <div class="header" id="header">
+
<div class="header" id="header">
            <div class="container">
+
    <div class="container">
  
                <div class="row">
+
        <div class="row">
                    <div class="col-sm-12 header-text">
+
            <div class="col-sm-12 header-text">
                        <div>
+
                <div>
                            <h1>UCCKE Bio Research Team</h1>
+
                    <h1>UCCKE Bio Research Team</h1>
                            <p>offendit malis arbitror appellat o arbitror nisi nam quamquam illustriora do se appellat praetermissum.</p>
+
                    <p>offendit malis arbitror appellat o arbitror nisi nam quamquam illustriora do se appellat praetermissum.</p>
                        </div>
+
                    </div>
+
                    <div class="col-sm-12" style="text-align:center;">
+
                        <a href="#proabs" class="no-text-dec">
+
                            <i class="fa fa-angle-down header-down" aria-hidden="true" style="font-size:40px; margin-bottom:10px;"></i>
+
                        </a>
+
                    </div>
+
 
                 </div>
 
                 </div>
 
+
            </div>
 +
            <div class="col-sm-12" style="text-align:center;">
 +
                <a href="#proabs" class="no-text-dec">
 +
                    <i class="fa fa-angle-down header-down" aria-hidden="true" style="font-size:40px; margin-bottom:10px;"></i>
 +
                </a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
 
     </div>
 
     </div>
    <div class="proabs" id="proabs">
+
</div>
        <div class="container">
+
</div>
            <div class="row">
+
<div class="proabs" id="proabs">
                <div class="col-sm-6 col-xs-6">
+
    <div class="container">
                    <div class="videowrapper">
+
        <div class="row">
                        <iframe src="https://www.youtube.com/embed/Vvrn4imd5v0" frameborder="0" allowfullscreen></iframe>
+
            <div class="col-sm-6 col-xs-6">
                    </div>
+
                <div class="videowrapper">
 +
                    <iframe src="https://www.youtube.com/embed/Vvrn4imd5v0" frameborder="0" allowfullscreen></iframe>
 
                 </div>
 
                 </div>
                <div class="col-sm-6 col-xs-6" style="height:100%;">
 
                    <h2>Project Abstract</h2>
 
                    <p>Legam hic mandaremus, ut ullamco tractavissent. Magna cernantur aut despicationes est in esse fore sunt nostrud. Dolor mandaremus qui laboris. Anim non e enim occaecat, est veniam mandaremus doctrina, nostrud magna ubi laboris concursionibus sed pariatur illum noster cupidatat esse, qui enim pariatur arbitrantur non ita malis comprehenderit.</p>
 
                    <a href="#" class="proabs-btn">Read More</a></div>
 
 
             </div>
 
             </div>
 +
            <div class="col-sm-6 col-xs-6" style="height:100%;">
 +
                <h2>Project Abstract</h2>
 +
                <p>Legam hic mandaremus, ut ullamco tractavissent. Magna cernantur aut despicationes est in esse fore sunt nostrud. Dolor mandaremus qui laboris. Anim non e enim occaecat, est veniam mandaremus doctrina, nostrud magna ubi laboris concursionibus sed pariatur illum noster cupidatat esse, qui enim pariatur arbitrantur non ita malis comprehenderit.</p>
 +
                <a href="#" class="proabs-btn">Read More</a></div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
     <div class="golinks" id="golinks">
+
</div>
        <div class="container">
+
<style>
            <div class="row">
+
     .golinksicon {
                <div class="col-xs-6 col-sm-4 col-md-4">
+
        font-size: 70px;
                    <div class="golinksbox"><i class="fa fa-map-signs" aria-hidden="true"></i>
+
        margin-top: 15px;
                        <h4>Tour</h4>
+
        margin-bottom: 15px;
                        <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
        color: #5379d0;
                        <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
    }
                    </div>
+
</style>
 +
<div class="golinks" id="golinks">
 +
    <div class="container">
 +
        <div class="row">
 +
            <div class="col-xs-6 col-sm-4 col-md-4">
 +
                <div class="golinksbox"><i class="golinksicon fa fa-map-signs" aria-hidden="true"></i>
 +
                    <h4>Tour</h4>
 +
                    <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
 +
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
 
                 </div>
 
                 </div>
                <div class="col-xs-6 col-sm-4 col-md-4">
+
            </div>
                    <div class="golinksbox"><img class="golinksimg" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">
+
            <div class="col-xs-6 col-sm-4 col-md-4">
                        <h4>Our Project</h4>
+
                <div class="golinksbox"><i class="fa fa-pencil" aria-hidden="true"></i>
                        <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                    <h4>Our Project</h4>
                        <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                    <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
                    </div>
+
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
 
                 </div>
 
                 </div>
                <div class="col-xs-6 col-sm-4 col-md-4">
+
            </div>
                    <div class="golinksbox"><img class="golinksimg" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">
+
            <div class="col-xs-6 col-sm-4 col-md-4">
                        <h4>Notebook</h4>
+
                <div class="golinksbox"><i class="golinksicon fa fa-book" aria-hidden="true"></i>
                        <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                    <h4>Notebook</h4>
                        <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                    <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
                    </div>
+
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
 
                 </div>
 
                 </div>
                <div class="col-xs-6 col-sm-4 col-md-4">
+
            </div>
                    <div class="golinksbox"><img class="golinksimg" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">
+
            <div class="col-xs-6 col-sm-4 col-md-4">
                        <h4>Parts</h4>
+
                <div class="golinksbox"><i class="fa fa-list" aria-hidden="true"></i>
                        <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                    <h4>Parts</h4>
                        <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                    <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
                    </div>
+
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
 
                 </div>
 
                 </div>
                <div class="col-xs-6 col-sm-4 col-md-4">
+
            </div>
                    <div class="golinksbox"><img class="golinksimg" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">
+
            <div class="col-xs-6 col-sm-4 col-md-4">
                        <h4>Our team</h4>
+
                <div class="golinksbox"><i class="golinksicon fa fa-users" aria-hidden="true"></i>
                        <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                    <h4>Our team</h4>
                        <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                    <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
                    </div>
+
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
 
                 </div>
 
                 </div>
                <div class="col-xs-6 col-sm-4 col-md-4">
+
            </div>
                    <div class="golinksbox"><img class="golinksimg" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg">
+
            <div class="col-xs-6 col-sm-4 col-md-4">
                        <h4>Safety</h4>
+
                <div class="golinksbox"><i class="golinksicon fa fa-heartbeat" aria-hidden="true"></i>
                        <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                    <h4>Safety</h4>
                        <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                    <p>Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
                    </div>
+
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
    <div class="thankspon" id="thankspon">
+
</div>
        <div class="container">
+
<div class="thankspon" id="thankspon">
            <div class="row">
+
    <div class="container">
                <div class="col-xs-12">
+
        <div class="row">
                    <h2>Thanks...</h2>
+
            <div class="col-xs-12">
                    <p>We would like to thank the following associations for helping or sponsoring us during our project.</p>
+
                <h2>Thanks...</h2>
 +
                <p>We would like to thank the following associations for helping or sponsoring us during our project.</p>
  
  
  
                    <div class="jcarousel-wrapper">
+
                <div class="jcarousel-wrapper">
                        <div class="jcarousel">
+
                    <div class="jcarousel">
                            <ul>
+
                        <ul>
                                <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 1"></li>
+
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 1"></li>
                                <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 2"></li>
+
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 2"></li>
                                <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 3"></li>
+
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 3"></li>
                                <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 4"></li>
+
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 4"></li>
                                <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 5"></li>
+
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 5"></li>
                                <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 6"></li>
+
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 6"></li>
                            </ul>
+
                        </ul>
                        </div>
+
 
+
                        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+
                        <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+
 
+
                        <p class="jcarousel-pagination"></p>
+
 
                     </div>
 
                     </div>
  
 +
                    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
 +
                    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
 +
 +
                    <p class="jcarousel-pagination"></p>
 
                 </div>
 
                 </div>
  
 
             </div>
 
             </div>
 +
 
         </div>
 
         </div>
 
     </div>
 
     </div>
    </html>
+
</div>
{{Hong_Kong_UCCKE/heyfooter}}
+
 
{{Hong_Kong_UCCKE/illbeback}}
+
</html>
 +
{{Hong_Kong_UCCKE/heyfooter}} {{Hong_Kong_UCCKE/illbeback}}

Revision as of 03:09, 15 August 2016

Project Abstract

Legam hic mandaremus, ut ullamco tractavissent. Magna cernantur aut despicationes est in esse fore sunt nostrud. Dolor mandaremus qui laboris. Anim non e enim occaecat, est veniam mandaremus doctrina, nostrud magna ubi laboris concursionibus sed pariatur illum noster cupidatat esse, qui enim pariatur arbitrantur non ita malis comprehenderit.

Read More

Thanks...

We would like to thank the following associations for helping or sponsoring us during our project.