|
|
| Line 4: |
Line 4: |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no"> | | <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"> | | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>
| |
| − |
| |
| − |
| |
| − |
| |
| | <style> | | <style> |
| | /***** Wiki CSS ******/ | | /***** Wiki CSS ******/ |
| Line 32: |
Line 14: |
| | background-color: red; | | background-color: red; |
| | } | | } |
| − | #content {
| |
| − | width: 500px;
| |
| − | padding: 0;
| |
| − | margin: auto;
| |
| − | background-color: #e6e6e6;
| |
| − | font-family: 'Roboto', sans-serif;
| |
| − | line-height: 1.5;
| |
| − | font-size: 15px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /***** Normalize *****/
| |
| − |
| |
| − | html {
| |
| − | -ms-text-size-adjust: 100%;
| |
| − | -webkit-text-size-adjust: 100%;
| |
| − | }
| |
| − | /***** Page CSS ******/
| |
| − |
| |
| − | * {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box
| |
| − | }
| |
| − | /* Fonts */
| |
| − |
| |
| − | h1,
| |
| − | h2,
| |
| − | h3,
| |
| − | h4,
| |
| − | h5,
| |
| − | h6 {
| |
| − | color: #0C9476;
| |
| − | padding-bottom: 5px;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-size: 36px
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-size: 30px
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | font-size: 24px
| |
| − | }
| |
| − |
| |
| − | h4 {
| |
| − | font-size: 20px
| |
| − | }
| |
| − |
| |
| − | h5 {
| |
| − | font-size: 18px
| |
| − | }
| |
| − |
| |
| − | h6 {
| |
| − | font-size: 16px
| |
| − | }
| |
| − |
| |
| − | .page a:link {
| |
| − | color: #0C9476;
| |
| − | font-weight: bold;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease;
| |
| − | transition: all 0.4s ease;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .page a:visited {
| |
| − | color: #0C9476;
| |
| − | }
| |
| − |
| |
| − | .page a:hover {
| |
| − | color: black;
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | .page a:active {
| |
| − | color: #0C9476;
| |
| − | }
| |
| − |
| |
| − | .page p {padding-left: 3px; padding-right: 3px; font-size: 15px;}
| |
| − | .page ul {padding-left: 3px; padding-right: 3px; font-size: 15px;}
| |
| − |
| |
| − | dd {
| |
| − | font-size: 12px;
| |
| − | }
| |
| − | b {color:#0C9476 }
| |
| − |
| |
| − | .text-justify {
| |
| − | text-align: justify;
| |
| − | }
| |
| − |
| |
| − | .text-left {
| |
| − | text-align: left;
| |
| − | padding-right: 10px;
| |
| − | }
| |
| − |
| |
| − | .text-right {
| |
| − | text-align: right;
| |
| − | padding-left: 10px;
| |
| − | }
| |
| − |
| |
| − | 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;
| |
| − | margin-bottom: 2%
| |
| − | }
| |
| − |
| |
| − | .navigation {
| |
| − | background-color: #e6e6e6;
| |
| − | margin-bottom: 1%;
| |
| − | }
| |
| − |
| |
| − | ul.topnav {
| |
| − | list-style: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | ul.topnav li {display:inline;}
| |
| − |
| |
| − | ul.topnav li a {
| |
| − | display: inline-block;
| |
| − | color: grey;
| |
| − | text-align: center;
| |
| − | padding: 14px 16px;
| |
| − | text-decoration: none;
| |
| − | font-weight: normal;
| |
| − | font-size: 17px;
| |
| − | -webkit-transition: all 0.4s ease;
| |
| − | -moz-transition: all 0.4s ease;
| |
| − | -ms-transition: all 0.4s ease;
| |
| − | -o-transition: all 0.4s ease;
| |
| − | transition: all 0.4s ease;
| |
| − | }
| |
| − |
| |
| − | ul.topnav li a.active {
| |
| − | color: #0C9476;
| |
| − | }
| |
| − |
| |
| − | ul.topnav li a:hover {
| |
| − | color: #0C9476;
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | .attention {
| |
| − | background-color: #0C9476;
| |
| − | border: 1px solid #09765e;
| |
| − | border-radius: 4px;
| |
| − | padding: 25px;
| |
| − | margin-bottom: 25px;
| |
| − | }
| |
| − |
| |
| − | .footer {
| |
| − | margin-top: 50px;
| |
| − | }
| |
| − | /* Footer Gallery */
| |
| − |
| |
| − | .sponsor {
| |
| − | padding: 5px;
| |
| − | }
| |
| − |
| |
| − | .sponsor img {
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | 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;
| |
| − | cursor: pointer
| |
| − | }
| |
| − |
| |
| − | .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;
| |
| − | }
| |
| − | .sponsors img:hover {
| |
| − | -webkit-filter: grayscale(0%);
| |
| − | filter: none;
| |
| − | }
| |
| − |
| |
| − | .sponsors img {
| |
| − | display: inline-block;
| |
| − | vertical-align: middle;
| |
| − | width: 25%;
| |
| − | transition: transform .2s ease-in-out;
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | filter: grayscale(100%);
| |
| − | }
| |
| − |
| |
| − | /* Change number of boxes per row based on viewport width */
| |
| − | @media all and (min-width: 600px) {
| |
| − | .sponsors img {
| |
| − | width: 20%;
| |
| − | }
| |
| − | }
| |
| − | @media all and (min-width: 1024px) {
| |
| − | .sponsors img {
| |
| − | width: 15%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | list-style-type: none;
| |
| − | list-style-image: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | overflow: hidden;
| |
| − | background-color: #333;
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | nav li a, .dropbtn {
| |
| − | display: inline-block;
| |
| − | color: white;
| |
| − | text-align: center;
| |
| − | padding: 14px 16px;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav li a:hover, .dropdown:hover .dropbtn {
| |
| − | background-color: red;
| |
| − | }
| |
| − |
| |
| − | nav li.dropdown {
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: #f9f9f9;
| |
| − | min-width: 160px;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | }
| |
| − |
| |
| − | .dropdown-content a {
| |
| − | color: black;
| |
| − | padding: 12px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content a:hover {background-color: #f1f1f1}
| |
| − |
| |
| − | .dropbox-content ul {
| |
| − | list-style-image: none;
| |
| − | }
| |
| − |
| |
| − | .dropdown:hover .dropdown-content {
| |
| − | display: block;
| |
| − | }
| |
| | | | |
| | </style> | | </style> |
| | </head> | | </head> |
| − |
| |
| | | | |
| | <nav> | | <nav> |
| Line 570: |
Line 48: |
| | </ul> | | </ul> |
| | </nav> | | </nav> |
| | + | |
| | + | |
| | </html> | | </html> |
