123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- .App {
- font-family: Georgia sans-serif;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: column;
- .main{
- display: flex;
- text-align: center;
- }
- }
- .aside{
- min-width: 20%;
- border-right: 1px solid lightgrey;
- display: flex;
- justify-content: start;
- flex-direction: column;
- align-items: start;
- margin: 5px;
- text-align: start;
- ul{
- list-style: none;
- margin: 0;
- padding: 0;
- }
- li{
- margin: 5px;
- }
- }
- .header{
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid lightgrey;
- .Logo{
- margin-left: 5%;
- }
- .koshikCounter{
- margin-right: 5%;
- }
- img{
- height: 40px;
- }
- }
- .Cart{
- margin: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- .wrapperForName{
- display: flex;
- flex-direction: column;
- .name{
- margin: 10px;
- }
- }
- .wrapperForCount{
- display: flex;
- flex-direction: column;
- .count{
- margin: 10px;
- }
- }
- button{
- margin: 10px;
- }
- }
- .Content{
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- ul, li{
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .GoodCard{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- h2{
- margin: 5%;
- }
- strong{
- margin: 2%;
- }
- }
- img{
- height: 80px;
- }
- }
- .Footer{
- background-color: rebeccapurple;
- height: 10%;
- border-top: 1px solid lightgrey;
- img{
- height: 40px;
- margin: 5px;
- }
- }
|