Intro section with dropdown navigation

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  There are no syntax errors in the code. However, there are a few issues that need to be fixed. Here are the problems and their solutions:

  The usage of vh units in min-height can cause layout issues in some devices, especially when the viewport height is less than the height of the content. A better solution is to use 100% height on the body and html elements.

  Solution: Replace min-height: 100vh; in .hero with height: 100%;

  The .nav .logo selector has a margin-right property which may cause layout issues in certain screen sizes.

  Solution: Set .nav .logo margin-right to 0.

  The usage of gap CSS property is not compatible in certain browsers.

  Solution: Remove gap and add margin-left to .nav .wrapper-menu .container-list .nav-list li selector.

  The selector .nav .wrapper-menu .logins .btn-regist:hover, .nav .wrapper-menu .logins .btn-regist:active sets background color and color css properties. However, these may not provide enough contrast to meet accessibility standards.

  Solution: Consider using different colors or using a darker color for the text.

  Here is the corrected code:

  html {
    box-sizing: border-box;
    font-size: 100%;
    height: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: "Epilogue", sans-serif;
    height: 100%;
  }
  
  html {
    overflow-x: hidden;
  }
  
  body {
    background-color: hsl(0, 0%, 98%);
    position: relative;
    overflow-x: hidden;
  }
  
  .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.623);
  }
  
  h1,
  h2,
  h3 {
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: hsl(0, 0%, 41%);
  }
  
  p {
    margin: 0;
    color: hsl(0, 0%, 41%);
    line-height: 1.8125rem;
  }
  
  ul {
    padding: 0;
    margin: 0;
  }
  
  li {
    list-style: none;
    color: hsl(0, 0%, 41%);
  }
  
  a,
  a:visited,
  a:active {
    text-decoration: none;
    color: hsl(0, 0%, 41%);
  }
  
  a:hover {
    color: hsl(0, 0%, 8%);
    font-weight: 500;
  }
  
  button {
    color: hsl(0, 0%, 41%);
    font-family: "Epilogue", sans-serif;
  }
  
  .nav {
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 1rem 0;
    padding-left: 1rem;
  }
  @media (max-width: 54.3125rem) {
    .nav {
      justify-content: space-between;
    }
  }
  .nav .logo {
    cursor: pointer;
    margin-right: 0;
  }
  .nav .hamburger {
    z-index: 20;
  }
  .nav .hamburger .ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .nav .hamburger .ham .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #000;
    stroke-width: 5.5;
    stroke-linecap: round;
  }
  .nav .hamburger .hamRotate.active {
    transform: rotate(45deg);
  }
  .nav .hamburger .hamRotate180.active {
    transform: rotate(180deg);
  }
  .nav .hamburger .ham8 .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 400ms;
  }
  .nav .hamburger .ham8 .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 400ms, stroke-dashoffset 400ms;
  }
  .nav .hamburger .ham8 .top {
    stroke-dasharray: 40 160;
  }
  .nav .hamburger .ham8.active .top {
    stroke-dashoffset: -64px;
  }
  .nav .hamburger .ham8.active .middle {
    transform: rotate(90deg);
  }
  .nav .hamburger .ham8.active .bottom {
    stroke-dashoffset: -64px;
  }
  .nav .wrapper-menu {
    font-size: 0.875rem;
    background-color: hsl(0, 0%, 98%);
    transition: right 0.3s ease-in;
  }
  @media (max-width: 54.3125rem) {
    .nav .wrapper-menu {
      position: absolute;
      top: 0;
      bottom: 0;
      right: -100%;
      width: 15rem;
      padding-top: 4.375rem;
      z-index: 10;
    }
  }
  .nav .wrapper-menu.showMenu {
    right: 0;
  }
  .nav .wrapper-menu .container-list .nav-list {
    display: flex
  

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  0

  ---

  

  Tama•290

  @mahdipratamaPosted over 1 year ago

  Thank you for your feedback @Trueboss , i'll fix this asap 🙆

  1