Difference between revisions of "Template:BRHS/Template/CSS"

Line 1: Line 1:
 
<html>
 
<html>
 +
/*The following code was adapted from UCLA iGEM 2015*/
 
<link href='http://fonts.googleapis.com/css?family=Pacifico' 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=Kaushan+Script' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
Line 497: Line 498:
 
position:relative;
 
position:relative;
  
−
</style>
 
−
 
−
 
−
 
−
<!--SLIDER-->
 
−
<style type="text/css">
 
−
.slider{
 
−
    position: relative;
 
−
    width: 1150px;
 
−
    height: 350px;
 
−
    margin: auto;
 
−
    overflow: hidden;
 
−
    z-index: 13;
 
−
    background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png');
 
−
}
 
−
.slider .slider_left{
 
−
    position: absolute;
 
−
    background-color:black;
 
−
    top: 0px;   
 
−
    left: 0px;
 
−
    width: 50px;
 
−
    height: 100%;
 
−
    opacity: 0.5;
 
−
    z-index: 2;
 
−
}
 
−
.slider .slider_left img{
 
−
    position: relative;
 
−
    width: 100%;
 
−
    height: 200px;
 
−
    top: 25%;
 
−
    left: 10px;
 
−
}
 
−
.slider .slider_right{
 
−
    position: absolute;
 
−
    background-color:black;
 
−
    top: 0px;
 
−
    left: 1100px;
 
−
    width: 50px;
 
−
    height: 100%;
 
−
    opacity: 0.5;
 
−
    z-index: 2;
 
−
}
 
−
.slider .slider_right img{
 
−
    position: relative;
 
−
    width: 100%;
 
−
    height: 200px;
 
−
    top: 25%;
 
−
    left: -10px;
 
−
}
 
−
.slider .slider_imgs{
 
−
    position: absolute;
 
−
}
 
−
.slider .slider_imgs div{
 
−
  float: left;
 
−
  width: 1150px;
 
−
  height: 350px;
 
−
}
 
−
.slider .slider_imgs #slide1{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2015/thumb/f/f9/UCLAiGEM2015_Tamura_CoSpin_14July2015_tweezer.jpg/750px-UCLAiGEM2015_Tamura_CoSpin_14July2015_tweezer.jpg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 25% 50%;
 
−
}
 
−
.slider .slider_imgs #slide2{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2015/d/d4/UCLAiGEM2015_GroupPic.jpg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 30%;
 
−
}
 
−
.slider .slider_imgs #slide3{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
}
 
−
.slider .slider_imgs #slide4{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2015/c/cd/UCLAiGEM2015_ThankYou2.jpg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 65%;
 
−
}
 
−
</style>
 
−
 
−
 
−
 
−
<!--HP SLIDER-->
 
−
<style type="text/css">
 
−
.hpslider{
 
−
    position: relative;
 
−
    width: 1150px;
 
−
    height: 400px;
 
−
    margin: auto;
 
−
    overflow: hidden;
 
−
    z-index: 13;
 
−
    background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png');
 
−
}
 
−
.hpslider .hpslider_left{
 
−
    position: absolute;
 
−
    background-color:black;
 
−
    top: 0px;   
 
−
    left: 0px;
 
−
    width: 50px;
 
−
    height: 100%;
 
−
    opacity: 0.5;
 
−
    z-index: 2;
 
−
}
 
−
.hpslider .hpslider_left img{
 
−
    position: relative;
 
−
    width: 100%;
 
−
    height: 200px;
 
−
    top: 27%;
 
−
    left: 10px;
 
−
}
 
−
.hpslider .hpslider_right{
 
−
    position: absolute;
 
−
    background-color:black;
 
−
    top: 0px;
 
−
    left: 1100px;
 
−
    width: 50px;
 
−
    height: 100%;
 
−
    opacity: 0.5;
 
−
    z-index: 2;
 
−
}
 
−
.hpslider .hpslider_right img{
 
−
    position: relative;
 
−
    width: 100%;
 
−
    height: 200px;
 
−
    top: 27%;
 
−
    left: -10px;
 
−
}
 
−
.hpslider .hpslider_imgs{
 
−
    position: absolute;
 
−
}
 
−
.hpslider .hpslider_imgs div{
 
−
  float: left;
 
−
  width: 1150px;
 
−
  height: 400px;
 
−
}
 
−
.hpslider .hpslider_imgs #slide1{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2015/f/f2/NaturalDiscourse_image.jpg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 25% 50%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide2{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
}
 
−
.hpslider .hpslider_imgs #slide3{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2015/5/54/UCLAiGEMPosterSession.jpeg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 65%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide4{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/9/96/Fahrion_Non_Fluoresce.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 65%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide5{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/b/b3/Fahrion_Blue_Fluoresce_side.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 65%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide6{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2015/7/73/UCLAiGEMBoltThreads.jpg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 40%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide7{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/9/95/Fahrion_Process_full.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 10% 50%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide8{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/f/f4/Fahrion_full_nonfluoresce.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 30%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide9{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/5/58/Fahrion_Group.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 45%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide10{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/b/be/Fahrion_David_Discussion.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 40%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide11{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/5/59/Fahrion_Process_Aal.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 40%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide12{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 65%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide13{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/e/ef/Fahrion_Blue_Straight.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 65%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide14{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/6/62/Fahrion_Process_Observers.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 50%;
 
−
}
 
−
.hpslider .hpslider_imgs #slide15{
 
−
  float: left;
 
−
    background-image:url('https://static.igem.org/mediawiki/2014/5/57/Fahrion_Historical_Wall.JPG');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    background-position: 0% 45%;
 
−
}
 
 
</style>
 
</style>
  

Revision as of 16:21, 15 October 2016

/*The following code was adapted from UCLA iGEM 2015*/