Difference between revisions of "Team:Duesseldorf"

Line 1: Line 1:
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
<style>
+
<style>
−
/* Wiki CSS */
+
/***** Wiki CSS ******/
−
 
+
−
#sideMenu, #top_title {display:none;}
+
#sideMenu,
−
#content {width:100%; padding: 0px; margin: 0px; margin-top: -2px;background-color:black;}
+
#top_title {
−
/* Page CSS */
+
display: none;
−
* {
+
}
−
    -webkit-box-sizing: border-box;
+
#content {
−
    -moz-box-sizing: border-box;
+
width: 100%;
−
    box-sizing: border-box
+
padding: 0px;
−
}
+
margin: 0px;
−
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+
margin-top: -2px;
−
html {
+
background-color: #e6e6e6;
−
    -ms-text-size-adjust: 100%;
+
}
−
    -webkit-text-size-adjust: 100%;
+
body {
−
}
+
background-color: #e6e6e6;
−
/* Standard */
+
font-family: 'Roboto', sans-serif;
−
body {
+
margin: 0px;
−
background-color: green;
+
line-height: 1.5;
−
    font-family: 'Roboto', sans-serif;
+
font-size: 15px;
−
    margin: 0px;
+
}
−
    line-height: 1.5;
+
/***** Normalize *****/
−
    font-size: 15px;
+
−
}
+
html {
−
h1,
+
-ms-text-size-adjust: 100%;
−
h2,
+
-webkit-text-size-adjust: 100%;
−
h3,
+
}
−
h4,
+
/***** Page CSS ******/
−
h5,
+
−
h6 {
+
* {
−
    color: #0C9476;
+
-webkit-box-sizing: border-box;
−
padding: 0px 3px 0px 0px;
+
-moz-box-sizing: border-box;
−
margin: 0px;
+
box-sizing: border-box
−
}
+
}
−
h1 {
+
/* Fonts */
−
    font-size: 36px
+
−
}
+
h1,
−
h2 {
+
h2,
−
    font-size: 30px
+
h3,
−
}
+
h4,
−
h3 {
+
h5,
−
    font-size: 24px
+
h6 {
−
}
+
color: #0C9476;
−
h4 {
+
padding: 0px 3px 0px 0px;
−
    font-size: 20px
+
margin: 0px;
−
}
+
}
−
h5 {
+
h1 {
−
    font-size: 18px
+
font-size: 36px
−
}
+
}
−
h6 {
+
h2 {
−
    font-size: 16px
+
font-size: 30px
−
}
+
}
−
p,
+
h3 {
−
a,
+
font-size: 24px
−
li {
+
}
−
    padding-left: 3px;
+
h4 {
−
    padding-right: 3px;
+
font-size: 20px
−
}
+
}
−
 
+
h5 {
−
.page {width:80%; margin: auto; background-color: #e6e6e6;}
+
font-size: 18px
−
</style>
+
}
 +
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
 +
}
 +
.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;
 +
}
 +
width: 80%;
 +
margin: auto;
 +
background-color: #e6e6e6;
 +
}
 +
</style>
 +
<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="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>
 
</head>
 
</head>
−
 
−
 
  
 
<body>
 
<body>
−
 
+
<div id="Banner" class="banner middle width"><img src="media/logo.png">
−
<div class="page">
+
</div>
−
<h1 style="text-align: center;"> Under Construction </h1>
+
<div id="Navigation" class="navigation middle width">
−
</div>
+
<ul class="topnav">
 +
<li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li>
 +
<li><a href="Contact.html">Contact Us!</a>
 +
</li>
 +
<li><a href="Parts.html">Parts</a>
 +
</li>
 +
<li><a href="Lab-Book.html">Lab Book</a>
 +
</li>
 +
<li><a href="Project-Description.html">Project</a>
 +
</li>
 +
<li><a href="Team.html">Team</a>
 +
</li>
 +
<li><a class="active" href="Home.html">Home</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div id="Page" class="page middle width border shadow">
 +
<div id="Content" class="content middle width">
 +
<div id="Welcome" class="row text-justify">
 +
<div class="col-12">
 +
<h1> Heading </h1>
 +
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 +
<h2> Heading 2 </h2>
 +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 +
</div>
 +
</div>
 +
<div id="Footer" class="row middle footer">
 +
<h3>Many thanks to our sponsors!</h3>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
</div>
 +
<div class="row middle">
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
<div class="col-2 col-m-4 colhalf sponsor"><img src="media/logo.svg" alt="Sponsor">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="row middle">
 +
<p style="font-size:60%; text-align:center;">Team Opoptosis, Heinrich-Heine Universität Düsseldorf. Design by Marvin van Aalst</p>
 +
</div>
 +
</div>
 
</body>
 
</body>
−
 
−
 
  
 
</html>
 
</html>

Revision as of 15:04, 4 July 2016

Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Heading 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Team Opoptosis, Heinrich-Heine Universität Düsseldorf. Design by Marvin van Aalst