|
|
| Line 4: |
Line 4: |
| | @import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'); | | @import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'); |
| | | | |
| − | * {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | *, *:before, *:after {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | html, body {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | font: 12px/1 'Montserrat', sans-serif;
| |
| − | color: #333;
| |
| − | background: #333;
| |
| − | overflow-x: hidden;
| |
| − | }
| |
| − |
| |
| − | .wrapper {
| |
| − | display: flex;
| |
| − | min-height: 100%;
| |
| − | }
| |
| − |
| |
| − | .sidebar {
| |
| − | position: absolute;
| |
| − | width: 220px;
| |
| − | }
| |
| − |
| |
| − | .content {
| |
| − | flex: 1;
| |
| − | padding: 0px;#######
| |
| − | background: #191919;
| |
| − | box-shadow: 0 0 5px rgba(0,0,0,1);
| |
| − | transform: translate3d(0,0,0);
| |
| − | transition: transform .3s;
| |
| − | }
| |
| − |
| |
| − | .content.isOpen {
| |
| − | transform: translate3d(220px,0,0);
| |
| − | background: #191919;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .button {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .button:before {
| |
| − | content: '\f0c9';
| |
| − | font: 42px fontawesome;
| |
| − | }
| |
| − |
| |
| − | /* Demo Navigation */
| |
| − |
| |
| − | .title {
| |
| − | font-size: 16px;
| |
| − | line-height: 50px;
| |
| − | text-align: center;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: 7px;
| |
| − | color: #eee;
| |
| − | border-bottom: 1px solid #222;
| |
| − | background: #2a2a2a;
| |
| − | }
| |
| − |
| |
| − | .nav li a {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | padding: 15px 15px 15px 50px;
| |
| − | font-size: 14px;
| |
| − | color: #eee;
| |
| − | border-bottom: 1px solid #222;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .nav li a:before {
| |
| − | font: 14px fontawesome;
| |
| − | position: absolute;
| |
| − | top: 19px;
| |
| − | left: 20px;
| |
| − | }
| |
| − |
| |
| − | .nav li:nth-child(1) a:before { content: '\f00a'; }
| |
| − | .nav li:nth-child(2) a:before { content: '\f1ae'; }
| |
| − | .nav li:nth-child(3) a:before { content: '\f0e8'; }
| |
| − | .nav li:nth-child(4) a:before { content: '\f085'; }
| |
| − | .nav li:nth-child(5) a:before { content: '\f040'; }
| |
| − | .nav li:nth-child(6) a:before { content: '\f02c'; }
| |
| − | .nav li:nth-child(7) a:before { content: '\f19c'; }
| |
| − | .nav li:nth-child(8) a:before { content: '\f007'; left: 23px; }
| |
| − | .nav li:nth-child(9) a:before { content: '\f004'; }
| |
| − | .nav li:nth-child(10) a:before { content: '\f080'; }
| |
| − | .nav li:nth-child(11) a:before { content: '\f140'; }
| |
| − | .nav li:nth-child(12) a:before { content: '\f108'; }
| |
| − |
| |
| − | .nav li a:hover {
| |
| − | background: #444;
| |
| − | }
| |
| − |
| |
| − | .nav li a.active {
| |
| − | box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
| |
| − | background: #444;
| |
| − | }
| |
| − |
| |
| − | /* Demo Description */
| |
| − |
| |
| − | h1 {
| |
| − | margin: 25px 0 15px;
| |
| − | font-size: 28px;
| |
| − | font-weight: 400;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-size: 18px;
| |
| − | font-weight: 400;
| |
| − | color: #999;
| |
| − | }
| |
| − |
| |
| − | /* Images */
| |
| − |
| |
| − | #comingSoon {
| |
| − | width: auto;
| |
| − | margin-left: -220px;
| |
| − | }
| |
| − |
| |
| − | /* Fixing previously installed css -_- */
| |
| − | .firstHeading {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | border: 0px;
| |
| − | background-color: transparent;
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | }
| |
| − |
| |
| − | li {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − |
| |
| − | ul.nav {
| |
| − | line-height: inherit;
| |
| − | list-style-type: none;
| |
| − | margin: 0 0 0 0;
| |
| − | padding: 0;
| |
| − | list-style-image: none;
| |
| − | }
| |
| − | p {
| |
| − | margin: 0 0 0 0;
| |
| − | }
| |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |