sancestyle.css
Quell Code
body {
background: #2E9AFF;
overflow-x: hidden;
font-family: 'Roboto', sans-serif;
line-height: 1.5em;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
h1 {
margin-bottom: 30px;
}
p {
margin-bottom: 20px;
}
.toppi {
position: relative;
height: 100%;
}
.wrapper {
position: relative;
width: 80%;
margin: 0 auto;
transition: 0.5s;
}
.content {
padding: 100px 60px 60px;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
input#off-canvas-menu {
display: none;
}
label.off-canvas-menu-label {
position: fixed;
width: 60px;
height: 60px;
cursor: pointer;
text-transform: uppercase;
font-weight: 700;
z-index: 999;
}
label.off-canvas-menu-label i {
position: absolute;
top: 18px;
right: 20px;
font-size: 24px;
color: #fff;
transition: 0.3s;
}
input#off-canvas-menu[type=checkbox]:checked ~ label.off-canvas-menu-label i {
transform: rotate(90deg);
}
input#off-canvas-menu[type=checkbox]:checked ~ nav.off-canvas-menu {
transform: translateX(0);
}
input#off-canvas-menu[type=checkbox]:checked ~ .wrapper {
transform: translateX(300px);
}
input#off-canvas-menu[type=checkbox]:checked ~ .overlay {
height: 100%;
opacity: 1;
}
nav li,
label.off-canvas-menu-label {
transition: 0.2s;
}
nav li:hover,
label.off-canvas-menu-label:hover,
input#off-canvas-menu[type=checkbox]:checked ~ label.off-canvas-menu-label {
background: #207ce5 !important;
}
.main-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #3a3a3a;
box-shadow: 0 0 10px rgba(0,0,0,0.9);
z-index: 3;
}
.main-menu ul.nav-icons {
float: right;
}
.main-menu li {
float: left;
line-height: 60px;
list-style: none;
transition: 0.3s;
}
.main-menu li a {
display: inline-block;
}
.main-menu li i {
width: 60px;
font-size: 20px;
color: #fff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.off-canvas-menu {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: #3a3a3a;
font-size: 16px;
transform: translateX(-100%);
box-shadow: 0 0 10px rgba(0,0,0,0.9);
transition: 0.5s;
z-index: 2;
}
.off-canvas-menu input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
display: block;
cursor: pointer;
}
.off-canvas-menu ul {
margin: 0;
padding: 0;
}
.off-canvas-menu > ul {
margin-top: 60px;
}
.off-canvas-menu a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
.off-canvas-menu li {
position: relative;
float: left;
width: 100%;
list-style: none;
color: #fff;
transition: 0.5s;
border-top: 1px solid #555;
}
.off-canvas-menu > ul > li:last-child {
border-bottom: 1px solid #555;
}
.off-canvas-menu ul li:first-child {
border-top: none;
}
.off-canvas-menu ul > li.sub > a:after {
position: relative;
float: right;
content: '+';
font-size: 24px;
font-weight: 700;
color: #fff;
vertical-align: middle;
transition: 0.5s;
}
.off-canvas-menu .submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
border-top: none;
}
.off-canvas-menu input[type=checkbox]:checked ~ .submenu {
border-top: 1px solid #555;
max-height: 999px;
}
.off-canvas-menu input[type=checkbox]:checked ~ a:after {
transform: rotate(45deg);
}
.off-canvas-menu .submenu li {
background: #333;
}
.off-canvas-menu .submenu li a {
padding-left: 30px;
}
.off-canvas-menu .submenu li li a {
padding-left: 35px;
}
.off-canvas-menu .submenu li li li a {
padding-left: 40px;
}
.off-canvas-menu .submenu li.sub {
list-style: none;
}