Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @font-face {
- font-family: Raleway;
- src: url(fonts/Raleway/Raleway-VariableFont_wght.ttf);
- }
- :root {
- --black: #09090a;
- --primary: #2a4b9a;
- --secondary: #3070fb;
- --tertiary: #a7aaaf;
- --header-height: 70px;
- }
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- list-style: none;
- text-decoration: none;
- font-family: Raleway, serif;
- }
- body {
- background-color: green;
- }
- header {
- height: var(--header-height);
- }
- pfe-navigation {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- background-color: var(--black);
- width: 100%;
- height: var(--header-height);
- padding: 0 4%;
- }
- #contact-button {
- margin-right: 30px;
- padding: 10px;
- color: white;
- background-color: var(--primary);
- border: none;
- border-radius: 3px;
- }
- #mobile-icon {
- font-size: 30px;
- }
- pfe-navigation-item:last-child {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
- pfe-navigation-main ul li a, .pfe-link-list__header {
- font-weight: 600;
- }
- .mobile-icon {
- color: white;
- }
- @media only screen and (max-width: 1000px) {
- pfe-navigation-main {
- display: none;
- }
- #mobile-icon-open {
- display: block;
- }
- #mobile-icon-close {
- display: none;
- }
- pfe-navigation-main.mobile-expanded #mobile-icon-open {
- display: none;
- }
- pfe-navigation-main.mobile-expanded #mobile-icon-close {
- display: block;
- }
- pfe-navigation-main.mobile-expanded {
- display: flex;
- flex-direction: column;
- align-items: center;
- position: absolute;
- top: calc(var(--header-height) + 2%);
- left: 2%;
- height: calc(100vh - (var(--header-height) + 4%));
- width: calc(100vw - 4%);
- padding: 2% 8%;
- background-color: white;
- border-radius: 8px;
- }
- .pfe-navigation-item__container {
- display: none;
- }
- pfe-navigation-main ul {
- width: 50%;
- }
- pfe-navigation-main ul li {
- position: relative;
- margin: 5% 0;
- }
- .pfe-navigation-item__container[aria-expanded="true"] {
- position: relative;
- display: flex;
- flex-direction: column;
- top: 10px;
- left: 0;
- }
- pfe-navigation-main ul li a {
- color: black;
- }
- .pfe-navigation-item-grid {
- margin-left: 5%;
- }
- .pfe-link-list__group-item a {
- color: gray;
- }
- .submenu-icon {
- position: absolute;
- top: 5px;
- right: 5px;
- font-weight: 600;
- }
- #estimate {
- display: none;
- }
- }
- @media only screen and (min-width: 1000px) {
- .mobile-icon {
- display: none;
- }
- .submenu-icon {
- display: none;
- }
- pfe-navigation {
- position: relative;
- border-bottom: 1px solid grey;
- }
- pfe-navigation-main {
- width: 50%;
- }
- pfe-navigation-main ul {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- }
- pfe-navigation-main ul li a {
- position: relative;
- font-weight: 500;
- color: white;
- }
- pfe-navigation-main > ul > li > a::after {
- content: '';
- transform-origin: 0 0;
- transform: scaleX(0);
- position: absolute;
- bottom: -2px;
- left: 0;
- right: 0;
- height: .2em;
- background-color: white;
- opacity: 0.8;
- transition: transform .3s;
- }
- pfe-navigation-main > ul > li > a:hover::after {
- transform: scaleX(1);
- }
- .pfe-navigation-item__container {
- display: none;
- }
- .pfe-navigation-item__container[aria-expanded="true"] {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: var(--header-height);
- left: 15%;
- background-color: var(--black);
- border-radius: 0 0 5px 5px;
- }
- .pfe-navigation-item-grid {
- display: grid;
- grid-column-gap: 30px;
- grid-row-gap: 10px;
- grid-template-columns: repeat(var(--column-count), 1fr);
- padding: 1% 2%;
- }
- .pfe-link-list__group-item a:hover {
- color: #2A4B9A;
- }
- .pfe-link-list__header {
- color: white;
- margin-bottom: 8%;
- }
- .pfe-navigation-grid__column .pfe-link-list__group {
- display: flex;
- flex-direction: column;
- }
- .pfe-navigation-item__footer {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- position: relative;
- bottom: 0;
- left: 0;
- right: 0;
- color: black;
- background-color: var(--tertiary);
- border-radius: 0 0 5px 5px;
- padding: 2% 0;
- }
- #new-button {
- margin-right: 30px;
- padding: 10px;
- color: white;
- background-color: var(--secondary);
- border: none;
- border-right: 30px;
- border-radius: 3px;
- cursor: pointer;
- }
- }
Add Comment
Please, Sign In to add comment