Difference between revisions of "Team:XMU-China/css/home"

 
(39 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
}
 
}
  
 +
@media only screen and (max-width: 1800px)
 +
.igem_2019_team_content {
 +
    width: 100% !important;
 +
}
 +
#content{
 +
    line-height: normal; !important
 +
}
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 18px !important;
 +
}
  
 
html{
 
html{
Line 19: Line 29:
 
}
 
}
  
 +
.igem_2019_team_content
 +
.igem_2019_team_column_wrapper a {
 +
    color: #3e4548;
 +
    font-weight: normal !important;
 +
}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper {
 +
    margin: auto;
 +
    max-width: 1400px;
 +
    width: 100%; !important
 +
}
 
p{
 
p{
 
     color:#1c5a5a;
 
     color:#1c5a5a;
 +
    font-weight:normal；
 
}
 
}
−
 
+
.igem_2019_team_content
−
.bg_main{
+
.igem_2019_team_column_wrapper p {
−
     background-image:url("/Users/zhaishiyi/Downloads/home_bg.png");
+
     font-weight:normal；
−
    background-color: #FFFFFF;
+
−
    background-position:50% 0%;
+
−
    background-size: 100% ;
+
−
    position: absolute;
+
−
    background-repeat: no-repeat;
+
−
    margin:0 auto;
+
−
    width:1300px;
+
−
    height: 100%;
+
 
}
 
}
 +
.igem_2019_team_content
 +
.igem_2019_team_column_wrapper ul,
 +
.igem_2019_team_content
 +
.igem_2019_team_column_wrapper ol {
 +
    padding:0px 0px !important;
 +
}
 +
  
 
.igem_top_bar {
 
.igem_top_bar {
−
     height: 57px;
+
     height: 3.5rem;
 
     width: 100%;
 
     width: 100%;
−
     margin:20px -55px;
+
     margin:18px 0px;
 
     background:rgb(255, 255, 255);
 
     background:rgb(255, 255, 255);
 
     position: fixed;  
 
     position: fixed;  
Line 49: Line 69:
  
 
.igem_top_bar img {
 
.igem_top_bar img {
−
     position:fixed;
+
     position:relative;
 
     height: 50px;
 
     height: 50px;
 
     margin-left: 10px;
 
     margin-left: 10px;
Line 61: Line 81:
 
     display:inline;
 
     display:inline;
 
     position:relative;
 
     position:relative;
−
 
+
    text-align: center;
 
}
 
}
 
.nav ul li a{
 
.nav ul li a{
Line 67: Line 87:
 
     font-family:Arial;
 
     font-family:Arial;
 
     display:block;
 
     display:block;
−
     padding:10px 18px;
+
     padding-top:10px;
 +
    padding-bottom:10px;
 +
    padding-left:18px;
 +
    padding-right:18px;
 
}
 
}
−
.nav li a:hover{
+
.nav ul li a:hover{
−
     color:#FFFFFF;
+
     color: #FFFFFF !important;
−
     background-color: #1c5a5a;
+
     background-color: #1c5a5a !important;
 
}
 
}
 
.nav ul li span{
 
.nav ul li span{
Line 80: Line 103:
 
     position: relative;
 
     position: relative;
 
     display:none;
 
     display:none;
 +
    padding-left:0;
 +
    margin-left:0;
 +
    line-height: 0em !important;
 
}
 
}
 
.nav ul li ul li{
 
.nav ul li ul li{
 
     float:none;
 
     float:none;
 
     text-align: center;
 
     text-align: center;
 +
    padding-left:0;
 +
    padding-right:0;
 +
}
 +
.nav ul li ul li a{
 +
    padding-top:20px;
 +
    padding-bottom:20px;
 
}
 
}
 
.nav ul li:hover ul{
 
.nav ul li:hover ul{
Line 94: Line 126:
 
     font-family: myfont;
 
     font-family: myfont;
 
     src:url('https://static.igem.org/mediawiki/2019/8/89/T--XMU-China--321Perfect.ttf');
 
     src:url('https://static.igem.org/mediawiki/2019/8/89/T--XMU-China--321Perfect.ttf');
 +
}
 +
 +
.main {
 +
    background:none !important;
 +
    background-color: #FFFFFF;
 
}
 
}
  
 
.main_top{
 
.main_top{
 
     position: relative;
 
     position: relative;
−
     padding-top: 20vw;
+
     padding-top: 3vw;
−
     padding-bottom: 40vw;
+
     padding-bottom: 5vw;
 
}
 
}
−
.main .main_top div{
+
.main_top img{
−
     position: relative;
+
     width: 80%;
−
    left:14%;
+
     margin-left: 10%;
−
     font-family: myfont;
+
−
    color:#1c5a5a;
+
−
    font-size: 45px;
+
−
}
+
−
 
+
−
.main .main_top p{
+
−
    position: relative;
+
−
    left:14%;
+
−
    color:#1c5a5a;
+
−
    padding:2rem 0rem;
+
 
}
 
}
  
Line 122: Line 149:
  
 
.project img{
 
.project img{
 +
    z-index: 11 !important;
 
     position: relative;
 
     position: relative;
 
     width: 10rem;
 
     width: 10rem;
Line 136: Line 164:
 
.project div{
 
.project div{
 
     position: relative;
 
     position: relative;
−
     left:-26.5%;
+
     left:10%;
 
     font-family: myfont;
 
     font-family: myfont;
 
     color:#1c5a5a;
 
     color:#1c5a5a;
−
     font-size: 30px;
+
     font-size: 1.875rem;
 +
    text-align: left;
 
}
 
}
  
Line 147: Line 176:
 
     color:#1c5a5a;
 
     color:#1c5a5a;
 
     line-height: 170%;
 
     line-height: 170%;
 +
    font-weight:normal；
 
}
 
}
  
Line 152: Line 182:
 
     position: relative;
 
     position: relative;
 
     width: 10rem;
 
     width: 10rem;
−
     left:72%;
+
     left:32%;
 
     cursor: pointer;
 
     cursor: pointer;
 
     transition: all 0.6s;
 
     transition: all 0.6s;
Line 166: Line 196:
 
     font-family: myfont;
 
     font-family: myfont;
 
     color:#1c5a5a;
 
     color:#1c5a5a;
−
     font-size: 30px;
+
     font-size: 1.875rem;
 +
    text-align: left;
 
}
 
}
 
.modeling p{
 
.modeling p{
Line 173: Line 204:
 
     color:#1c5a5a;
 
     color:#1c5a5a;
 
     line-height: 170%;
 
     line-height: 170%;
 +
    font-weight:normal；
 
}
 
}
  
Line 178: Line 210:
 
     position: relative;
 
     position: relative;
 
     width: 10rem;
 
     width: 10rem;
−
     left:9%;
+
     left:-30%;
 
     cursor: pointer;
 
     cursor: pointer;
 
     transition: all 0.6s;
 
     transition: all 0.6s;
Line 192: Line 224:
 
     font-family: myfont;
 
     font-family: myfont;
 
     color:#1c5a5a;
 
     color:#1c5a5a;
−
     font-size: 30px;
+
     font-size: 1.875rem;
 +
    text-align: left;
 
}
 
}
 
.software p{
 
.software p{
Line 199: Line 232:
 
     color:#1c5a5a;
 
     color:#1c5a5a;
 
     line-height: 170%;
 
     line-height: 170%;
 +
    font-weight:normal；
 
}
 
}
  
Line 206: Line 240:
 
     font-family: myfont;
 
     font-family: myfont;
 
     color:#1c5a5a;
 
     color:#1c5a5a;
−
     font-size: 30px;
+
     font-size: 1.875rem;
 +
    text-align: left;
 
}
 
}
 
.humen_practices p{
 
.humen_practices p{
Line 213: Line 248:
 
     color:#1c5a5a;
 
     color:#1c5a5a;
 
     line-height: 170%;
 
     line-height: 170%;
 +
    font-weight:normal；
 
}
 
}
 
.humen_practices img{
 
.humen_practices img{
 
     position: relative;
 
     position: relative;
 
     width: 10rem;
 
     width: 10rem;
−
     left:67%;
+
     left:30%;
 
     cursor: pointer;
 
     cursor: pointer;
 
     transition: all 0.6s;
 
     transition: all 0.6s;
Line 247: Line 283:
 
     font-family: myfont;
 
     font-family: myfont;
 
     color:#1c5a5a;
 
     color:#1c5a5a;
−
     font-size: 30px;
+
     font-size: 1.875rem;
 +
    text-align: left;
 
}
 
}
 
.team p{
 
.team p{
Line 254: Line 291:
 
     color:#1c5a5a;
 
     color:#1c5a5a;
 
     line-height: 170%;
 
     line-height: 170%;
 +
    font-weight:normal；
 
}
 
}
  
Line 262: Line 300:
 
.footer_top{
 
.footer_top{
 
     float:left;
 
     float:left;
−
     width: 65%;
+
     width: 70%;
 
}
 
}
 
.footer_top .footer_top_pic1{
 
.footer_top .footer_top_pic1{
−
     width: 137px;
+
     width: 8.7rem;
−
    height: 153px;
+
 
     position: relative;
 
     position: relative;
 
     padding-left: 35%;
 
     padding-left: 35%;
Line 273: Line 310:
 
}
 
}
 
.footer_top .footer_top_pic2{
 
.footer_top .footer_top_pic2{
−
     width: 153px;
+
     width: 10rem;
−
    height: 153px;
+
 
     position: relative;
 
     position: relative;
−
     padding-left: 15%;
+
     padding-left: 14%;
 
}
 
}
  
Line 284: Line 320:
  
 
.contact_us ul li img{
 
.contact_us ul li img{
−
     height: 3%;
+
     width: 1.7rem;
 
     position: relative;
 
     position: relative;
 
     float: left;
 
     float: left;
 +
}
 +
 +
.contact_us ul li p {
 +
    font-size: 1rem!important;
 
}
 
}
  
Line 292: Line 332:
 
     padding-top: 30px;
 
     padding-top: 30px;
 
     padding-bottom: 20px;
 
     padding-bottom: 20px;
−
     text-align: center;
+
}
 +
.footer_bottom p{
 +
     text-align: center !important;
 
}
 
}

Latest revision as of 03:52, 22 October 2019

/*.igem_2019_team_mobile_bar{ 

    display:none;

}*/ .igem_2019_team_menu{ 

    display:none;

}

@media only screen and (max-width: 1800px) .igem_2019_team_content { 

   width: 100% !important;

}

  1. content{
   line-height: normal; !important

}

  1. bodyContent a[href ^="https://"], .link-https {
   padding-right: 18px !important;

}

html{ 

   position: center;   
   overflow-x:hidden;

} body{ 

   margin: 0 auto;

}

a{ 

   text-decoration: none !important;

}

.igem_2019_team_content .igem_2019_team_column_wrapper a { 

   color: #3e4548; 
   font-weight: normal !important;

} .igem_2019_team_content .igem_2019_team_column_wrapper { 

   margin: auto;
   max-width: 1400px;
   width: 100%; !important

} p{ 

   color:#1c5a5a;
   font-weight:normal；

} .igem_2019_team_content .igem_2019_team_column_wrapper p { 

   font-weight:normal；

} .igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol { 

   padding:0px 0px !important;

}


.igem_top_bar { 

   height: 3.5rem;
   width: 100%;
   margin:18px 0px;
   background:rgb(255, 255, 255);
   position: fixed; 
   top: 0%;
   margin-bottom: 5px;
   display:block !important;
   z-index: 111;
   box-shadow: 0px 3px 6px #888888;

}

.igem_top_bar img { 

   position:relative;
   height: 50px;
   margin-left: 10px;
   float: left;

}

.nav ul li{ 

   float:right;
   margin:0 10px;
   list-style-type:none;
   display:inline;
   position:relative;
   text-align: center;

} .nav ul li a{ 

   color:#3e4548;
   font-family:Arial;
   display:block;
   padding-top:10px;
   padding-bottom:10px;
   padding-left:18px;
   padding-right:18px;

} .nav ul li a:hover{ 

   color: #FFFFFF !important;
   background-color: #1c5a5a !important;

} .nav ul li span{ 

   display:block;

} .nav ul li ul{ 

   background:rgb(255, 255, 255);
   position: relative;
   display:none;
   padding-left:0;
   margin-left:0;
   line-height: 0em !important;

} .nav ul li ul li{ 

   float:none;
   text-align: center;
   padding-left:0;
   padding-right:0;

} .nav ul li ul li a{ 

   padding-top:20px;
   padding-bottom:20px;

} .nav ul li:hover ul{ 

   display: block;

}


@font-face{ 

   font-family: myfont;
   src:url('https://static.igem.org/mediawiki/2019/8/89/T--XMU-China--321Perfect.ttf');

}

.main { 

   background:none !important;
   background-color: #FFFFFF;

}

.main_top{ 

   position: relative;
   padding-top: 3vw;
   padding-bottom: 5vw;

} .main_top img{ 

   width: 80%;
   margin-left: 10%;

}

.center{ 

   padding-top: 0;

}


.project img{ 

   z-index: 11 !important;
   position: relative;
   width: 10rem;
   float: left;
   left:8%;
   cursor: pointer;
   transition: all 0.6s;

}

.project img:hover{ 

   transform: scale(1.4);

}

.project div{ 

   position: relative;
   left:10%;
   font-family: myfont;
   color:#1c5a5a;
   font-size: 1.875rem;
   text-align: left;

}

.project p{ 

   position: relative;
   left:10%;
   color:#1c5a5a;
   line-height: 170%;
   font-weight:normal；

}

.modeling img{ 

   position: relative;
   width: 10rem;
   left:32%;
   cursor: pointer;
   transition: all 0.6s;

}

.modeling img:hover{ 

   transform: scale(1.4);

}

.modeling div{ 

   position: relative;
   left:72%;
   font-family: myfont;
   color:#1c5a5a;
   font-size: 1.875rem;
   text-align: left;

} .modeling p{ 

   position: relative;
   left:72%;
   color:#1c5a5a;
   line-height: 170%;
   font-weight:normal；

}

.software img{ 

   position: relative;
   width: 10rem;
   left:-30%;
   cursor: pointer;
   transition: all 0.6s;

}

.software img:hover{ 

   transform: scale(1.4);

}

.software div{ 

   position: relative;
   left:9%;
   font-family: myfont;
   color:#1c5a5a;
   font-size: 1.875rem;
   text-align: left;

} .software p{ 

   position: relative;
   left:9%;
   color:#1c5a5a;
   line-height: 170%;
   font-weight:normal；

}

.humen_practices div{ 

   position: relative;
   left:67%;
   font-family: myfont;
   color:#1c5a5a;
   font-size: 1.875rem;
   text-align: left;

} .humen_practices p{ 

   position: relative;
   left:67%;
   color:#1c5a5a;
   line-height: 170%;
   font-weight:normal；

} .humen_practices img{ 

   position: relative;
   width: 10rem;
   left:30%;
   cursor: pointer;
   transition: all 0.6s;

}

.humen_practices img:hover{ 

   transform: scale(1.4);

}

.team{ 

   padding-top: 10%;

} .team img{ 

   position: relative;
   width: 10rem;
   float:left;
   left:10%;
   cursor: pointer;
   transition: all 0.6s;

}

.team img:hover{ 

   transform: scale(1.4);

}

.team div{ 

   position: relative;
   left:15%;
   font-family: myfont;
   color:#1c5a5a;
   font-size: 1.875rem;
   text-align: left;

} .team p{ 

   position: relative;
   left:15%;
   color:#1c5a5a;
   line-height: 170%;
   font-weight:normal；

}

.footer{ 

   padding-top: 10%;
   margin:0 ;

} .footer_top{ 

   float:left;
   width: 70%;

} .footer_top .footer_top_pic1{ 

   width: 8.7rem;
   position: relative;
   padding-left: 35%;


} .footer_top .footer_top_pic2{ 

   width: 10rem;
   position: relative;
   padding-left: 14%;

}

.contact_us ul li{ 

   display: inline;

}

.contact_us ul li img{ 

   width: 1.7rem;
   position: relative;
   float: left;

}

.contact_us ul li p { 

   font-size: 1rem!important;

}

.footer_bottom{ 

   padding-top: 30px;
   padding-bottom: 20px;

} .footer_bottom p{ 

   text-align: center !important;

}