Difference between revisions of "File:Hexagon visual.png"

 
Line 1: Line 1:
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>iGEM SCUt-Champion-Park</title>
 +
        <link rel="stylesheet" type="text/css" href="css/index.css">
 +
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
 +
<style type="text/css">
 +
body {
 +
background-color: #1b1f37;
 +
margin: 0;
 +
padding: 0;
 +
text-align: center;
 +
font-size: 62.5%;
 +
font-family: Helvetica;
 +
}
 +
a {
 +
text-decoration: none;
 +
}
 +
table {
 +
margin: 0;
 +
padding: 0;
 +
border: none;
 +
border-spacing: 0;
 +
}
 +
.clear {
 +
clear: both;
 +
}
 +
.header {
 +
position: relative;
 +
margin: 0 auto;
 +
}
 +
.banner {
 +
margin: 0 auto;
 +
min-height: 600px;
 +
width: 100%;
 +
background: url("../resources/igem_header_image.png") no-repeat ;
 +
background-size: 100%;
 +
}
 +
.igem_logo {
 +
position: absolute;
 +
left: 10%;
 +
width: 105px;
 +
height: 141px;
 +
background: url("../resources/igem_logo.png") no-repeat ;
 +
}
 +
.team_logo {
 +
margin: 0 auto;
 +
width: 257px;
 +
height: 240px;
 +
background: url("../resources/team_logo.png") no-repeat ;
 +
}
 +
.menu_left {
 +
float: left;
 +
margin-top: 99px;
 +
height: 42px;
 +
width: 8%;
 +
line-height: 42px;
 +
background-color: #000000;
 +
filter:alpha(opacity=75); 
 +
    -moz-opacity:0.75; 
 +
    -khtml-opacity: 0.75; 
 +
    opacity: 0.75;
 +
}
 +
.menu_right {
 +
float: right;
 +
margin-top: 99px;
 +
height: 42px;
 +
width: 80%;
 +
line-height: 42px;
 +
background-color: #000000;
 +
filter:alpha(opacity=75); 
 +
    -moz-opacity:0.75; 
 +
    -khtml-opacity: 0.75; 
 +
    opacity: 0.75;
 +
    z-index: 333;
 +
    position: relative;
 +
}
 +
.menu-bar {
 +
margin-right: 20px;
 +
}
 +
.menu-table {
 +
margin: 0 auto;
 +
}
 +
.menu-table td {
 +
vertical-align: top;
 +
}
 +
.menu-table td span{
 +
color: #1cc9f1;
 +
  display: inline-block;
 +
  font-size: 1.3em;
 +
  font-weight: bold;
 +
  height: 32px;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
.menu-table td p:hover {
 +
cursor: pointer;
 +
}
 +
.menu-list {
 +
margin:-4px 0 0 0;
 +
padding: 0;
 +
list-style: none;
 +
display: none;
 +
}
 +
.menu-list li {
 +
text-align: center;
 +
line-height: 20px;
 +
margin-bottom: 2px;
 +
color: #1b1f3a;
 +
background-color: #a4e9f9;
 +
font-size: 1.2em;
 +
z-index: 333;
 +
}
 +
.menu-list li:hover{
 +
color: #77dff7;
 +
background-color: #1b1f3a;
 +
cursor: pointer;
 +
}
  
 +
/* ----黑色遮罩层----- */
 +
.container-decorator {
 +
min-height: 345px;
 +
margin: 0 auto;
 +
}
 +
.container-decorator-shade {
 +
position: relative;
 +
left: 50%;
 +
margin-left: -512px;
 +
width: 1024px;
 +
height: 206px;
 +
background: url("../resources/container_shade.png") no-repeat;
 +
background-size: 100%;
 +
z-index: 0;
 +
}
 +
.container-decorator-content {
 +
position: relative;
 +
left: 50%;
 +
margin-left: -512px;
 +
width: 1024px;
 +
min-height: 587px;
 +
background-color: #000000;
 +
z-index: 0;
 +
 +
filter:alpha(opacity=60); 
 +
    -moz-opacity:0.60; 
 +
    -khtml-opacity: 0.60; 
 +
    opacity: 0.60;
 +
 +
    border-bottom-left-radius: 7px;
 +
    -moz-border-bottom-left-radius: 7px;
 +
    -webkit-border-bottom-left-radius: 7px;
 +
    border-bottom-right-radius: 7px;
 +
    -moz-border-bottom-right-radius: 7px;
 +
    -webkit-border-bottom-right-radius: 7px;
 +
 +
}
 +
/* ----黑色遮罩层----- */
 +
 +
/* ----主要内容部分----- */
 +
.content-container {
 +
margin: 0 auto;
 +
font-family: "Microsoft YaHei"  !important;
 +
text-align: center;
 +
z-index: 666;
 +
}
 +
.main-container {
 +
position: relative;
 +
left: 50%;
 +
margin-left: -512px;
 +
width: 1024px;
 +
min-height: 818px;
 +
}
 +
.content {
 +
padding: 0px;
 +
}
 +
 +
/* ----主要内容部分----- */
 +
 +
.footer {
 +
min-height: 200px;
 +
width: 100%;
 +
background: url("../resources/igem_footer_image.png") no-repeat ;
 +
background-size: 100% 100%;
 +
font-family: "Microsoft YaHei"  !important;
 +
}
 +
.team_info {
 +
padding-top: 44px;
 +
color: #ffffff;
 +
filter:alpha(opacity=24); 
 +
    -moz-opacity:0.24; 
 +
    -khtml-opacity: 0.24; 
 +
    opacity: 0.24;
 +
}
 +
 +
 +
.region{
 +
padding:15px;
 +
}
 +
p{
 +
font-size:13px;
 +
color:white;
 +
float:left;
 +
text-align:justify;
 +
}
 +
#identity{
 +
height:1300px;
 +
}
 +
.h3title{
 +
font-size:16px;
 +
line-height:8px;
 +
color:#1ba7cb;
 +
text-align:left;
 +
padding-top:15px;
 +
}
 +
.inner-region{
 +
width:900px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
.subregion{
 +
float:left;
 +
}
 +
.flag_text{
 +
width:595px;
 +
margin-left:40px;
 +
padding-top:40px;
 +
}
 +
.uniform_text{
 +
width:590px;
 +
margin-right:40px;
 +
padding-top:40px;
 +
}     
 +
        </style>
 +
<script type="text/javascript">
 +
function setElementSize() { //动态设置各元素尺寸
 +
var doc_width = $(document).width();
 +
var header_width = doc_width * 0.4887;
 +
var footer_width = doc_width * 0.1541;
 +
 +
$(".banner").css('min-height', header_width); //设置header背景图片高度
 +
$(".footer").css('min-height', footer_width); //设置footer背景图片高度
 +
$(".container-decorator").css('margin-top', -(header_width-175)); //设置遮罩层高度
 +
$(".container-decorator-content ").css('height', $(".content-container").height()-206); //设置主遮罩层宽度
 +
$(".content-container").css('margin-top', -$(".container-decorator").height()); //设置main-container高度
 +
}
 +
 +
$(function($) {
 +
setElementSize();
 +
 +
/*  下拉菜单 */
 +
$(".menu-table td").bind("mouseover", function() {
 +
$(this).children(".menu-list").slideDown();
 +
});
 +
$(".menu-table td").bind("mouseleave", function() {
 +
$(this).children(".menu-list").slideUp();
 +
});
 +
 +
/* 菜单点击事件 */
 +
$(".menu-list li").bind('click', function() {
 +
$(".menu-tag").css('border-bottom', 'none'); //清除所有下划线
 +
$(this).parent().siblings('.menu-tag').css('border-bottom', '3px solid #a4e9f9'); //在对应父菜单条目下添加下划线
 +
 +
var li_obj = $(this);
 +
var url = './' + $(this).attr('url'); //获取页面url
 +
$.ajax({
 +
url: url,
 +
type: 'GET',
 +
success:  function(html){
 +
$(".content").html(html);
 +
}
 +
 +
})
 +
.done(function() {
 +
console.log("success");
 +
 +
})
 +
.fail(function() {
 +
console.log("error");
 +
})
 +
.always(function() {
 +
console.log("complete");
 +
});
 +
});
 +
});
 +
</script>
 +
</head>
 +
 +
<body>
 +
        <div class="container">
 +
          <div class="header">
 +
            <!-- <img src="./resources/igem_header_image.png" width="100%" height="100%"/> -->
 +
            <div class="banner">
 +
              <div class="clear"> </div>
 +
              <div class="menu">
 +
                <div class="menu_left"></div>
 +
                <div class="menu_right">
 +
                  <div class="menu-bar">
 +
                    <table class="menu-table">
 +
                      <tbody>
 +
                        <tr>
 +
                          <td style="width:60px"><span class="menu-tag" href="#"> HOME </span>
 +
                            </ul></td>
 +
                          <td style="width:90px"><span class="menu-tag"> PROJECT </span>
 +
                            <ul class="menu-list">
 +
                              <li> Over View </li>
 +
                            </ul></td>
 +
                          <td style="width:115px"><span class="menu-tag"> ACHIEVEMENT </span>
 +
                            <ul class="menu-list">
 +
                              <li> Results </li>
 +
                              <li> Judging Form </li>
 +
                              <li> Financing </li>
 +
                            </ul></td>
 +
                          <td style="width:152px"><span class="menu-tag"> POCLICY &amp; PRACTICES </span>
 +
                            <ul class="menu-list">
 +
                              <li> Over View </li>
 +
                              <li> Meet Ups </li>
 +
                            </ul></td>
 +
                          <td style="width:86px"><span class="menu-tag"> TEAM </span>
 +
                            <ul class="menu-list">
 +
                              <li url="team_member.html"> Team Member </li>
 +
                              <li> Attributions </li>
 +
                              <li url="contact_us.html"> Contact Us </li>
 +
                              <li style="line-height:14px"> Offical</br>
 +
                                Team Profile </li>
 +
                              <li> Acknowledgement </li>
 +
                            </ul></td>
 +
                          <td style="width:153px"><span class="menu-tag"> SAFETY &amp; PROTOCOLS </span>
 +
                            <ul class="menu-list">
 +
                              <li> Safety </li>
 +
                              <li> Protocols </li>
 +
                            </ul></td>
 +
                        </tr>
 +
                      </tbody>
 +
                    </table>
 +
                  </div>
 +
                </div>
 +
              </div>
 +
              <div class="igem_logo"></div>
 +
              <div class="team_logo"></div>
 +
              <div class="clear"> </div>
 +
            </div>
 +
          </div>
 +
         
 +
          <!---        黑色遮罩层      -->
 +
          <div class="container-decorator">
 +
            <div class="container-decorator-shade"></div>
 +
            <div class="container-decorator-content"></div>
 +
          </div>
 +
          <!---        黑色遮罩层      -->
 +
         
 +
          <div class="content-container">
 +
            <div class="main-container">
 +
              <div class="content">
 +
              <div id="identity" class="inner-region">
 +
<div class="region clear">
 +
                <div class="h3title">Team Identity</div>
 +
                <p class="clear">We are SCUT Champion Park. Our team spirit is efficient and happy. In order to show the spirit and personality of our team, our designers have designed our own Team Identity.</p>
 +
                </div>
 +
                   
 +
                    <div class="region clear">
 +
                    <img src="resources/hexagon_flag.png" class="subregion" />
 +
                        <div class="flag_text subregion">
 +
                    <div class="h3title">Team Flag</div>
 +
                      <p class="clear">The middle is our team logo. Our logo is a distortion of tetracycline, and combined with the first letter of our school name’s abbreviation.<br/>
 +
The color of home flag is the same blue as South China University of Technology's school badge, on behalf of passion and brave. The color of away flag is white which represents the exploring spirit of academic research.</p>
 +
</div>
 +
                    </div>
 +
               
 +
                <div class="region clear">                 
 +
                        <div class="uniform_text subregion">
 +
                    <div class="h3title">Team Uniform</div>
 +
                      <p class="clear">Our team uniform is a white long sleeve. The front logo combines the tetracycline and school English initials S, not only showing the scientific nature of biochemical research, but also highlighting the school name. The color, the same as our school’s badge, reflects the characteristics of calm. The back pattern is made of fluorescent material, passing out the modern sense.</p>
 +
</div>
 +
                        <img src="resources/hexagon_uniform.png" class="subregion" />
 +
                    </div>
 +
                   
 +
                    <div class="region clear">
 +
                    <img src="resources/hexagon_bookmark.png" class="subregion" />
 +
                        <div class="flag_text subregion">
 +
                    <div class="h3title">Bookmark</div>
 +
                      <p class="clear">The front of the bookmark is the abbreviation of South China University of Technology as a design element. These four letters combined with biological chemical elements. The color, including red, yellow and blue, is lively, generous and full of vitality. The team logo is on the opposite side making the bookmarks highly conspicuous.</p>
 +
</div>
 +
                    </div>
 +
                   
 +
                    <div class="region clear">                 
 +
                        <div class="uniform_text subregion">
 +
                    <div class="h3title">Visual Identity</div>
 +
                      <p class="clear">Our logo is derived from the molecular formula of tetracycline which is the main element of our experiment.Draw it out to a single regular hexagon as a creative element. The structure of this arrangement of hexagon is called a honeycomb structure. This structure reflects the feasibility and effectiveness of our research. </p>
 +
</div>
 +
                        <img src="resources/hexagon_visual.png" class="subregion" />
 +
                    </div>
 +
                   
 +
</div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
          <div class="footer">
 +
            <div class="team_info"> Team Email: scut-champion-park@hotmail.com <br/>
 +
              <br/>
 +
              Address: School of Bioscience & Bioengineering <br/>
 +
              South China University of Technology, Building B6 Guangzhou<br/>
 +
              Higher Education Mega Centre, Panyu District,<br/>
 +
              Guangzhou, China <br/>
 +
            </div>
 +
          </div>
 +
        </div>
 +
</body>
 +
</html>

Revision as of 13:57, 1 September 2015

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> iGEM SCUt-Champion-Park

Team Identity

We are SCUT Champion Park. Our team spirit is efficient and happy. In order to show the spirit and personality of our team, our designers have designed our own Team Identity.

Team Flag

The middle is our team logo. Our logo is a distortion of tetracycline, and combined with the first letter of our school name’s abbreviation.
The color of home flag is the same blue as South China University of Technology's school badge, on behalf of passion and brave. The color of away flag is white which represents the exploring spirit of academic research.

Team Uniform

Our team uniform is a white long sleeve. The front logo combines the tetracycline and school English initials S, not only showing the scientific nature of biochemical research, but also highlighting the school name. The color, the same as our school’s badge, reflects the characteristics of calm. The back pattern is made of fluorescent material, passing out the modern sense.

Bookmark

The front of the bookmark is the abbreviation of South China University of Technology as a design element. These four letters combined with biological chemical elements. The color, including red, yellow and blue, is lively, generous and full of vitality. The team logo is on the opposite side making the bookmarks highly conspicuous.

Visual Identity

Our logo is derived from the molecular formula of tetracycline which is the main element of our experiment.Draw it out to a single regular hexagon as a creative element. The structure of this arrangement of hexagon is called a honeycomb structure. This structure reflects the feasibility and effectiveness of our research.

Team Email: scut-champion-park@hotmail.com

Address: School of Bioscience & Bioengineering
South China University of Technology, Building B6 Guangzhou
Higher Education Mega Centre, Panyu District,
Guangzhou, China

File history

Click on a date/time to view the file as it appeared at that time.

Date/TimeThumbnailDimensionsUserComment
current13:54, 1 September 2015Thumbnail for version as of 13:54, 1 September 2015198 × 232 (17 KB)Joker (Talk | contribs)

There are no pages that link to this file.