Difference between revisions of "Template:Marburg"

Line 35: Line 35:
 
}
 
}
 
a {
 
a {
−
text-decoration: none;
+
text-decoration: none;
 
}
 
}
 +
#canvas {
 +
position: fixed;
 +
top:0;
 +
left:0;
 +
z-index:-1;
 +
}
 +
/* - - - - - - -  HEADER - - - - - - - */
 
header {
 
header {
 
  position: fixed;
 
  position: fixed;
Line 49: Line 56:
 
z-index: 10;
 
z-index: 10;
 
}
 
}
 +
#h_wrapper {
 +
display: inline-block;
 +
height: 100%;
 +
}
 +
 +
#h_logo {
 +
position: absolute;
 +
height: 100%;
 +
width: 167px;
 +
color:white;
 +
font-weight: bold;
 +
font-size:32px;
 +
line-height: 80px;
 +
animation: logo_fadeIn 1.0s ease-in-out;
 +
}
 +
@keyframes logo_fadeIn { from { opacity: 0; margin-left: -50px; } to { opacity: 1; margin-left: 0px; }}
 +
 +
/* - - - - - - -  DROP DOWN - - - - - - - */
 +
 +
.menu {
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
height: 100%;
 +
font-size: 18px;
 +
margin-left: 250px;
 +
font-weight: bold;
 +
}
 +
 +
/* Button */
 +
.menu li {
 +
position: relative;
 +
float: left;
 +
height: 100%;
 +
line-height: 80px;
 +
list-style-type: none;
 +
transition: background-color 0.2s ease-in-out;
 +
}
 +
.menu li a {
 +
display: block;
 +
color:black;
 +
padding: 0 15px 0 15px;
 +
}
 +
.menu li:hover {
 +
background-color: rgba(165,255,55,0.5);
 +
 +
}
 +
 +
.menu li:hover ul {
 +
visibility: visible;
 +
  max-height: 700px;
 +
opacity: 1.0;
 +
}
 +
 +
/* Container */
 +
.menu li ul {
 +
visibility: hidden;
 +
max-height: 0;
 +
opacity: 0.0;
 +
font-weight: normal;
 +
position: absolute;
 +
left:0;
 +
padding:0;
 +
background-color: rgba(200,200,200, 0.87);
 +
text-align: left;
 +
overflow:hidden;
 +
box-shadow: 0px 9px 20px 0px rgba(0,0,0,0.2), inset 0px 35px 45px -35px rgba(0,0,0,0.5);
 +
transition: all 0.3s ease-in-out;
 +
}
 +
 +
/* Element */
 +
.menu li ul li {
 +
display: block;
 +
padding: 0;
 +
width: 100%;
 +
min-width: 250px;
 +
line-height: 55px;
 +
white-space: nowrap;
 +
}
 +
.menu li ul li:hover {
 +
background-color:unset;
 +
}
 +
.menu li ul li a {
 +
transition: background-color 0.17s ease-in-out;
 +
}
 +
.menu li ul li a:hover {
 +
background-color: rgba(165,255,55,0.5);
 +
}
 +
 +
/* - - - - - - -  MAIN - - - - - - - */
 +
main {
 +
width: 100%;
 +
min-height: 100%;
 +
}
 +
 +
section:first-child {
 +
 +
}
 +
 +
section {
 +
width: 100%;margin-top: 190px;
 +
text-align: center;
 +
}
 +
 +
section:not(:last-child) {
 +
border-bottom:10px solid rgb(220,220,220);
 +
}
 +
.m_wrapper {
 +
max-width: 900px;
 +
display:inline-block;
 +
}
 +
.m_logo {
 +
position: relative;
 +
width: 100%;
 +
height: 510px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-top: -80px;
 +
margin-bottom: 50px;
 +
background-position: center;
 +
background-size: 100%;
 +
background-repeat: no-repeat;
 +
background-image: url(file:///D:/Sonstiges/Webdev/wiki/img/m_logo.png);
 +
  animation: ml_fadeIn 1.5s ease-in-out;
 +
text-align: center;
 +
}
 +
@keyframes ml_fadeIn { from { opacity: 0; } to { opacity: 1; }}
 +
 +
.m_team {
 +
background-position: center;
 +
width: 100%;
 +
height: 700px;
 +
border-radius: 30px 30px 30px 30px;
 +
background-size: 100%;
 +
background-repeat: no-repeat;
 +
background-image: url(file:///D:/Sonstiges/Webdev/wiki/img/team.jpg);
 +
}
 +
 +
.m_txt {
 +
display: inline-block;
 +
width: 100%;
 +
font-size: 24px;
 +
text-align: left;
 +
margin-bottom: 40px;
 +
padding:10px;
 +
}
 +
 +
 +
/* - - - - - - -  FOOTER - - - - - - - */
 +
footer {
 +
width: 100%;
 +
min-height: 100px;
 +
background-color:rgb(180,180,180);
 +
text-align: center;
 +
}
 +
 +
#f_wrapper {
 +
position: relative;
 +
  width: 900px;
 +
height: 100px;
 +
display:inline-block;
 +
text-align: left;
 +
}
 +
.f_l {
 +
float:left;
 +
position: relative;
 +
height: 100%;
 +
  width: 30%;
 +
}
 +
.f_m {
 +
float:left;
 +
position: relative;
 +
height: 100%;
 +
  width: 40%;
 +
}
 +
.f_r {
 +
float:left;
 +
position: relative;
 +
height: 100%;
 +
  width: 30%;
 +
}
 +
footer img {
 +
float:left;
 +
width: 50px;
 +
opacity: 0.5;
 +
margin: 27px 8px 0 8px;
 +
transition: all 0.2s ease-in-out;
 +
}
 +
footer img:hover {
 +
margin: 22px 8px 0 8px;
 +
opacity: 1.0;
 +
}
 +
 +
/* - - - - - - - - - - - - - - - */
 
</style>
 
</style>
 
<header>
 
<header>

Revision as of 21:08, 11 June 2018