|
|
| Line 6: |
Line 6: |
| | #content { padding:0px; width:auto;} | | #content { padding:0px; width:auto;} |
| | | | |
| − | * {
| |
| − | -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> | | </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> |
