Team:TAS Taipei/Templates/cssResources

From 2014hs.igem.org

(Difference between revisions)
m
m
Line 2: Line 2:
<style>
<style>
body {
body {
-
background-image:url(http://subtlepatterns.com/patterns/blackorchid.png);
+
background-color:#fffaf0;
-
background-attachment:fixed;
+
background-image:url("http://subtlepatterns.com/patterns/cubes.png");
-
background-repeat:repeat;
+
<!-- http://subtlepatterns.com/patterns/cubes.png -->
 +
<!-- http://subtlepatterns.com/patterns/ricepaper_v3.png -->
 +
background-repeat:repeat;
 +
<!-- background-size:cover; -->
}
}
-
 
+
#top {
-
html {
+
height:40%;
-
overflow-y:scroll;
+
width:100%;
 +
display: block;
}
}
-
 
+
#topSpace {
-
header > .container {
+
width:100%;
-
padding-top:25px;
+
-
padding-bottom:15px;
+
}
}
-
 
+
.imageContainer {
-
.container {
+
float:right;
-
max-width:1260px;
+
-
 
+
}
}
-
 
+
#homeTitleContainer {
-
 
+
<!-- height: 50%; -->
-
.heroImageContainer {
+
padding: 0% 0% 0% 0%;
-
background-size: cover;
+
}
}
-
 
+
#homeTitleTextBox {
-
#bodycontainer {
+
text-align:center;
-
background-image:url(crossword.png);
+
margin: auto auto;
-
 
+
font-size:200px;
 +
font-family: 'Abel', sans-serif;
 +
width:100%;
 +
color:#595959;
 +
margin:-40px 0px 0px 0px;
 +
transition: color 0.25s ease;
 +
<!-- -webkit-transform: scale(1, 1.25); -->
 +
<!-- color:#92c988; -->
}
}
-
.nav {
+
#homeTitleTextBox:hover {
-
#nav_left {
+
color:#1a1a1a;
-
img {
+
<!-- color:#9fd596; -->
-
width:170px;
+
}
-
}
+
#bactoImg {
-
display:inline-block;
+
width:45px;
-
vertical-align:bottom;
+
height: auto;
-
}
+
}
-
#nav_right {
+
.titleLetter {
-
margin-left:15px;
+
margin-right: -13px;
-
display:inline-block;
+
margin-left: -13px;
-
vertical-align:bottom;
+
}
-
h2 {
+
#bottom {
-
color:white;
+
height:56%;
-
font-size: 70px;
+
width:100%;
-
margin-top: 0;
+
}
-
margin-bottom: 0;
+
#bottomList {
-
}
+
list-style-type:none;
-
}
+
display:flex;
-
ul {
+
}
-
padding:0;
+
#bottomList li {
-
margin-top:0;
+
display:inline-block;
-
li {
+
width:33%;
-
list-style-type: none;
+
height:100%;
-
display: inline-block;
+
}
-
color: white;
+
#menuItems {
-
border-right: 1px solid white;
+
padding:0px 0px 0px 0px;
-
padding: 0 10px;
+
}
-
margin-left: -4px;
+
#vertMenu li{
-
}
+
list-style-type:none;
-
li:last-child {
+
height:auto;
-
border:0;
+
padding:2px 15px 2px 15px;
-
}
+
margin:4px 10px 30.5px 5px;
-
}
+
color:#242424;
 +
font-size:25px;
 +
font-family: 'Abel', sans-serif;
 +
<!-- font-family: 'Iceland', cursive; -->
 +
transition: background-color 0.25s ease;
 +
background-color:#3f8a42;
 +
#92c988; dark green
 +
#89abee; dark blue
 +
text-decoration:none;
 +
text-align:center;
 +
border-radius:1px;
 +
<!-- #242424 -->
 +
<!-- padding:10px 25px 10px 25px; -->
 +
}
 +
#vertMenu li:hover{
 +
background-color:#42a146;
 +
#9fd596; light green
 +
#9cbaf4; light blue
 +
}
 +
#vertMenu a{
 +
text-decoration:none;
 +
color:black;
}
}
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
/******************* SLDIESJS ******************/
 
#slideShow {
#slideShow {
 +
<!-- height:50%;  -->
 +
<!-- margin-bottom:-198.5px; -->
}
}
-
 
+
<!-- Begin css for slideshow -->
#slides {
#slides {
-
display: none;
+
  display: none
}
}
#slides .slidesjs-navigation {
#slides .slidesjs-navigation {
-
margin-top: 3px;
+
  margin-top:3px;
}
}
#slides .slidesjs-previous {
#slides .slidesjs-previous {
-
margin-right: 5px;
+
  margin-right: 5px;
-
float: left;
+
  float: left;
}
}
#slides .slidesjs-next {
#slides .slidesjs-next {
-
margin-right: 5px;
+
  margin-right: 5px;
-
float: left;
+
  float: left;
}
}
.slidesjs-pagination {
.slidesjs-pagination {
-
margin: 6px 0 0;
+
  margin: 6px 0 0;
-
float: right;
+
  float: right;
-
list-style: none;
+
  list-style: none;
}
}
.slidesjs-pagination li {
.slidesjs-pagination li {
-
float: left;
+
  float: left;
-
margin: 0 1px;
+
  margin: 0 1px;
}
}
.slidesjs-pagination li a {
.slidesjs-pagination li a {
-
display: block;
+
  display: block;
-
width: 13px;
+
  width: 13px;
-
height: 0;
+
  height: 0;
-
padding-top: 13px;
+
  padding-top: 13px;
-
background-image: url(https://lh6.googleusercontent.com/-vtyezdODYvE/U0S2xNtE8TI/AAAAAAAAAJU/KkHRW1n1iQ4/w13-h39-no/pagination.png);
+
  background-image: url(https://lh6.googleusercontent.com/-vtyezdODYvE/U0S2xNtE8TI/AAAAAAAAAJU/KkHRW1n1iQ4/w13-h39-no/pagination.png);
-
background-position: 0 0;
+
  background-position: 0 0;
-
float: left;
+
  float: left;
-
overflow: hidden;
+
  overflow: hidden;
}
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
.slidesjs-pagination li a:hover.active {
-
background-position: 0 -13px;
+
  background-position: 0 -13px
}
}
.slidesjs-pagination li a:hover {
.slidesjs-pagination li a:hover {
-
background-position: 0 -26px;
+
  background-position: 0 -26px
}
}
#slides a:link,
#slides a:link,
#slides a:visited {
#slides a:visited {
-
color: #333;
+
  color: #333
}
}
#slides a:hover,
#slides a:hover,
#slides a:active {
#slides a:active {
-
color: #9e2020;
+
  color: #9e2020
}
}
.navbar {
.navbar {
-
overflow: hidden;
+
  overflow: hidden
}
}
.slideContainer {
.slideContainer {
-
margin: 0 auto;
+
  margin: 0 auto
}
}
 +
<!-- End css for slideshow -->
#projIntroContainer {
#projIntroContainer {
-
padding: 0px 0px 0px 0px;
+
padding:0px 0px 0px 0px;
-
text-align: center;
+
text-align:center;
 +
 
 +
}
 +
#projIntro {
 +
margin-top: -8px;
 +
padding-top: 0px;
 +
text-align:justify;
 +
padding-right: 40px;
 +
font-size:18px;
 +
font-family: 'Lato', sans-serif;
 +
font-weight: 400;
 +
<!-- font-family: 'Poiret One', cursive; -->
}
}
-
#projIntro {
+
@keyframes boxShadowIn
-
margin-top: -8px;
+
{
-
padding-top: 0px;
+
from {box-shadow:0px 0px 0px #ffffff;}
-
text-align: justify;
+
to {box-shadow:10px 10px 5px #888888;}
-
padding-right: 40px;
+
}
-
font-size: 19px;
+
/*Safari and Chrome:*/
-
font-family: 'Poiret One', cursive;
+
@-webkit-keyframes boxShadowIn
 +
{
 +
from {box-shadow:0px 0px 0px #ffffff;}
 +
to {box-shadow:10px 10px 5px #888888;}
 +
}
 +
@keyframes boxShadowOut
 +
{
 +
from {box-shadow:10px 10px 5px #888888;}
 +
to {box-shadow:0px 0px 0px #ffffff;}
 +
}
 +
/*Safari and Chrome:*/
 +
@-webkit-keyframes boxShadowOut
 +
{
 +
from {box-shadow:10px 10px 5px #888888;}
 +
to {box-shadow:0px 0px 0px #ffffff;}
 +
}
 +
@keyframes textShadowIn
 +
{
 +
from {text-shadow:0px 0px 0px #ffffff;}
 +
to {text-shadow:10px 10px 5px #888888;color:#ffffff;}
 +
}
 +
 
 +
/*Safari and Chrome:*/
 +
@-webkit-keyframes textShadowIn
 +
{
 +
from {text-shadow:0px 0px 0px #ffffff;}
 +
to {text-shadow:10px 10px 5px #888888;color:#ffffff;}
 +
}
 +
@keyframes textShadowOut
 +
{
 +
from {text-shadow:10px 10px 5px #888888;color:#ffffff;}
 +
to {text-shadow:0px 0px 0px #ffffff;}
 +
}
 +
 
 +
/*Safari and Chrome:*/
 +
@-webkit-keyframes textShadowOut
 +
{
 +
from {text-shadow:10px 10px 5px #888888;color:#ffffff;}
 +
to {text-shadow:0px 0px 0px #ffffff;}
 +
}
 +
 
 +
/* For tablets & smart phones */
 +
@media (max-width: 767px) {
 +
  body {
 +
padding-left: 20px;
 +
padding-right: 20px;
 +
  }
 +
  .slideContainer {
 +
width: auto;
 +
position:relative;
 +
  }
 +
}
 +
 
 +
/* For smartphones */
 +
@media (max-width: 480px) {
 +
  .slideContainer {
 +
width: auto;
 +
  }
 +
  #homeTitleTextBox {
 +
font-size:10px;
 +
}
 +
}
 +
 
 +
/* For smaller displays like laptops */
 +
@media (min-width: 768px) and (max-width: 979px) {
 +
  .slideContainer {
 +
width: 600px;
 +
  }
 +
  #homeTitleTextBox {
 +
font-size:90px;
 +
}
 +
}
 +
 
 +
/* For larger displays */
 +
@media (min-width: 1200px) {
 +
  .slideContainer {
 +
width: 600px;
 +
  }
 +
  #homeTitleTextBox {
 +
font-size:200px;
 +
}
}
}
</style>
</style>
</html>
</html>

Revision as of 06:51, 14 May 2014

Retrieved from "http://2014hs.igem.org/Team:TAS_Taipei/Templates/cssResources"