HTML - CSS

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  There are no major issues with the code. However, there are a few minor improvements that can be made:

  1.The font property should be specified with a unit, e.g. font-weight: 900; should be font-weight: 900; font-size: 15px;.

  2.The font property should be spelled out, e.g. font: 900; should be font-weight: 900;.

  3.The background-size property should be set to cover instead of contain to ensure that the background image covers the entire background.

  Here is the corrected code:

  
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body{
      font-family: 'Red Hat Display', sans-serif;
      min-height: 100vh;
      background: url(images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: cover;
      background-color: hsl(225, 100%, 94%);   
      position: relative;
      font-size: 16px;
  }
  
  .container{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 450px;
      background-color: white;
      border-radius: 20px;
      overflow: hidden;   
  }
  
  .text-content{
      padding: 7%;
      text-align: center;
  }
  
  .title{
      color: hsl(223, 47%, 23%);
      font-weight: 900;
      font-size: 32px;
      margin-bottom: 20px;
  }
  
  .text-content p.subtitle{
      color: #8a8a8a;
      margin-bottom: 25px;
  }
  
  .plan-box{
      background-color: hsl(225, 100%, 98%);
      border-radius: 12px;
      display: flex;
      padding: 25px;
      align-items: center;
      justify-content: space-between;
  }
  
  .plan-box-left{
      display: flex;
      align-items: center;
      text-align: left;   
  }
  
  .plan-box-left div{
      margin-left: 20px;
  }
  
  .plan-box-left div h5{
      font-weight: 900;
      font-size: 15px;
      color: hsl(223, 47%, 23%);
  }
  
  .plan-box-left div p{
      font-size: 14px;\n    color: #8a8a8a;
  }
  
  .plan-box a{
      font-weight: 900;
      color: hsl(245, 75%, 52%);
      transition: color cubic-bezier(0.39, 0.575, 0.565, 3) ease;\n}\n\na.proceed-btn{\n    display: block;
      text-decoration: none;
      color: white;
      background-color: hsl(245, 75%, 52%);
      padding: 20px 0;
      border-radius: 12px;
      margin: 30px 0;
  }
  
  a.cancel-btn{
      color: hsl(224, 23%, 55%);
      text-decoration: none;
      font-weight: 900;
  }
  
  a.proceed-btn:hover{
      background-color: hsl(224, 23%, 55%);
  }
  
  .plan-box a:hover{
      text-decoration: none;
      color: hsl(224, 23%, 55%);
  }
  
  a.cancel-btn:hover{
      color: hsl(223, 47%, 23%);
  }
  
  @media only screen and (max-width: 425px){
      body{
          background-image: url(images/pattern-background-mobile.svg);
          font-size: 14px;
      }
      .container{
          max-width: 87%;
      } 
      
      .title{
          font-size: 23px;
      }
      div.plan-box{
          padding: 12px;
      }
  
      .plan-box-left div{
          margin-left: 10px;
      }
  
      a.proceed-btn,
      a.cancel-btn,
      .plan-box{
          font-size: 13px;
      }
  
      .text-content{
          padding: 9% 7%;
      }
  }
  

  Hope you'll find this helpful

  Marked as helpful

  0