Difference between revisions of "Template:Groningen/CSS"

 
(86 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
/* HIER MOET DE CSS*/
 
/* HIER MOET DE CSS*/
  
 +
#menu-btn {
 +
    top: 5em !important;
 +
    right: 0.3em !important;
 +
}
  
 +
.fa-arrow-circle-down {
 +
width:100px;height:100px;font-size: 4em;
 +
}
 +
.startbutton {
 +
    color: #ffffff61 !important;
 +
    font-weight: bold;
 +
    position: relative;
 +
    top: 500px;
 +
}
 +
.greenbutton {
 +
color: #009739 !important;
 +
}
  
 +
.blackbutton {
 +
color: #00140F !important;
 +
}
 +
 +
.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) {
 +
  .startbutton {
 +
    top: 200px;
 +
  }
 +
}
 +
@media only screen and (max-width: 900px) {
 +
  .startbutton {
 +
    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  {
 +
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;
 
     top: 5%;
 
     top: 5%;
 
     left: 30%;
 
     left: 30%;
−
width:40%
+
width:40%;
 +
z-index:200
 
}
 
}
 
#myVideo {
 
#myVideo {
−
width:100%;
+
    width: 100%;
 +
    position: relative;
 +
    z-index: 100;
 
}
 
}
  
Line 76: Line 184:
 
}
 
}
  
−
.igem_2018_team_content {background:#EEEEEE!important;}
+
.igem_2018_team_content {background:#E2E2E2!important;}
 
.igem_2018_team_column_wrapper {background:white !important;}
 
.igem_2018_team_column_wrapper {background:white !important;}
  
Line 82: Line 190:
 
#blok01 {
 
#blok01 {
 
     position: absolute !important;
 
     position: absolute !important;
−
     top: 200px !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;
 
}
 
}
 +
#titleblok01 {
 +
    color:#3A3A3A !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
}
 +
#linkblok01 {
 +
    color: #42AC55 !important;
 +
    font-weight: 600 !important;
 +
    text-align: center !important;
 +
    text-decoration-color: #42AC55 !important;
 +
}
 +
 +
  
 
#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;
 
}
 
}
  
 
h4.mainpageh4{
 
h4.mainpageh4{
−
color: #020203;
+
    color: #020203;
−
font-weight: bold;
+
    font-weight: bold;
−
text-align: left;
+
    text-align: left;
 
}
 
}
  
 
.mainpageblok {
 
.mainpageblok {
 
}
 
}
−
.zwart {color:black;}
+
    font-seize: 3em; !important
 +
    .zwart {color:black;}
  
 
#tocc {
 
#tocc {
Line 183: 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