html{ font-size: 62.5%; } *{ padding : 0; margin : 0; box-sizing: border-box; } header{ background-color : goldenrod; } .welcomeimages{ /* max-width: 980px; */ width : 98%; margin : auto; } .welcomeimages img{ margin : 0 auto; max-width : 70vh; } .navlist{ list-style : none; } a{ color : white; text-decoration: none; } .navbar{ min-height: 70px; display: flex; justify-content: space-between; align-items : center; padding : 0 24px; } .site-name{ font-size : 2.3rem; color : white; font-weight: 700; } .nav-menu{ display : flex; justify-content : space-between; align-items : center; gap : 40px; } .nav-link{ transition: 0.7s ease; font-size : 1.5rem; } .nav-link:hover{ color: dodgerblue; } .hamburger{ display: none; cursor: pointer; } .bar{ display : block; width : 25px; height : 3px; margin : 5px auto; --webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: white; } /* Main Content */ .container{ width :100%; max-width : 980px; padding :0; /* border : solid red; */ } img{ /* max-width : 100%; */ margin-top : 0; width : 100%; margin :0; } /* END */ .columns{ display : flex; margin: 1em 0; align-items: flex-start; padding : 1em; /* border : solid brown; */ width : 100%; } .col1{ width : 90%; justify-content: space-between; /* margin : 0 auto; */ padding : 2rem; } .col2{ width : 15%; justify-content: space-between; margin : 0 auto; } .bg-color{ background-color: greenyellow; margin : 0; padding : 2rem; } .bg-color-blue{ background-color: #fff5ee; margin : 0; padding : 2rem } .white{ background-color: #f5f5f5; margin : 0; padding : 2rem; } .h1welmgs{ font-size: 3rem; color: black; margin-bottom : 1em; } .h3forallmainContent{ font-size: 2rem; margin-top : 1.5em; } .allparagraph{ font-size : 2rem; line-height: 2rem; } .col2{ width : 45%; /* border : solid purple; */ margin-left : 3rem; margin-right : 3rem } .footer-section{ width : 100%; background-color : goldenrod; padding : 1rem; } .footer-list{ display : flex; font-weight: 700; } /* Footer Design */ .footer-item{ padding : 2rem; list-style: none; font-size : 1.5rem; margin-right : 1.5rem; /* color : #fff; */ } /* End of Content Area */ @media(max-width: 768px){ .hamburger{ display: block; } .hamburger.acive .bar:nth-child(2){ opacity: 0; } .hamburger.acive .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); } .hamburger.acive .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .nav-menu{ position : fixed; left: -100%; top : 70px; gap : 0; flex-direction : columns; width: 100%; background-color : goldenrod; text-align: center; transition: 0.3s; } .nav-item{ margin: 16px 0; } .nav-menu.active{ left: 0; display : block; } }