Homework/js/24_react_shop/react_shop/src/App.scss

 
 .App {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;

   header {
      display: flex;
      align-items: center;
      height: 80px;

      .leftBlock {
         flex: 0 1 10%;
         padding: 0 20px;

         .Logo {
            img {
              max-height: 100px;
            }
          }
      }
      .rightBlock {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 100%;
         flex: 0 1 90%;
         padding: 0 20px;

         .Koshik {
            img {
               padding: 0 5px;
            }
         }
      }
   }

   main {
     display: flex;
     flex-direction: row;
     min-height: calc(100vh - 200px);

     aside {
       flex: 0 1 30%;
       padding: 0 10px;

       .LoginBlock {
         padding: 5px 0;
         border-top: 1px solid #ddd;

         .btn {
            margin: 10px;
         }
       }

       .RootCategories {
         padding: 10px 0;
       }
     }

     .Content {
         flex: 0 1 70%;
         padding: 0 5px;
         display: flex;
         flex-direction: column;
         align-items: center;

         .form {
            width: max-content;
            margin: 50px auto;
         }

         .Cart {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;

            .CartBlock {
               width: 100%;
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               align-items: stretch;
   
               .CartCard {
                  flex: 0 1 50%;
                  margin: 10px;

                  .btn {
                     margin: 5px;
                  }

                  .delBtn {
                     display: block;
                     margin: 10px 0 10px auto;
                  }

                  input {
                     max-width: 50%;
                  }
               }
            }
         }


         .Category {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;

            .CatsList {
               width: 50%;
            }

            .GoodCards {
               width: 100%;
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               align-items: start;

               .GoodCard {
                  flex: 0 1 25%;
                  padding: 10px;
                  margin: 20px;

                  .btn {
                     margin: 5px;
                  }

                  img {
                     max-width: 300px;
                  }
               }
            }   
         }

         .GoodPage {
            padding: 10px;
            margin: 20px;
         }

         .Orders {

            .OrderCards {
               width: 100%;
               display: flex;
               flex-wrap: wrap;
               justify-content: center;
               align-items: start;
   
               .OrderCard {
                  flex: 0 1 25%;
                  padding: 10px;
                  margin: 20px;
   
                  .btn {
                     margin: 5px;
                  }
   
                  img {
                     max-width: 300px;
                  }
               }
            }
         }

      }
   }

 
   footer {
     background-color: #303030;
     height: 120px;
     text-align: center;

     .Logo {
       img {
         max-height: 120px;
       }
     }
   }
 }