Difference between revisions of "Template:Groningen/CSS"

 
(52 intermediate revisions by 3 users not shown)
Line 3: Line 3:
  
 
/* HIER MOET DE CSS*/
 
/* HIER MOET DE CSS*/
 +
 +
#menu-btn {
 +
    top: 5em !important;
 +
    right: 0.3em !important;
 +
}
  
 
.fa-arrow-circle-down {
 
.fa-arrow-circle-down {
Line 10: Line 15:
 
     color: #ffffff61 !important;
 
     color: #ffffff61 !important;
 
     font-weight: bold;
 
     font-weight: bold;
−
    margin-left: 50%;
 
 
     position: relative;
 
     position: relative;
 
     top: 500px;
 
     top: 500px;
 +
}
 +
.greenbutton {
 +
color: #009739 !important;
 
}
 
}
  
−
@media only screen and (max-width: 1450px) {
+
.blackbutton {
−
  .startbutton {
+
color: #00140F !important;
−
    top: 300px;
+
−
  }
+
 
}
 
}
 +
 +
.brownbutton {
 +
color: #805113 !important;
 +
}
 +
 +
.redbutton {
 +
color: #E4140F !important;
 +
}
 +
 +
.bluebutton {
 +
color: #174290 !important;
 +
}
 +
 +
 +
 +
figcaption {
 +
    display: block;
 +
}
 +
.box {
 +
    float: left;
 +
    width: 200px;
 +
    margin-left: 10px;
 +
    margin-top: 10px;
 +
    padding: 5px;
 +
    border: 2px white;
 +
}
 +
.boxed {
 +
  border: 10px solid green ;
 +
  padding: 20px
 +
}
 +
 +
  
 
@media only screen and (max-width: 1100px) {
 
@media only screen and (max-width: 1100px) {
Line 30: Line 67:
 
     top: 20px;
 
     top: 20px;
 
   }
 
   }
 +
 +
img.mainimg {
 +
display:none;
 +
}
 +
.greenbutton {display:none; }
 +
.blackbutton {display:none; }
 +
.brownbutton {display:none; }
 +
.bluebutton {display:none; }
 +
.redbutton {display:none; }
 +
 
}
 
}
 
.startbutton:hover, .startbutton:active  {
 
.startbutton:hover, .startbutton:active  {
 
color:white !important;
 
color:white !important;
 +
}
 +
.greenbutton:hover, .greenbutton:active {
 +
    color: #009739ad !important;
 
}
 
}
  
 +
.blackbutton:hover, .blackbutton:active {
 +
    color: #00140Fad !important;
 +
}
 +
 +
.brownbutton:hover, .brownbutton:active {
 +
    color: #805113ad !important;
 +
}
 +
 +
.bluebutton:hover, .bluebutton:active {
 +
    color: #174290ad !important;
 +
}
 +
 +
.redbutton:hover, .redbutton:active {
 +
    color: #E4140Fad !important;
 +
}
 +
 +
 +
 +
.div1, div2{
 +
 +
display: inline-block;
 +
 +
}
 +
.tab {
 +
margin-left: 2.5em
 +
}
 
.contentvid {
 
.contentvid {
 
position: absolute;
 
position: absolute;
Line 115: Line 191:
 
     position: absolute !important;
 
     position: absolute !important;
 
     top: 324px !important;
 
     top: 324px !important;
−
     left: 700px;
+
     left: 700px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     a:link color: #000000 !important;
+
     a:link color: #000000;
 
}
 
}
 
#titleblok01 {
 
#titleblok01 {
Line 136: Line 212:
 
#blok02 {
 
#blok02 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 900px !important;
+
     top: 988px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 40px;
+
     left: 40px !important;
 
}
 
}
 +
#titleblok02 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok02 {
 +
    color: #00140F !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #00140F !important;
 +
}
 +
 
#blok03 {
 
#blok03 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 1450px !important;
+
     top: 1578px !important ;
−
     z-index: 100 !important;
+
     z-index: 100 !important ;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 700px;
+
     left: 700px !important;
 
}
 
}
 +
#titleblok03 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok03 {
 +
    color: #805113 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #805113 !important;
 +
}
 +
 
#blok04 {
 
#blok04 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 2100px !important;
+
     top: 2205px  !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 40px;
+
     left: 40px !important;
 
}
 
}
 +
#titleblok04 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok04 {
 +
    color: #E4140F !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #E4140F !important;
 +
}
 +
 
#blok05 {
 
#blok05 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 2700px !important;
+
     top: 2828px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 700px;
+
     left: 700px !important;
 
}
 
}
 +
#titleblok05 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok05 {
 +
    color: #174290 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #174290 !important;
 +
}
 +
 
#blok06 {
 
#blok06 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 3400px !important;
+
     top: 3528px !important;
 
     z-index: 100 !important;
 
     z-index: 100 !important;
 
     width: 450px !important;
 
     width: 450px !important;
−
     left: 40px;
+
     left: 40px !important;
 +
}
 +
#titleblok06 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok06 {
 +
    color: #93B131 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #93B131 !important;
 
}
 
}
  
Line 230: Line 365:
 
}
 
}
  
 +
 +
@media only screen and (max-width: 1450px) {
 +
    .startbutton {
 +
      top: 300px;
 +
  }
 +
  .igem_2018_team_content .igem_2018_team_column_wrapper {
 +
    margin: 0 auto;
 +
    width:95%;
 +
}
 +
 +
@media only screen and (max-width: 1200px) {
 +
#blok01, #blok02, #blok03, #blok04, #blok05, #blok06 {
 +
    position: relative !important;
 +
    width: 95% !important;
 +
    top: 0 !important;
 +
    left: 0 !important;
 +
    margin: 50px 0 10px 0 !important;
 +
    background: #00973930;
 +
    padding: 20px;
 +
}
 +
.mainimg {display:none;}
 +
.startbutton {
 +
      display:none;
 +
  }
 +
#menu-btn {
 +
z-index:2000 !important;
 +
}
 +
}
 +
 +
 +
 +
h4 .quoteh4 {
 +
    text-align: center !important;
 +
    font-style: italic !important;
 +
    font-size: 1.6em !important;
 +
    padding: 40px !important;
 +
    background: #e2e2e2 !important;
 +
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 23:32, 17 October 2018