Difference between revisions of "Team:TUDelft/Testpage3"

Line 25: Line 25:
 
.text-block2 {
 
.text-block2 {
 
     position: absolute;
 
     position: absolute;
−
     top: 15%;
+
     top: 12%;
 
     left: 1%;
 
     left: 1%;
 
     color: grey;
 
     color: grey;
Line 34: Line 34:
 
#fadein5 {
 
#fadein5 {
 
     position: absolute;
 
     position: absolute;
−
     top: 19%;
+
     top: 16%;
 
     right: 1%;
 
     right: 1%;
−
     width: 200px;
+
     width: 220px;
 
     z-index: 500;}
 
     z-index: 500;}
 
      
 
      
 
#fadein5 img{     
 
#fadein5 img{     
−
     max-height: 70px !important;
+
     max-height: 80px !important;
 
}
 
}
−
 
 
      
 
      
 
.tulogo {
 
.tulogo {
Line 72: Line 71:
 
}
 
}
 
      
 
      
−
.rdmrbttn .britney{
+
.rdmrbttn .britney, .rdmrbttn2 .britney{
 
   font-size:18px;
 
   font-size:18px;
 
   text-decoration:none;
 
   text-decoration:none;
Line 84: Line 83:
  
 
.rdmrbttn .britney:hover{
 
.rdmrbttn .britney:hover{
−
   background: rgba(0,0,0,0);
+
   background: rgba(0,0,0,0.4);
 
   color:#fff;
 
   color:#fff;
−
}
+
}  
  
 
.rdmrbttn {
 
.rdmrbttn {
 
     position: absolute;
 
     position: absolute;
 
     top: 90%;
 
     top: 90%;
−
     left: 42%;
+
     left: 45%;
 
}
 
}
 +
.rdmrbttn:hover {
 +
    -webkit-transform: scale(1.2);
 +
    -ms-transform: scale(1.2);
 +
    transform: scale(1.2);
 +
}   
 +
   
 +
div.pree {
 +
    border-color: red;
 +
    border-radius: 50px;
 +
    background-color: transparent;
 +
    padding: 20px;
 +
}   
  
−
#getstarted{
+
.caption h3 {
−
   scroll-behavior: smooth;
+
        color: white;
 +
    }   
 +
   
 +
.thumbnail {
 +
    background-color: #F1F1F1;
 +
} 
 +
.thumbnail img {
 +
    opacity: 0.7;
 +
}   
 +
.thumbnail:hover {
 +
    background-color: #F2F2F2;
 +
    -webkit-transform: scale(1.05);
 +
    -ms-transform: scale(1.05);
 +
    transform: scale(1.05);
 +
}     
 +
.thumbnail:hover div .boxhd {
 +
    font-weight: 300;
 +
}   
 +
.thumbnail:hover img {
 +
    opacity: 1;       
 +
}   
 +
/*SMALL SCREENS */
 +
#showcase2{
 +
   background-image:url('https://static.igem.org/mediawiki/2018/8/84/T--TUDelft--runner.jpg');
 +
  background-size:cover;
 +
  background-position:center;
 +
  background-repeat: no-repeat;
 +
  height:100vh;
 +
  display:flex;
 +
  flex-direction:column;
 +
  justify-content:center;
 +
  align-items:center;
 +
  text-align:center;
 +
  margin-top: -100px;
 +
  margin-left: 15px;
 +
  margin-right: 15px;
 +
  position: relative;
 +
} 
 +
.tulogosmall {
 +
    position: absolute;
 +
    top: 18%;
 +
    left: 1%;
 +
    color: grey;
 +
    max-height: 90px;
 +
    width: auto;
 +
    z-index: 5;
 +
}     
 +
.adopesmall {
 +
    position: absolute;
 +
    top: 20%;
 +
    right: 1%;
 +
    width: 150;
 +
    z-index: 5;
 
}
 
}
−
 
+
.tulogo2 {
−
       
+
    max-height: 90px !important;
 +
    width: auto;
 +
    z-index: 1;
 +
}
 +
.adopelogo2 {
 +
    max-height: 70px !important;
 +
    width: auto;
 +
    z-index: 1;
 +
}
 +
.rdmrbttn2 {
 +
    position: absolute;
 +
    top: 70%;
 +
    left: 45%;
 +
} 
 +
#jointherace {
 +
    font-size: 25px !important;
 +
    line-height: 25px;
 +
    text-align: center;
 +
    position: absolute;
 +
    top: 40%;
 +
    font-weight: 100;
 +
    }
 +
 
 
</style>
 
</style>
 
</head>
 
</head>
Line 107: Line 192:
  
  
−
<div id="showcase">
+
<header id="showcase">
 
<div class="overlaycontainer hidden-xs" >
 
<div class="overlaycontainer hidden-xs" >
 
     <div id="fadein1">On your mark.</div>
 
     <div id="fadein1">On your mark.</div>
Line 121: Line 206:
 
     <div class="rdmrbttn"><a href="#getstarted" class="britney">Read More</a></div>
 
     <div class="rdmrbttn"><a href="#getstarted" class="britney">Read More</a></div>
 
</div>
 
</div>
 +
</header>
 +
<header id="showcase2" class="hidden-lg hidden-md hidden-sm">
 +
<div class="overlaycontainer " class="text-center">
 +
    <div id="jointherace"><br>Join the race against gene doping.</div>
 +
 +
    <div class="tulogosmall">
 +
    <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo2 img-responsive"></div>
 +
    <div class="adopesmall">
 +
    <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png" class="adopelogo2 img-responsive" ></div>
 +
   
 +
    <div class="rdmrbttn2"><a href="#getstarted" class="britney">Read More</a></div>
 
</div>
 
</div>
 +
</header>
 +
   
 
     <div id="spcmkr"></div>
 
     <div id="spcmkr"></div>
 
     <div id="getstarted" class="spcmkr"></div>
 
     <div id="getstarted" class="spcmkr"></div>

Revision as of 20:29, 14 October 2018

ADOPE