Team:CityU HK/Template/CSS

From 2014.igem.org

(Difference between revisions)
 
(247 intermediate revisions not shown)
Line 8: Line 8:
     <!-- Bootstrap -->
     <!-- Bootstrap -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 +
    <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
      
      
     <!-- font -->
     <!-- font -->
-
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css>
+
     <link href='http://fonts.googleapis.com/css?family=Raleway:100,300,400,500,600,700,900,100' rel='stylesheet' type='text/css'>
-
    <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>  
+
     <link href='http://fonts.googleapis.com/css?family=Dosis:200,400,700' rel='stylesheet' type='text/css'>
-
     <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
+
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
-
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+
     <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
-
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,400' rel='stylesheet' type='text/css'>
+
 
-
     <link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
+
-
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
+
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
Line 77: Line 76:
background-color: transparent;
background-color: transparent;
}
}
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
#globalWrapper, #content { /*-- changes default wiki settings --*/
Line 97: Line 97:
h3 {border-bottom: none;}
h3 {border-bottom: none;}
a:link {color: none;}
a:link {color: none;}
 +
 +
        h1, h2, h3, p {
 +
                font-family: 'Raleway', sans-serif;
 +
        }
.navbar-default {
.navbar-default {
border-bottom: solid 3px #e0e0e0;
border-bottom: solid 3px #e0e0e0;
-
margin-bottom:0;
+
margin:0;
-
background-color: #EBEDEC;
+
                 height: 8%;
                 height: 8%;
}
}
.navbar-brand {
.navbar-brand {
-
                font-family:'Josefin Sans', sans-serif;
+
font-family: 'Indie Flower', cursive;
-
                 font-size: 2em;
+
                 font-weight: bold;
-
                padding-top: 40px;
+
font-size: 1.8em;
-
padding-left: 40px;
+
padding-top: 40px;
 +
padding-left: 2px;
padding-bottom: 70px;
padding-bottom: 70px;
}
}
 +
 +
        #igem {
 +
                position: relative;
 +
                top: -22px;
 +
        }
          
          
-
      .nav .navbar-brand a:link {          /*overwrite igem default style*/
+
        .nav .navbar-brand a:link {          /*overwrite igem default style*/
-
                 color: #2c4762;
+
                 color: #bebebe;
         }
         }
Line 124: Line 133:
     .navbar .container-fluid #bs-example-navbar-collapse-1 .nav.navbar-nav.navbar-right {
     .navbar .container-fluid #bs-example-navbar-collapse-1 .nav.navbar-nav.navbar-right {
margin-top: 20px;
margin-top: 20px;
-
font-size: 16px;
+
font-size: 14px;
-
font-family:'Dosis', sans-serif;
+
font-family:'Raleway', sans-serif;
}
}
     .nav.navbar-nav.navbar-right a:link {    /*overwrite igem default style*/
     .nav.navbar-nav.navbar-right a:link {    /*overwrite igem default style*/
         color:#357385;
         color:#357385;
 +
    }
 +
 +
    .nav.navbar-nav.navbar-right a:hover {   
 +
        color:#3cc;
 +
        background: none;
     }
     }
     .nav.navbar-nav.navbar-right .active a {
     .nav.navbar-nav.navbar-right .active a {
 +
        background: none;
border-bottom-width: 3px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-style: solid;
-
border-bottom-color: #3cc;
+
border-bottom-color: #4eecba;
}
}
-
nav ul li a:hover {
+
 
-
font-weight: bolder;
+
nav li a:hover {
-
color: #3cc;
+
color: #3cc;  
-
border-bottom-width: 3px;
+
        background-color: transparent;
-
border-bottom-style: solid;
+
-
border-bottom-color: rgba(51,204,204,.3);
+
}
}
 +
 +
.dropdown li a: hover {
 +
        background-color: transparent;
 +
 +
}
 +
.dropdown-menu li a:hover {
.dropdown-menu li a:hover {
border: none;
border: none;
color: #3cc;
color: #3cc;
-
font-weight: bold;
+
/*font-weight:bold;*/
 +
        background: none;
}
}
 +
 +
#footer {
#footer {
background: rgba(0,0,0,0.8);
background: rgba(0,0,0,0.8);
background-size:cover;
background-size:cover;
-
height: 200px;
 
         width: 100%;
         width: 100%;
clear: both;
clear: both;
-
bottom: 0;
+
/*top: 0;*/
         margin: 0;
         margin: 0;
-
         padding: 20px 20px 0px 20px;  
+
         padding: 10px 20px 0px 20px;  
         border-top: solid 1px #e0e0e0;
         border-top: solid 1px #e0e0e0;
-
        position: relative;
+
      /* position: relative;*/
}
}
-
#footer h4 {
+
#footer h3 {
-
color: #fff;
+
color: #dde0e4;
 +
        font-family: 'Raleway', sans-serif;
 +
        font-size: 18px;
 +
        font-weight: bold;
 +
        padding-bottom: 20px;
}
}
#footer p {
#footer p {
-
color: #fff;
+
color: #777777;
text-align: center;
text-align: center;
 +
        font-size: 14px;
 +
}
 +
 +
#footer #email {
 +
      font-size: 18px;
}
}
#footer a {
#footer a {
-
color: #fff;
+
color: #777777;
text-decoration: none;
text-decoration: none;
}
}
Line 186: Line 216:
}
}
-
.btn-custom {
+
#copyright {
-
padding: 8px 30px 8px 30px;
+
        width:100%;
-
background: none;
+
        padding-top:10px;
-
-moz-box-shadow: 3px 3px 5px 6px #000;
+
        padding-bottom: 10px;
-
  -webkit-box-shadow: 3px 3px 5px 6px #000;
+
        background: rgba(0,0,0,0.8);
-
  box-shadow: 3px 3px 5px 6px #000;
+
        color: #777777;
-
border: solid 2.5px #fff;
+
        font-family: 'Raleway', sans-serif;
-
font-family: 'Oswald', sans-serif;
+
        font-size: 14px;
-
font-size: 20px;
+
        text-align: center;
}
}
-
.carousel-inner {
 
-
-webkit-box-shadow: 0 8px 6px -6px black;
 
-
-moz-box-shadow: 0 8px 6px -6px black;
 
-
box-shadow: 0 8px 6px -6px black;
 
-
}
 
-
 
-
.carousel-inner .carousel-caption {
 
-
padding-top: 100px;
 
-
padding-bottom: 100px;
 
-
}
 
-
.carousel-inner .carousel-caption h1 {
 
-
font-family: 'Pacifico', cursive;
 
-
font-size: 80px;
 
-
padding-bottom:10px;
 
-
}
 
-
 
-
.carousel-inner .carousel-caption h3 {
 
-
font-size: 60px;
 
-
font-family: 'Oswald', sans-serif;
 
-
        padding-bottom: 5px;
 
-
}
 
-
 
-
.btn-custom:link {                      /*overwrite igem default style*/
 
-
        color: #fff;
 
-
}
 
-
 
-
.btn-custom:hover {
 
-
color: #3CC;
 
-
border: solid 2.5px #3cc;
 
-
        background-color: rgba(255,255,255,0.2);
 
-
}
 
-
 
-
#feature-icon img {
 
-
        max-width: 100%;
 
-
        max-height: 100%;
 
-
}
 
-
 
-
#abstract {
 
-
background: #CBEBE3;
 
-
 
-
}
 
-
 
-
#abstract h2{
 
-
text-align: center;
 
-
        font-size: 5em;
 
-
font-family: 'Josefin Sans', sans-serif;
 
-
padding-top: 50px;
 
-
        margin-left:200px;
 
-
        margin-right:200px;
 
-
}
 
-
 
-
#abstract p {
 
-
        color: #666;
 
-
        font-weight: 100;
 
-
        font-family: 'Source Sans Pro', sans-serif;
 
-
line-height: 2em;
 
-
text-align: justify;
 
-
padding-left: 200px;
 
-
padding-right:200px;
 
-
padding-top: 10px;
 
-
padding-bottom: 100px;
 
-
        font-size: 18px;
 
-
}
 
@media screen and (max-width: 480px) {
@media screen and (max-width: 480px) {
Line 272: Line 239:
         #abstract h2 {
         #abstract h2 {
 +
        font-size: 2em;
 +
        padding-top: 10px;
 +
        padding-bottom: 10px;
         margin-left: 30px;
         margin-left: 30px;
         margin-right: 30px;}
         margin-right: 30px;}
Line 278: Line 248:
         padding-left: 10px;
         padding-left: 10px;
         padding-right: 10px;
         padding-right: 10px;
 +
        font-weight: 300;
         font-size: 14px;}
         font-size: 14px;}
 +
 +
      #footer {
 +
      height: 500px;}
         #footer img {
         #footer img {
Line 288: Line 262:
         #navbar-brand ｛
         #navbar-brand ｛
         Font-size：25px；｝
         Font-size：25px；｝
 +
 +
        #abstract p {
 +
        padding-left: 10px;
 +
        padding-right: 10px;
 +
 +
      #footer {
 +
      height: 500px;}
 +
｝
｝
</style>
</style>
</html>
</html>

Latest revision as of 00:33, 18 October 2014

Bootstrap 101 Template

Retrieved from "http://2014.igem.org/Team:CityU_HK/Template/CSS"