Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
.race-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 10px; | |||
} | |||
.race-box { | .race-box { | ||
border: 2px solid #411144; | border: 2px solid #411144; | ||
padding: 10px; | padding: 10px; | ||
display: | display: flex; | ||
flex-direction: column; | |||
align-items: center; | |||
background-color: #3133; | background-color: #3133; | ||
text-align: center; | text-align: center; | ||
width: 120px; | width: 120px; | ||
| Строка 11: | Строка 19: | ||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); | box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); | ||
transition: all 0.3s ease-out; | transition: all 0.3s ease-out; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| Строка 22: | Строка 29: | ||
} | } | ||
.race-box | .race-box:hover img { | ||
transform: scale(1.1); | transform: scale(1.1); | ||
} | } | ||
| Строка 33: | Строка 40: | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Версия от 14:57, 19 января 2025
.race-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.race-box {
border: 2px solid #411144;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #3133;
text-align: center;
width: 120px;
height: 160px;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
transition: all 0.3s ease-out;
cursor: pointer;
}
.race-box img {
width: 100px;
height: 100px;
border-radius: 8px;
transition: transform 0.3s ease;
}
.race-box:hover img {
transform: scale(1.1);
}
.race-box .race-name {
color: #f1f1f1;
font-size: 14px;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
.info-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #222;
color: #f1f1f1;
padding: 20px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
z-index: 1000;
display: none;
}
.info-popup.active {
display: block;
}
.info-popup .close-btn {
cursor: pointer;
color: #ff6666;
font-weight: bold;
float: right;
}