diff --git a/cs.css b/cs.css index 5473460..ca82315 100644 --- a/cs.css +++ b/cs.css @@ -66,185 +66,7 @@ img { /*TOP NAVBAR*/ /**********************************************************************************/ - -.navigation { - height: 100px; - width: 100%; - position: fixed; - background: #262626; - font-family: Roboto; - margin-top: 0px; -} - -.brand { - position: absolute; - padding-left: 0px; - float: left; -} -.brand a, -.brand a:visited { - color: #ffffff; - text-decoration: none; -} - -.nav-container { - max-width: 1500px; - margin: 0 auto; -} - nav { - float: right; - -} -nav ul { - list-style: none; - margin: 0; - padding: 0; -} -nav ul li { - float: left ; - position: relative; -} -nav ul li a, -nav ul li a:visited { - display: block; - padding: 0 20px; - line-height: 100px; - background: #262626; - color: #ffffff; - text-decoration: none; - text-transform: uppercase; -} -nav ul li a:hover, -nav ul li a:visited:hover { - background: #2581DC !important; - color: #ffffff; -} -nav ul li a:not(:only-child):after, -nav ul li a:visited:not(:only-child):after { - padding-left: 4px; - content: ' ▾'; -} -nav ul li ul li { - min-width: 190px; -} -nav ul li ul li a { - padding: 15px; - line-height: 20px; - background-color: #444 !important; -} - - - -.nav-dropdown { - position: absolute; - display: none; - z-index: 1; - box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); - -} - -/* Mobile navigation */ -.nav-mobile { - display: none; - position: absolute; - top: 0; - right: 0; - background: #262626; - height: 70px; - width: 70px; -} - -@media only screen and (max-width: 798px) { - .nav-mobile { - display: block; - } - - .nav-list { - margin-top: 30px; - } - - nav { - width: 100%; - padding: 70px 0 15px; - - } - nav ul { - display: none; - margin-top: 0px; - - } - nav ul li { - float: none; - - } - nav ul li a { - padding: 15px; - line-height: 20px; - background-color: #333 !important; - - } - nav ul li ul li a { - padding-left: 30px; - background-color: #444 !important; - - } - - .nav-dropdown { - position: static; - - } -} - -@media screen and (min-width: 799px) { - .nav-list { - display: block !important; - - } -} -#nav-toggle { - position: absolute; - left: 18px; - top: 35px; - cursor: pointer; - padding: 10px 35px 16px 0px; -} -#nav-toggle span, -#nav-toggle span:before, -#nav-toggle span:after { - cursor: pointer; - border-radius: 1px; - height: 5px; - width: 35px; - background: #ffffff; - position: absolute; - display: block; - content: ''; - transition: all 300ms ease-in-out; -} -#nav-toggle span:before { - top: -10px; -} -#nav-toggle span:after { - bottom: -10px; -} -#nav-toggle.active span { - background-color: transparent; -} -#nav-toggle.active span:before, #nav-toggle.active span:after { - top: 0; -} -#nav-toggle.active span:before { - transform: rotate(45deg); -} -#nav-toggle.active span:after { - transform: rotate(-45deg); -} - - - - -/*nav { overflow: hidden; height: 100px; width: 100%; @@ -303,7 +125,7 @@ nav ul li a.active, nav ul li a:hover { #check { display: none; -}*/ +} /*1 SECTION, WELCOME TO FOSC*/ /**********************************************************************************/ @@ -602,7 +424,7 @@ footer { @media only screen and (max-width: 1024px) { - /*.checkbtn { + .checkbtn { display: block; margin-top: 10px; } @@ -647,7 +469,7 @@ footer { #check:checked ~ ul { left: 0; - }*/ + } .hero h1 { font-size: 70px; @@ -703,7 +525,7 @@ footer { @media only screen and (max-width: 600px) { - /*.checkbtn { + .checkbtn { display: block; margin-top: 10px; } @@ -748,7 +570,7 @@ footer { #check:checked ~ ul { left: 0; - }*/ + } .hero { padding: 30% 0px;