Order Summary using HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Nairitya, congratulations for your new solution!

  🎯 Your solution its almost done and I’ve some tips to help you to improve it:

  Your image wave background was not displaying due the lack of the ./ before the image folder to indicate the correct location.Note that if you're using the folder locally the live server recognizes the image location, but with a live solution you need to indicate where the image is. Remember, when the image is inside the repository folder use dot slash ./ and if is inside a subfolder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

  Here's the correct import: background-image: url(./images/pattern-background-desktop.svg);

  body {
      background-image: url(./images/pattern-background-desktop.svg);
      box-sizing: border-box;
      height: 100vh;
      width: 100%;
      margin: 0;
      border: 0;
      text-align: center;
      /* background: url(/images/pattern-background-desktop.svg); */
      background-color: hsl(225, 100%, 94%);
      background-repeat: no-repeat;
      background-size: contain;
      font-family: "Red Hat Display", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      color: hsl(224, 23%, 55%);
      font-size: 16px;
  }
  

  ✌️ I hope this helps you and happy coding!

  0
• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello monk-e-man !

  Congratulation for finishing the project

  I have some suggestions :

  1. Since you have a css file, you could move out the little css you have on your html file if you need it to your css file !

  2. In your css file, you added multiple times a .pricing-section, you can add them together !

  3. For the colors, you can define CSS variables, which can make easier your life if you call multiple time the same color, and also make it easier to update if you have to one day. To declare a CSS variable :

  :root{
  --name-variable: hsl(245, 75%, 52%);
  }
  

  Then, when you want to use it, use the var() keyword with the name of the variable :

  .payment-button {
    background-color: var(--name-variable);
    color: white;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 15px 20px 2px hsla(245, 49%, 67%, 0.3);
  }
  

  Good job, keep going and I hope my comment helped you !

  0

  ---

  

  monk-e-man•70

  @NairityaPosted about 2 years ago

  @UrbanskiDev Thanks, for your valuable feedback. I'll surely keep in my mind to use variables from next time if I have to use same colors many times. Thanks again for your time :)

  0