/*TODO: Hintergrundfarben entfernen*/ .hauptcontainer { /*Einzelne Elemente untereinander anzeigen.*/ flex-direction: column; } /*Container wird mit Daten aus der Datenbank gefüllt.*/ #bookInfo_container { padding-left: 45px; padding-right: 50px; padding-bottom: 50px; padding-top: 30px; } .book_container { /*background-color: blueviolet;*/ display: flex; /*Einzelne Elemente nebeneinander anzeigen.*/ flex-direction: row; } .bookCover_container { /*background-color: blue;*/ display: flex; /*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/ flex: 0 0 150px; align-items: center; height: auto; } .bookCover { /*Bild passt sich seinem Container an.*/ max-width:100%; max-height:100%; } .bookDetails_container { /* background-color: aquamarine; */ width: 100%; display: flex; flex-direction: column; padding-left: 25px; padding-right: 25px; } .bookTitle { margin-bottom: 10px; font-weight: 400; } .bookDetails { margin-bottom: 10px; } .available_container { width: fit-content; /*Hintergrundfarbe wird an Inhalt angepasst.*/ background-color: #70AD47; /*background-color: #F34343;*/ /*Element immer an der unteren Seite des Containers platzieren.*/ margin-top: auto; } .available { color: white; margin: 10px 25px; } .shoppingCart_container { /* background-color: chartreuse; */ margin-left: auto; margin-top: auto; flex: 0 0 40px; } .shoppingCart { background-image: url('pictures/shopping_cart.png'); width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; } .shoppingCart:hover { background-image: url('pictures/shopping_cart_hover.png'); cursor: pointer; } .content_container, .bookMoreDetails_container { margin-top: 25px; } .bookContent_heading, .bookDetails_heading { font-weight: 400; }