responsive , flexbox.

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 5 months ago

  Congratulations on completing the project. It looks great and is responsive. Looks just like the design in desktop and mobile version.

  The code is well organized and clean--but not DRY. There is something called the DRY principle (Don't Repeat Yourself). Anytime you see yourself repeating the same code in multiple places, it is time to pull it out and create a utility class. For example: both .price and .discounted are styled display: block; this is redundant in an h1, and unnecessary for the span. Similarly, .order is styled both border: 0px and border: none which is redundant.

  You could create two utility classes to save yourself some code.

        .flex-c {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .accent {
          font-family: "Fraunces";
          font-weight: 700;
        }
  

  You can add "flex-c" to body, .container, and .order-btn (change .order-btn to flex-c). Then add accent to .title and .price. Now you're clean and DRY. Hope this helps

  Marked as helpful

  1

  ---

  

  Yahia-kilany•90

  @Yahia-kilanyPosted 5 months ago

  @beowulf1958 thank you for the advice I will consider that in future projects

  0