Difference between revisions of "Team:HFUT-China/desccss"

(Created page with "html, body { width: 100%; min-width: 800px; font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; -webkit-font-smoothing: antialiased;...")
 
 
Line 1: Line 1:
−
html,
 
−
body {
 
−
    width: 100%;
 
−
    min-width: 800px;
 
−
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
 
−
    -webkit-font-smoothing: antialiased;
 
−
    text-rendering: optimizeLegibility;
 
−
}
 
−
 
 
div.container {
 
div.container {
−
    width: 100%;
+
     background-color: #F0EBDF;
−
    height: 100%;
+
−
    padding-top: 5%;
+
−
    padding-bottom: 2%;
+
−
    overflow: auto;
+
−
}
+
−
 
+
−
.info-group {
+
−
    height: 100%;
+
−
}
+
−
 
+
−
div.sec-title {
+
−
    width: 95%;
+
−
    border-bottom: 1px solid #4C4C4C;
+
−
    padding-left: 10%;
+
−
}
+
−
 
+
−
div.sec-title h3.sec-head {
+
−
    font-size: 2em;
+
−
    color: #666666;
+
−
}
+
−
 
+
−
.members {
+
−
    margin-top: 5%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
.member-info {
+
−
    width: 65%;
+
−
    height: 70%;
+
−
    margin: 0 auto;
+
−
    display: block;
+
−
}
+
−
 
+
−
.member-info .member-photo {
+
−
     background-repeat: no-repeat;
+
−
    background-size: 200px 200px;
+
−
    width: 200px;
+
−
    height: 200px;
+
−
}
+
−
 
+
−
.member-info .member-intro,
+
−
.member-info .member-photo {
+
−
    width: 48%;
+
−
}
+
−
 
+
−
.member-info .member-intro {
+
−
    margin-top: 3%;
+
−
}
+
−
 
+
−
.member-info .member-photo {
+
−
    margin-top: 3%;
+
−
}
+
−
 
+
−
.member-info .member-intro h3.member-name {
+
−
    font-size: 1.7em;
+
−
    color: #111;
+
−
}
+
−
 
+
−
.member-info .member-intro div.member-desc {
+
−
    font-size: 1.22em;
+
−
}
+
−
 
+
−
.left .member-intro {
+
−
    float: left;
+
−
}
+
−
 
+
−
.left .member-photo {
+
−
    margin-right: 5%;
+
−
    float: right;
+
−
}
+
−
 
+
−
.right .member-intro {
+
−
    float: right;
+
−
}
+
−
 
+
−
.right .member-photo {
+
−
    margin-left: 5%;
+
−
    float: left;
+
−
}
+
−
 
+
−
.whole-photo {
+
−
    width: 90%;
+
−
    margin: 20px auto 10%;
+
−
}
+
−
 
+
−
.clear {
+
−
    width: 0;
+
−
    height: 0;
+
−
    clear: both;
+
 
}
 
}
  
 
@media (min-width: 1300px) {
 
@media (min-width: 1300px) {
−
     div#Bowen {
+
     div#logo {
−
         background-image: url(https://static.igem.org/mediawiki/2015/1/10/Bowen.jpg);
+
         background-image: url(https://static.igem.org/mediawiki/2015/d/dc/Logo_black_small.png);
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
−
         background-size: 300px 348px;
+
         background-size: 450px 450px;
−
         width: 300px;
+
         width: 450px;
−
         height: 348px;
+
         height: 450px;
−
    }
+
−
    div#Ron {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/5/5c/Ron.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Rexar {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/1/11/Rexar.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Bob {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/0/04/Bob.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Ray {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/e/e5/HfutRay.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Bing {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Bing.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#all {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/4/48/All_s.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 800px 533px;
+
−
        width: 800px;
+
−
        height: 348px;
+
 
     }
 
     }
 +
   
 
}
 
}
  
−
@media (min-width: 1300px) {
+
@media (min-width: 1050px) and (max-width: 1300px) {
−
     div#Bowen {
+
     div#logo {
−
         background-image: url(https://static.igem.org/mediawiki/2015/1/10/Bowen.jpg);
+
         background-image: url(https://static.igem.org/mediawiki/2015/d/dc/Logo_black_small.png);
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
−
         background-size: 300px 348px;
+
         background-size: 300px 300px;
 
         width: 300px;
 
         width: 300px;
−
         height: 348px;
+
         height: 300px;
−
    }
+
−
    div#Ron {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/5/5c/Ron.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Rexar {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/1/11/Rexar.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Bob {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/0/04/Bob.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Ray {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/e/e5/HfutRay.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#Bing {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Bing.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 300px 348px;
+
−
        width: 300px;
+
−
        height: 348px;
+
−
    }
+
−
    div#all {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/4/48/All_s.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 800px 533px;
+
−
        width: 800px;
+
−
        height: 348px;
+
 
     }
 
     }
 +
   
 
}
 
}
  
−
@media (min-width: 1070px) and (max-width: 1300px){
+
@media (min-width: 800px) and (max-width: 1050px) {
−
     div#Bowen {
+
     div#logo {
−
         background-image: url(https://static.igem.org/mediawiki/2015/1/10/Bowen.jpg);
+
         background-image: url(https://static.igem.org/mediawiki/2015/d/dc/Logo_black_small.png);
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
−
         background-size: 200px 232px;
+
         background-size: 250px 250px;
−
         width: 200px;
+
         width: 250px;
−
         height: 232px;
+
         height: 250px;
−
    }
+
−
    div#Ron {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/5/5c/Ron.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 200px 232px;
+
−
        width: 200px;
+
−
        height: 232px;
+
−
    }
+
−
    div#Rexar {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/1/11/Rexar.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 200px 232px;
+
−
        width: 200px;
+
−
        height: 232px;
+
−
    }
+
−
    div#Bob {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/0/04/Bob.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 200px 232px;
+
−
        width: 200px;
+
−
        height: 232px;
+
−
    }
+
−
    div#Ray {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/e/e5/HfutRay.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 200px 232px;
+
−
        width: 200px;
+
−
        height: 232px;
+
−
    }
+
−
    div#Bing {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Bing.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 200px 232px;
+
−
        width: 200px;
+
−
        height: 232px;
+
−
    }
+
−
    div#all {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/4/48/All_s.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 800px 533px;
+
−
        width: 800px;
+
−
        height: 533px;
+
 
     }
 
     }
 +
   
 
}
 
}
  
−
 
+
@media (max-width: 800px){
−
@media (max-width: 1070px){
+
     div#logo {
−
     div#Bowen {
+
         background-image: url(https://static.igem.org/mediawiki/2015/d/dc/Logo_black_small.png);
−
        background-image: url(https://static.igem.org/mediawiki/2015/1/10/Bowen.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 150px 174px;
+
−
        width: 150px;
+
−
        height: 174px;
+
−
    }
+
−
    div#Ron {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/5/5c/Ron.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 150px 174px;
+
−
        width: 150px;
+
−
        height: 174px;
+
−
    }
+
−
    div#Rexar {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/1/11/Rexar.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 150px 174px;
+
−
        width: 150px;
+
−
        height: 174px;
+
−
    }
+
−
    div#Bob {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/0/04/Bob.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 150px 232px;
+
−
        width: 150px;
+
−
        height: 174px;
+
−
    }
+
−
    div#Ray {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/e/e5/HfutRay.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 150px 174px;
+
−
        width: 150px;
+
−
        height: 174px;
+
−
    }
+
−
    div#Bing {
+
−
        background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Bing.jpg);
+
−
        background-repeat: no-repeat;
+
−
        background-size: 150px 174px;
+
−
        width: 150px;
+
−
        height: 174px;
+
−
    }
+
−
    div#all {
+
−
         background-image: url(https://static.igem.org/mediawiki/2015/4/48/All_s.jpg);
+
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
−
         background-size: 800px 533px;
+
         background-size: 250px 250px;
−
         width: 800px;
+
         width: 250px;
−
         height: 533px;
+
         height: 250px;
 
     }
 
     }
 +
   
 
}
 
}

Latest revision as of 07:54, 18 September 2015

div.container { 

   background-color: #F0EBDF;

}

@media (min-width: 1300px) { 

   div#logo {
       background-image: url(Logo_black_small.png);
       background-repeat: no-repeat;
       background-size: 450px 450px;
       width: 450px;
       height: 450px;
   }

}

@media (min-width: 1050px) and (max-width: 1300px) { 

   div#logo {
       background-image: url(Logo_black_small.png);
       background-repeat: no-repeat;
       background-size: 300px 300px;
       width: 300px;
       height: 300px;
   }

}

@media (min-width: 800px) and (max-width: 1050px) { 

   div#logo {
       background-image: url(Logo_black_small.png);
       background-repeat: no-repeat;
       background-size: 250px 250px;
       width: 250px;
       height: 250px;
   }

}

@media (max-width: 800px){ 

   div#logo {
       background-image: url(Logo_black_small.png);
       background-repeat: no-repeat;
       background-size: 250px 250px;
       width: 250px;
       height: 250px;
   }

}