trevor/smartsoltech_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve career page statistics layout and benefit cards visibility
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source 
- 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:
Andrey K. Choi
2025-11-25 17:48:07 +09:00
parent 614c26edbc
commit 8cd89e48a2
1 changed files with 63 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
smartsoltech/web/templates/web/career.html
View File

@@ -15,24 +15,18 @@
</p>
{% if total_positions > 0 %}
<div class="career-stats mt-4">
<div class="row justify-content-center">
<div class="col-auto">
<div class="stat-item stat-item-dark">
<div class="stat-number text-white">{{ total_positions }}</div>
<div class="stat-label text-light">Открытых позиций</div>
</div>
<div class="stats-row d-flex justify-content-center align-items-center flex-wrap">
<div class="stat-item stat-item-dark">
<div class="stat-number text-white">{{ total_positions }}</div>
<div class="stat-label text-light">Открытых позиций</div>
</div>
<div class="col-auto">
<div class="stat-item stat-item-dark">
<div class="stat-number text-white">{{ departments|length }}</div>
<div class="stat-label text-light">Отделов</div>
</div>
<div class="stat-item stat-item-dark">
<div class="stat-number text-white">{{ departments|length }}</div>
<div class="stat-label text-light">Отделов</div>
</div>
<div class="col-auto">
<div class="stat-item stat-item-dark">
<div class="stat-number text-white">{{ featured_careers|length }}</div>
<div class="stat-label text-light">Топ вакансий</div>
</div>
<div class="stat-item stat-item-dark">
<div class="stat-number text-white">{{ featured_careers|length }}</div>
<div class="stat-label text-light">Топ вакансий</div>
</div>
</div>
</div>
@@ -289,11 +283,11 @@
</div>
</div>
<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>
Наша команда
</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>
О компании
</a>
@@ -341,14 +335,20 @@
margin-top: 2rem;
}
.stats-row {
gap: 20px;
flex-wrap: wrap;
}
.stat-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
margin: 0 15px;
padding: 20px 25px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
min-width: 140px;
text-align: center;
}
.stat-item-dark {
@@ -579,10 +579,10 @@
.benefit-item {
padding: 30px 20px;
background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
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);
transition: all 0.4s ease;
text-align: center;
@@ -605,8 +605,8 @@
.benefit-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 1);
border-color: rgba(102, 126, 234, 0.5);
}
.benefit-item > * {
@@ -617,42 +617,44 @@
.benefit-item i {
font-size: 3rem;
margin-bottom: 1.5rem;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
color: #667eea;
text-shadow: none;
transition: all 0.3s ease;
}
.benefit-item:hover i {
transform: scale(1.1);
color: #f8f9fa;
color: #5a67d8;
}
.benefit-item h5 {
color: #ffffff;
color: #2d3748;
margin-bottom: 1rem;
font-weight: 600;
font-size: 1.25rem;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
font-weight: 700;
font-size: 1.3rem;
text-shadow: none;
letter-spacing: 0.5px;
}
.benefit-item p {
color: #f8f9fa !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
color: #4a5568 !important;
text-shadow: none;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 0;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.career-stats .row {
.career-stats .stats-row {
justify-content: center;
gap: 15px;
}
.stat-item {
margin: 10px 5px;
padding: 15px;
padding: 15px 20px;
min-width: 120px;
}
.stat-number {
@@ -699,6 +701,31 @@
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>
{% endblock %}