Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- component 1
- @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
- *{
- box-sizing:border-box;
- font-family: 'Poppins';
- }
- h2{
- text-align:center;
- }
- .container{
- background-color: white;
- /*border: 2px solid black;*/
- display: flex;
- justify-content: flex-start;
- }
- .gallery{
- vertical-align: top;
- text-align: center;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- flex-grow: 20;
- align-content: flex-start;
- background-color: white;
- }
- .leftContainer, .rightContainer{
- background-color: rgb(241, 241, 241);
- max-width: 150px;
- min-width: 150px;
- width: 150px!;
- padding: 10px;
- border: 1px solid lightgray;
- }
- .BrandFilterBox, .TypeFilterBox{
- text-align: left;
- background-color: rgb(241, 241, 241);
- /*border: 1px solid lightgrey;*/
- width: 99%;
- }
- .BrandFilterBox .filterLabel, .TypeFilterBox .filterLabel{
- font-size: 14px;
- }
- .checkboxList .labelCount{
- font-size: 12px ;
- color:grey;
- }
- .card{
- width: 100%;
- background-color: white;
- margin: 10px;
- width: 200px !important;
- max-width: 200px !important;
- height: fit-content;
- border: 1px solid lightgrey;
- padding: 10px;
- box-shadow: 5px 5px 5px lightgrey;
- }
- .card:hover{
- transition: all ease-in-out 0.2s;
- transform: scale(1.05, 1.05);
- }
- /*
- .image{
- border-radius: 15px;
- width: 95%;
- height: 95%;
- }
- */
- .description-contenier .description{
- font-size: 16px;
- }
- .description-contenier .descriptionBase{
- font-size: 16px;
- text-align: left;
- }
- .description-contenier .descriptionPrice{
- font-size: 20px;
- color: royalblue;
- text-align: left;
- }
- .btnObserve, .btnObserved{
- border-radius: 0px;
- width: 100%;
- display:block;
- border:0;
- cursor:pointer;
- outline:none;
- background-color: rgb(241, 241, 241);
- }
- .btnObserved{
- color: royalblue;
- }
- .btnObserve:hover, .btnObserved:hover{
- background-color: royalblue;
- color: white;
- }
- img{
- width: 100%;
- height: 100%;
- }
- .description{
- text-align:left;
- font-size:0.65em;
- padding:0;
- word-break: break-all;
- }
- component 2
- @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
- *{
- /*box-sizing:border-box;*/
- font-family: 'Poppins';
- }
- body{
- background-color: cornflowerblue;
- }
- h2{
- text-align:center;
- }
- .container{
- background-color: rgb(241, 241, 241);
- /*border: 2px solid black;*/
- display: flex;
- justify-content: flex-start;
- }
- .gallery{
- vertical-align: top;
- text-align: center;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- justify-content: space-around;
- flex-wrap: nowrap;
- flex-grow: 20;
- align-content: flex-start;
- background-color: white;
- }
- .leftContainer, .rightContainer{
- background-color: rgb(241, 241, 241);
- max-width: 150px;
- min-width: 150px;
- width: 150px!;
- padding: 10px;
- border: 1px solid lightgray;
- }
- .card{
- width: 100%;
- height: 100%;
- background-color: white;
- margin: 10px;
- /* width: 200px !important;*/
- /* max-width: 200px !important;
- max-height: 200px !important;*/
- height: fit-content;
- }
- .card:hover{
- transition:all ease-in-out 0.2s;
- transform: scale(1.05, 1.05);
- }
- img{
- width: 100%;
- height: 100%;
- }
- .description{
- text-align:left;
- font-size:0.65em;
- padding:0;
- word-break: break-all;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement