Difference between revisions of "Template:Duesseldorf"

Line 5: Line 5:
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:auto;}
 
#content { padding:0px; width:auto;}
−
<style>
+
 
 +
* {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box
 +
}
 +
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 +
html {
 +
    -ms-text-size-adjust: 100%;
 +
    -webkit-text-size-adjust: 100%
 +
}
 +
/* Standard */
 +
body {
 +
    background-color: #e6e6e6;
 +
    font-family: 'Roboto', sans-serif;
 +
    margin: 0px;
 +
    line-height: 1.5;
 +
    font-size: 15px;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
    color: #0C9476;
 +
padding: 0px 3px 0px 0px;
 +
margin: 0px;
 +
}
 +
h1 {
 +
    font-size: 36px
 +
}
 +
h2 {
 +
    font-size: 30px
 +
}
 +
h3 {
 +
    font-size: 24px
 +
}
 +
h4 {
 +
    font-size: 20px
 +
}
 +
h5 {
 +
    font-size: 18px
 +
}
 +
h6 {
 +
    font-size: 16px
 +
}
 +
p,
 +
a,
 +
li {
 +
    padding-left: 3px;
 +
    padding-right: 3px;
 +
}
 +
.text-justify{
 +
    text-align: justify;
 +
}
 +
.text-left{
 +
    text-align: left;
 +
}
 +
.text-right {
 +
    text-align: right;
 +
}
 +
img {max-width:100%; height:auto}
 +
/* Nützliche Klassen*/
 +
.middle {
 +
    margin: auto;
 +
}
 +
.width {
 +
    width: 80%;
 +
    max-width: 1200px;
 +
}
 +
.top-padding{
 +
padding-top:15px;
 +
}
 +
/*Responsive*/
 +
.row {
 +
width:100%;
 +
    float: left;
 +
}
 +
.row::after {
 +
    content: "";
 +
    clear: both;
 +
    display: table;
 +
}
 +
/* For mobile phones: */
 +
[class*="col-"] {
 +
    width: 100%;
 +
float:left;
 +
}
 +
.colhalf{
 +
width:50%;
 +
}
 +
@media only screen and (min-width: 600px) {
 +
    /* For tablets: */
 +
   
 +
    .col-m-1 {
 +
        width: 8.33%;
 +
    }
 +
    .col-m-2 {
 +
        width: 16.66%;
 +
    }
 +
    .col-m-3 {
 +
        width: 25%;
 +
    }
 +
    .col-m-4 {
 +
        width: 33.33%;
 +
    }
 +
    .col-m-5 {
 +
        width: 41.66%;
 +
    }
 +
    .col-m-6 {
 +
        width: 50%;
 +
    }
 +
    .col-m-7 {
 +
        width: 58.33%;
 +
    }
 +
    .col-m-8 {
 +
        width: 66.66%;
 +
    }
 +
    .col-m-9 {
 +
        width: 75%;
 +
    }
 +
    .col-m-10 {
 +
        width: 83.33%;
 +
    }
 +
    .col-m-11 {
 +
        width: 91.66%;
 +
    }
 +
    .col-m-12 {
 +
        width: 100%;
 +
    }
 +
}
 +
@media only screen and (min-width: 1024px) {
 +
    /* For desktop: */
 +
   
 +
    .col-1 {
 +
        width: 8.33%;
 +
    }
 +
    .col-2 {
 +
        width: 16.66%;
 +
    }
 +
    .col-3 {
 +
        width: 25%;
 +
    }
 +
    .col-4 {
 +
        width: 33.33%;
 +
    }
 +
    .col-5 {
 +
        width: 41.66%;
 +
    }
 +
    .col-6 {
 +
        width: 50%;
 +
    }
 +
    .col-7 {
 +
        width: 58.33%;
 +
    }
 +
    .col-8 {
 +
        width: 66.66%;
 +
    }
 +
    .col-9 {
 +
        width: 75%;
 +
    }
 +
    .col-10 {
 +
        width: 83.33%;
 +
    }
 +
    .col-11 {
 +
        width: 91.66%;
 +
    }
 +
    .col-12 {
 +
        width: 100%;
 +
    }
 +
}
 +
/*Header*/
 +
.banner {
 +
    background-color: #e6e6e6;
 +
}
 +
.navigation {
 +
    background-color: #e6e6e6;
 +
}
 +
ul.topnav {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  overflow: hidden;
 +
}
 +
ul.topnav li {float:right;}
 +
ul.topnav li a {
 +
  display: inline-block;
 +
  color: grey;
 +
  text-align: center;
 +
  padding: 14px 16px;
 +
  text-decoration: none;
 +
  transition: 0.3s;
 +
  font-size: 17px;
 +
}
 +
ul.topnav li a.active {color: #0C9476;}
 +
ul.topnav li a:hover {color: #111;}
 +
ul.topnav li.icon {display: none;}
 +
@media screen and (max-width:1024px) {
 +
  ul.topnav li:not(:last-child) {display: none;}
 +
  ul.topnav li {float:left;}
 +
  ul.topnav li.icon {
 +
    float: right;
 +
    display: inline-block;
 +
  }
 +
}
 +
@media screen and (max-width:1024px) {
 +
  ul.topnav.responsive {position: relative;}
 +
  ul.topnav.responsive li.icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  ul.topnav.responsive li {
 +
    float: none;
 +
    display: inline;
 +
  }
 +
  ul.topnav.responsive li a {
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
}
 +
/*Page*/
 +
.border {
 +
    border-radius: 10px;
 +
}
 +
.shadow {
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
.page {
 +
    background-color: #ffffff;
 +
    margin-bottom: 6%;
 +
    padding-top: 4%;
 +
    padding-bottom: 2%;
 +
overflow-x: auto
 +
}
 +
.content {
 +
}
 +
.footer {
 +
margin-top: 100px;
 +
}
 +
/* Footer Gallery */
 +
.sponsor {
 +
padding: 5px;
 +
}
 +
.sponsor img {
 +
    -webkit-filter: grayscale(100%);
 +
    /* Chrome, Safari, Opera */
 +
   
 +
    filter: grayscale(100%);
 +
}
 +
.sponsor img:hover {
 +
    -webkit-filter: grayscale(0%);
 +
    filter: none;
 +
}
 +
/* Switch Gallery*/
 +
.sg-container {
 +
    max-width: 100%;
 +
    float: left;
 +
    display: list-item;
 +
    list-style-type: none;
 +
    position: relative;
 +
margin:4px;
 +
 +
}
 +
.sg-container img {
 +
    max-width: 100%;
 +
border-radius: 10px 10px 10px 10px;
 +
-moz-border-radius: 10px 10px 10px 10px;
 +
-webkit-border-radius: 10px 10px 10px 10px;
 +
border: 0px solid #000000;
 +
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
.img-hidden {
 +
    bottom: 0;
 +
    position: absolute;
 +
    opacity: 0;
 +
    filter: alpha(opacity=0);
 +
    width: 100%;
 +
    z-index: 1000;
 +
    transition: opacity 2s;
 +
    -moz-transition: opacity 2s;
 +
    -webkit-transition: opacity 2s;
 +
}
 +
.sg-container.active .img-hidden {
 +
    opacity: 1;
 +
    filter: alpha(opacity=100);
 +
    transition: opacity 2s;
 +
    -moz-transition: opacity 2s;
 +
    -webkit-transition: opacity 2s;
 +
}
 +
/* Accordion */
 +
button.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 15px;
 +
    transition: 0.4s;
 +
}
 +
button.accordion.active, button.accordion:hover {
 +
    background-color: #ddd;
 +
}
 +
div.panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: 0.6s ease-in-out;
 +
    opacity: 0;
 +
}
 +
div.panel.show {
 +
    opacity: 1;
 +
    max-height: 500px; 
 +
}
 +
</style>
 +
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 +
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
 +
<!-- Responsive Nav -->
 +
<script>
 +
function myFunction() {
 +
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
 +
}
 +
</script>
 +
 +
<!-- Img Swap -->
 +
<script type="text/javascript">
 +
                $(document).ready(function() {
 +
                    $('.sg-container').on('click',function() {
 +
                        $(this).toggleClass('active');
 +
                    });
 +
 
 +
                });
 +
</script>
 +
 
 +
 
 
</html>
 
</html>

Revision as of 11:16, 2 July 2016