Line 1: | Line 1: | ||
− | {{ | + | |
+ | body { | ||
+ | margin: 0; | ||
+ | font-family: Arial; | ||
+ | } | ||
+ | |||
+ | .top-container{ | ||
+ | background-color: #f1f1f1; | ||
+ | padding: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .header { | ||
+ | padding: 10px 16px; | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | padding: 16px; | ||
+ | } | ||
+ | |||
+ | .sticky { | ||
+ | position:fixed; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .navlogo { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 30; | ||
+ | |||
+ | } | ||
+ | main { | ||
+ | padding-top: 1%; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .sidenav { | ||
+ | height: 100%; | ||
+ | width: 0; | ||
+ | position: fixed; | ||
+ | z-index: 1; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | background-color: #111; | ||
+ | overflow-x: hidden; | ||
+ | transition: 0.5s; | ||
+ | padding-top: 60px; | ||
+ | } | ||
+ | |||
+ | .sidenav a { | ||
+ | padding: 8px 8px 8px 32px; | ||
+ | text-decoration: none; | ||
+ | font-size: 25px; | ||
+ | color: #818181; | ||
+ | display: block; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .sidenav a:hover { | ||
+ | color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | .sidenav .closebtn { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 25px; | ||
+ | font-size: 36px; | ||
+ | margin-left: 50px; | ||
+ | } | ||
+ | #main { | ||
+ | transition: margin-left .5s; | ||
+ | padding: 16px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-height: 450px) { | ||
+ | .sidenav {padding-top: 15px;} | ||
+ | .sidenav a {font-size: 18px;} | ||
+ | } | ||
<html> | <html> | ||
<head> | <head> |
Revision as of 12:46, 17 May 2018
body { margin: 0; font-family: Arial; } .top-container{ background-color: #f1f1f1; padding: 30px; text-align: center; } .header { padding: 10px 16px; background-color: white; } .content { padding: 16px; } .sticky { position:fixed; top: 0; width: 100%; }
.navlogo { display: block; margin-left: auto; margin-right: auto; width: 30; }
main {
padding-top: 1%;
}
h1 {
text-align: center;
} .sidenav {
height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;
}
- main {
transition: margin-left .5s; padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;}
}
Welcome to iGEM Würzburg!
Currently under construction!