/* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ /* header */ header { position: sticky; background-color: white; } .header-wrapper{ display: flex; justify-content: space-between; max-width: 1400px; margin: 0 auto; } .header-menu{ display: flex; } .header-menu li { padding: 20px; list-style: none; font-size: 0.9rem; font-family: 'Quicksand', sans-serif; } .header-navigation a { text-decoration: none; color: black; } .header-name{ font-size: 1.6rem; font-family: 'Poppins', sans-serif; } .project-manager{ font-size: 1rem; font-family: 'Quicksand', sans-serif; } header { top: 0; left: 0; width: 100%; } .square { background-color: blue; height: 15px; width: 15px; } .square-name { display: flex; gap: 1rem; align-items: center; } /* main */ .content-wrapper{ display: flex; flex-direction: column; gap: 3rem; background: #E6DACD; } .square { background-color: blue; height: 15px; width: 15px; } .square-name { display: flex; gap: 1rem; align-items: center; } .header-project-name{ font-size: 3.2rem; font-family: 'Poppins', sans-serif; } .pa { max-width: 55%; font-family: 'Quicksand', sans-serif; font-size: large; } .projects{ display: flex; width: 50%; } .project-name { width: 50%; padding-top: 3rem; } img { width: 40%; height: auto; } .project-card { background-color: white; /* display: flex; flex-direction: column; justify-content: space-around; */ } .project-name { color: blue; } /* footer */ footer { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: end; margin: 0 2rem; } .footer-action { font-size: 1rem; font-family: 'Poppins', sans-serif; font-weight: bold; } .call{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .follow{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .write{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .footer-add { text-decoration: none; color: black; font-family: 'Quicksand', sans-serif; } .social-footer { width: 100%; display: flex; gap: 1rem; } .new { display: none; } .hamburger-menu { display: none; } @media screen and (max-width: 600px){ .header-menu{ display: none; } .content-wrapper { flex-direction: column; height: 100%; background-color: #E6DACD; } .background-dark-beige { display: none; } .hello-section { width: auto; padding: 60px; } footer { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); justify-items: start; gap: 1rem; } .call { grid-column: 1/2; } .wix { display: none; grid-column: 1/3; } .new { display: block; grid-column: 1/3; } .card-container { margin-top: 1rem; } .hamburger-menu { display: block; margin-right: 3rem; } .blue-menu-line1 { position: relative; width: 1rem; height: 4px; border-radius: 3px; background-color: blue; margin-top: 8px; right: 20px } .blue-menu-line2 { position: relative; width: 2rem; height: 4px; border-radius: 3px; background-color: blue; margin-top: 8px; } .blue-menu-line3 { position: relative; width: 1rem; height: 4px; border-radius: 3px; background-color: blue; margin-top: 8px; right: -20px } }