Improve career page statistics layout and benefit cards visibility
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
- Changed statistics cards to display in single horizontal row - Updated career benefit cards with better contrast and readability - Changed text colors from white to dark gray for better visibility - Updated icons to blue accent color (#667eea) - Improved button styling with dark theme and hover effects - Added proper flexbox layout for statistics section - Enhanced responsive design for mobile devices
This commit is contained in:
@@ -15,24 +15,18 @@
|
|||||||
</p>
|
</p>
|
||||||
{% if total_positions > 0 %}
|
{% if total_positions > 0 %}
|
||||||
<div class="career-stats mt-4">
|
<div class="career-stats mt-4">
|
||||||
<div class="row justify-content-center">
|
<div class="stats-row d-flex justify-content-center align-items-center flex-wrap">
|
||||||
<div class="col-auto">
|
<div class="stat-item stat-item-dark">
|
||||||
<div class="stat-item stat-item-dark">
|
<div class="stat-number text-white">{{ total_positions }}</div>
|
||||||
<div class="stat-number text-white">{{ total_positions }}</div>
|
<div class="stat-label text-light">Открытых позиций</div>
|
||||||
<div class="stat-label text-light">Открытых позиций</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="stat-item stat-item-dark">
|
||||||
<div class="stat-item stat-item-dark">
|
<div class="stat-number text-white">{{ departments|length }}</div>
|
||||||
<div class="stat-number text-white">{{ departments|length }}</div>
|
<div class="stat-label text-light">Отделов</div>
|
||||||
<div class="stat-label text-light">Отделов</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="stat-item stat-item-dark">
|
||||||
<div class="stat-item stat-item-dark">
|
<div class="stat-number text-white">{{ featured_careers|length }}</div>
|
||||||
<div class="stat-number text-white">{{ featured_careers|length }}</div>
|
<div class="stat-label text-light">Топ вакансий</div>
|
||||||
<div class="stat-label text-light">Топ вакансий</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -289,11 +283,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-5">
|
<div class="mt-5">
|
||||||
<a href="{% url 'team' %}" class="btn btn-light btn-lg me-3">
|
<a href="{% url 'team' %}" class="btn btn-dark btn-lg me-3" style="background: rgba(45, 55, 72, 0.9); border-color: rgba(45, 55, 72, 0.9); backdrop-filter: blur(10px);">
|
||||||
<i class="fas fa-users me-2"></i>
|
<i class="fas fa-users me-2"></i>
|
||||||
Наша команда
|
Наша команда
|
||||||
</a>
|
</a>
|
||||||
<a href="{% url 'about' %}" class="btn btn-outline-light btn-lg">
|
<a href="{% url 'about' %}" class="btn btn-outline-dark btn-lg" style="border-color: rgba(45, 55, 72, 0.8); color: rgba(45, 55, 72, 0.9); backdrop-filter: blur(10px);">
|
||||||
<i class="fas fa-info-circle me-2"></i>
|
<i class="fas fa-info-circle me-2"></i>
|
||||||
О компании
|
О компании
|
||||||
</a>
|
</a>
|
||||||
@@ -341,14 +335,20 @@
|
|||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
gap: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 20px;
|
padding: 20px 25px;
|
||||||
margin: 0 15px;
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
min-width: 140px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item-dark {
|
.stat-item-dark {
|
||||||
@@ -579,10 +579,10 @@
|
|||||||
|
|
||||||
.benefit-item {
|
.benefit-item {
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -605,8 +605,8 @@
|
|||||||
.benefit-item:hover {
|
.benefit-item:hover {
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||||
background: rgba(255, 255, 255, 0.25);
|
background: rgba(255, 255, 255, 1);
|
||||||
border-color: rgba(255, 255, 255, 0.4);
|
border-color: rgba(102, 126, 234, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.benefit-item > * {
|
.benefit-item > * {
|
||||||
@@ -617,42 +617,44 @@
|
|||||||
.benefit-item i {
|
.benefit-item i {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
color: #ffffff;
|
color: #667eea;
|
||||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
text-shadow: none;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.benefit-item:hover i {
|
.benefit-item:hover i {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
color: #f8f9fa;
|
color: #5a67d8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.benefit-item h5 {
|
.benefit-item h5 {
|
||||||
color: #ffffff;
|
color: #2d3748;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
font-size: 1.25rem;
|
font-size: 1.3rem;
|
||||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
|
text-shadow: none;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.benefit-item p {
|
.benefit-item p {
|
||||||
color: #f8f9fa !important;
|
color: #4a5568 !important;
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
|
text-shadow: none;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.career-stats .row {
|
.career-stats .stats-row {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
margin: 10px 5px;
|
padding: 15px 20px;
|
||||||
padding: 15px;
|
min-width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-number {
|
.stat-number {
|
||||||
@@ -699,6 +701,31 @@
|
|||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Custom button styles */
|
||||||
|
.btn-dark.btn-lg {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 15px rgba(45, 55, 72, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark.btn-lg:hover {
|
||||||
|
background: rgba(45, 55, 72, 1) !important;
|
||||||
|
border-color: rgba(45, 55, 72, 1) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(45, 55, 72, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-dark.btn-lg {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 15px rgba(45, 55, 72, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-dark.btn-lg:hover {
|
||||||
|
background: rgba(45, 55, 72, 0.9) !important;
|
||||||
|
border-color: rgba(45, 55, 72, 0.9) !important;
|
||||||
|
color: white !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(45, 55, 72, 0.3);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user