mirror of
https://github.com/magnum-opus-tender-hack/frontend.git
synced 2024-11-25 01:33:45 +03:00
114 lines
1.8 KiB
CSS
114 lines
1.8 KiB
CSS
.card{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap:15px;
|
|
font-size: 14px;
|
|
border: 1px solid #BDBDBD;
|
|
background: #FBFBFB;
|
|
padding: 25px;
|
|
border-radius: 17px;
|
|
width: 280px;
|
|
height: 300px;
|
|
justify-content: space-between;
|
|
transition: 0.3s;
|
|
|
|
}
|
|
|
|
.name{
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
|
|
}
|
|
.red{
|
|
font-weight: 500;
|
|
color: #DB2B21;
|
|
}
|
|
|
|
.blue{
|
|
font-weight: 500;
|
|
color: #2566ec;
|
|
}
|
|
.id{
|
|
color:#BDBDBD
|
|
}
|
|
.prWrap{
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.aboutBtn{
|
|
font-weight: 500;
|
|
color:#FBFBFB;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
border-radius: 17px;
|
|
background-color: #DB2B21;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.aboutBtn:hover{
|
|
transition: 0.3s;
|
|
opacity: 0.6;
|
|
}
|
|
.productWrapper{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap:50px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
.filter{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top:0px;
|
|
left:0px;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.popup{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap:15px;
|
|
font-size: 14px;
|
|
border: 1px solid #BDBDBD;
|
|
background: #FBFBFB;
|
|
padding: 35px 50px;
|
|
border-radius: 17px;
|
|
width: 60%;
|
|
height: 60vh;
|
|
transition: 0.3s;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.cross{
|
|
font-size: 40px;
|
|
cursor: pointer;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
top:0px;
|
|
right: 15px;
|
|
}
|
|
.h1{
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.charWrap{
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
gap:15px;
|
|
font-size: 16px;
|
|
|
|
} |