Notifications page using vanilla JS

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  The code is well written and there are only a few issues that need to be fixed. The first issue is that a semicolon is missing after the margin property in the "*" selector. The second issue is that the width property of the h1 selector should be removed since it is already being set in the main selector. The following code contains the fixed version:

  * {
      margin: 0;
  }
  
  .attribution {
      font-size: 11px; 
      text-align: center; 
  }
  
  .attribution a { 
      color: hsl(228, 45%, 44%); 
  }
  
  body {
      background-color: hsl(212, 45%, 89%);
      font-family: 'Outfit', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
  }
  
  main {
      display: flex;
      justify-content: center;
      border-radius: 20px;
      width: fit-content;
      background-color: #FFF;
  }
  
  .box-inner {
      display: flex;
      width: 300px;
      padding: 12px 0;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  .box-inner > .text {
      padding: 10px 0;
      text-align: center;
  }
  
  img {
      width: 90%;
      height: 90%;
      border-radius: 18px;
      display: block;
      padding-bottom: 5px;
  }
  
  h1 {
      font-size: 1.3rem;
  }
  
  p {
      color: gray;
      font-size: 0.8rem;
      width: 220px;
  }
  

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

  Marked as helpful

  1