diff --git a/main_dc/valitovgaziz/html/darkTheme.css b/main_dc/valitovgaziz/html/darkTheme.css
index 535fe03..44a90f2 100644
--- a/main_dc/valitovgaziz/html/darkTheme.css
+++ b/main_dc/valitovgaziz/html/darkTheme.css
@@ -153,7 +153,6 @@ body.dark-mode .project-card h3 {
}
body.dark-mode .current-info {
- background: var(--dark-border);
color: var(--dark-text);
border: 1px solid var(--dark-border);
}
diff --git a/main_dc/valitovgaziz/html/style.css b/main_dc/valitovgaziz/html/style.css
index 3b11bea..6cb5e59 100644
--- a/main_dc/valitovgaziz/html/style.css
+++ b/main_dc/valitovgaziz/html/style.css
@@ -5,20 +5,26 @@
@import url("./style/hero_section.css");
@import url("./style/yalarba_investmen.css");
@import url("./style/footer.css");
-
+@import url("./style/repository_section.css");
+/* style.css - обновленный */
:root {
--primary: #2c3e50;
--secondary: #3498db;
--light: #ecf0f1;
--dark: #1a252f;
--success: #2ecc71;
+ --border-radius: 12px;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --transition: all 0.3s ease;
}
html {
margin: 0;
padding: 0;
width: 100%;
+ scroll-behavior: smooth;
}
+
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
@@ -28,49 +34,208 @@ body {
margin: 10px auto 5px auto;
padding: 10px 20px;
background-color: #f9f9f9;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ min-height: 100vh;
}
+/* Улучшенная сетка для header */
header {
background-color: var(--primary);
color: white;
- padding: 2rem 0;
+ padding: 2rem 1rem;
text-align: center;
margin-bottom: 2rem;
- border-radius: 10px;
-}
-h1,
-h2,
-h3 {
- color: var(--secondary);
-}
-h1 {
- margin-bottom: 0.5rem;
+ border-radius: var(--border-radius);
+ display: grid;
+ grid-template-columns: 1fr auto;
+ grid-template-rows: auto auto;
+ gap: 1rem;
+ align-items: center;
+ position: relative;
}
-.contact-info {
+.hero-content {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+}
+
+.hero-text {
display: flex;
- justify-content: center;
- gap: 2rem;
- margin-bottom: 1rem;
- flex-wrap: wrap;
+ flex-direction: column;
+ gap: 1rem;
}
-#telegram a {
- color: inherit;
+.hero-buttons {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ margin-top: 1rem;
}
+.theme-toggle {
+ grid-column: 2;
+ grid-row: 1;
+ justify-self: end;
+ padding: 8px 12px;
+ background: var(--secondary);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: var(--transition);
+ z-index: 1000;
+}
+
+.social_links_block {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 1rem;
+ justify-items: center;
+ margin-top: 1rem;
+}
+
+/* Улучшенная сетка для секций */
.section {
background: rgb(226, 240, 241);
padding: 2rem;
margin-bottom: 2rem;
- border-radius: 8px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow);
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
}
-.skills-container {
- display: flex;
- flex-wrap: wrap;
+
+/* Сетка для about секции */
+.about {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ align-items: start;
+}
+
+.about-valitovgaziz-photo-box {
+ justify-self: center;
+ width: 100%;
+ max-width: 400px;
+}
+
+.about-text {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+}
+
+.entrepreneur-highlights {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.highlight-item {
+ background: rgba(255, 255, 255, 0.7);
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow);
+ transition: var(--transition);
+}
+
+.highlight-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Сетка для проектов */
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ margin: 2rem 0;
+}
+
+.project-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow);
+ border-left: 4px solid var(--secondary);
+ transition: var(--transition);
+ display: grid;
+ grid-template-rows: auto 1fr;
+ gap: 1rem;
+ height: 100%;
+}
+
+.project-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Сетка для команды */
+.team-section {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+}
+
+.team-header {
+ text-align: center;
+}
+
+.roles-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.role-card {
+ background: rgba(255, 255, 255, 0.7);
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow);
+ transition: var(--transition);
+ display: grid;
+ grid-template-rows: auto 1fr;
gap: 1rem;
}
+
+.role-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* Сетка для Yalarba секции */
+.yalarba-section {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+}
+
+.yalarba-stats {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 1rem;
+ justify-items: center;
+}
+
+.yalarba-value ul {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 0.5rem;
+}
+
+/* Сетка для навыков */
+.skills-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 1rem;
+}
+
.skill-tag {
background-color: var(--secondary);
color: white;
@@ -78,11 +243,99 @@ h1 {
border-radius: 1em;
font-size: 0.9rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
+ text-align: center;
+ transition: var(--transition);
}
+
+.skill-tag:hover {
+ transform: scale(1.05);
+}
+
+/* Сетка для контактов */
+.contact-info {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1rem;
+}
+
+/* Сетка для футера */
+footer {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ text-align: center;
+ padding: 1em 0 0 0;
+ color: var(--dark);
+ font-size: 0.9rem;
+ border-radius: 1rem;
+}
+
+.footer-links {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 1em;
+}
+
+.footer-section {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 0.5rem;
+}
+
+.two-column-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ border-left: 1px solid black;
+}
+
+/* Кнопки */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.8rem 1.5rem;
+ border-radius: 5px;
+ text-decoration: none;
+ font-weight: bold;
+ transition: var(--transition);
+ border: none;
+ cursor: pointer;
+ text-align: center;
+}
+
+.btn-primary {
+ background-color: var(--secondary);
+ color: white;
+}
+
+.btn-primary:hover {
+ background-color: #2980b9;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.btn-secondary {
+ background-color: transparent;
+ color: white;
+ border: 2px solid white;
+}
+
+.btn-secondary:hover {
+ background-color: white;
+ color: var(--primary);
+}
+
+/* Timeline улучшения */
.timeline {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
position: relative;
padding-left: 30px;
}
+
.timeline:before {
content: "";
position: absolute;
@@ -95,8 +348,11 @@ h1 {
.timeline-item {
position: relative;
- margin-bottom: 2rem;
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 0.5rem;
}
+
.timeline-item:before {
content: "";
position: absolute;
@@ -108,187 +364,189 @@ h1 {
background: var(--primary);
border: 2px solid var(--secondary);
}
-.project-link {
- display: inline-block;
- color: var(--secondary);
- text-decoration: none;
-}
-.project-link:hover {
- text-decoration: underline;
-}
/* Адаптация для мелких экранов */
@media (max-width: 768px) {
+ body {
+ padding: 5px 10px;
+ margin: 5px auto;
+ }
+
header {
- padding: 1rem 0;
- font-size: 1.2rem;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto auto;
+ padding: 1.5rem 1rem;
}
-
- .contact-info {
- flex-direction: column;
- align-items: center;
- gap: 0.5rem;
- font-size: 0.9rem;
+
+ .theme-toggle {
+ grid-column: 1;
+ grid-row: 1;
+ justify-self: center;
+ margin-bottom: 1rem;
}
-
+
+ .hero-content {
+ grid-column: 1;
+ }
+
+ .hero-buttons {
+ grid-template-columns: 1fr;
+ }
+
.section {
padding: 1.5rem;
}
-
+
+ .about {
+ grid-template-columns: 1fr;
+ }
+
+ .about-valitovgaziz-photo-box img {
+ min-width: 100%;
+ }
+
+ .about-text {
+ width: 100%;
+ }
+
+ .projects-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .roles-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .skills-container {
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ }
+
+ .yalarba-stats {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .footer-links {
+ grid-template-columns: 1fr;
+ }
+
+ .two-column-grid {
+ grid-template-columns: 1fr;
+ border-left: none;
+ border-top: 1px solid black;
+ padding-top: 1rem;
+ }
+
.timeline {
- padding-left: 20px; /* Уменьшаем отступ для линии времени */
+ padding-left: 20px;
}
-
+
.timeline:before {
- left: 8px; /* Сдвигаем линию ближе к краю */
+ left: 8px;
}
-
+
.timeline-item:before {
- left: -20px; /* Сдвигаем маркер времени */
- }
-
- .skill-tag {
- font-size: 0.8rem;
- }
-
- footer {
- font-size: 0.8rem;
+ left: -20px;
}
}
-.projects-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 1.5rem;
- margin: 2rem 0;
-}
-
-.project-card {
- background: white;
- padding: 1.5rem;
- border-radius: 8px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- border-left: 4px solid var(--secondary);
-}
-
-.project-card h3 {
- margin-top: 0;
- color: var(--primary);
-}
-
-.current-info {
- background: #f8f9fa;
- padding: 1.5rem;
- border-radius: 8px;
- margin-top: 2rem;
-}
-
-.current-info ul {
- margin-bottom: 1.5rem;
-}
-
-/* Адаптивность для новых элементов */
-@media (max-width: 768px) {
- .projects-grid {
- grid-template-columns: 1fr;
+/* Адаптация для очень маленьких экранов */
+@media (max-width: 480px) {
+ body {
+ padding: 5px;
}
-
- .project-card {
+
+ .section {
padding: 1rem;
}
-}
-
-/* Стили для нового раздела "О репозитории" */
-.projects-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 1.5rem;
- margin: 2rem 0;
-}
-
-.project-card {
- background: white;
- padding: 1.5rem;
- border-radius: 8px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
- border-left: 4px solid var(--secondary);
-}
-
-.project-card h3 {
- margin-top: 0;
- color: var(--primary);
-}
-
-.current-info {
- background: #f8f9fa;
- padding: 1.5rem;
- border-radius: 8px;
- margin-top: 2rem;
- border: 1px solid #e9ecef;
-}
-
-.current-info ul {
- margin-bottom: 1.5rem;
-}
-
-.current-info h3 {
- color: var(--primary);
- margin-top: 0;
-}
-
-/* Стили для контактной секции */
-.contact-info {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- margin: 1rem 0;
-}
-
-.contact-info p {
- margin: 0.3rem 0;
-}
-
-#saveContactBtn {
- padding: 10px 20px;
- background: white;
- color: var(--secondary);
- border: 2px solid var(--secondary);
- border-radius: 6px;
- font-size: 15px;
- transition: all 0.2s;
- cursor: pointer;
- margin-top: 1rem;
-}
-
-#saveContactBtn:hover {
- background: var(--secondary);
- color: white;
-}
-
-/* Адаптивность для новых элементов */
-@media (max-width: 768px) {
- .projects-grid {
+
+ .hero {
+ padding: 1.5rem 1rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.2rem;
+ }
+
+ .hero-description {
+ font-size: 1rem;
+ }
+
+ .projects-grid,
+ .roles-grid,
+ .entrepreneur-highlights {
grid-template-columns: 1fr;
}
-
- .project-card {
- padding: 1rem;
+
+ .yalarba-stats {
+ grid-template-columns: 1fr;
}
-
- .contact-info {
- align-items: flex-start;
+
+ .skills-container {
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
}
-.link-style-none {
- color: inherit; /* Сброс цвета */
- text-decoration: none; /* Удаление подчеркивания */
+/* Улучшения для планшетов */
+@media (min-width: 769px) and (max-width: 1024px) {
+ .about {
+ grid-template-columns: 1fr 2fr;
+ gap: 2rem;
+ }
+
+ .projects-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .roles-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .entrepreneur-highlights {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
-.link-style-none:hover,
-.link-style-none:visited,
-.link-style-none:active {
- color: inherit;
- text-decoration: none;
+/* Анимации и улучшения UX */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
}
+.section {
+ animation: fadeIn 0.5s ease-out;
+}
+
+.project-card,
+.role-card,
+.highlight-item {
+ animation: fadeIn 0.5s ease-out;
+}
+
+/* Улучшения доступности */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+
+/* Улучшения фокуса для доступности */
+button:focus,
+a:focus {
+ outline: 2px solid var(--secondary);
+ outline-offset: 2px;
+}
+
+/* Улучшения для темной темы */
+body.dark-mode .highlight-item,
+body.dark-mode .role-card {
+ background: var(--dark-card);
+}
+
+body.dark-mode .project-card:hover,
+body.dark-mode .role-card:hover,
+body.dark-mode .highlight-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+}
diff --git a/main_dc/valitovgaziz/html/style/about.css b/main_dc/valitovgaziz/html/style/about.css
index dbe4cbd..79d209a 100644
--- a/main_dc/valitovgaziz/html/style/about.css
+++ b/main_dc/valitovgaziz/html/style/about.css
@@ -2,15 +2,15 @@
display: flex;
width: inherit;
height: auto;
- flex-direction: row;
+ flex-direction: column;
flex-wrap: wrap;
- justify-content: space-around;
+ justify-content: center;
+ align-items: center;
}
.about-valitovgaziz-photo-box {
- max-width: 300px;
- width: 100%;
- height: auto;
+ width: fit-content;
+ height: fit-content;
@media (max-width: 768px) {
width: 100%;
}
@@ -19,6 +19,8 @@
.about-valitovgaziz-photo-box img {
width: 100%;
height: auto;
+ max-width: 400px;
+ min-width: 340px;
object-fit: cover;
border-radius: 1em;
-webkit-box-shadow: 4px 4px 8px 9px rgba(34, 60, 80, 0.2);
@@ -31,10 +33,3 @@
height: auto;
}
-.about-text {
- max-width: 600px;
- width: 50%;
- @media (max-width: 768px) {
- width: 100%;
- }
-}
diff --git a/main_dc/valitovgaziz/html/style/repository_section.css b/main_dc/valitovgaziz/html/style/repository_section.css
new file mode 100644
index 0000000..d188332
--- /dev/null
+++ b/main_dc/valitovgaziz/html/style/repository_section.css
@@ -0,0 +1,5 @@
+.current-info {
+ margin: 1rem;
+ padding: 1rem;
+ border-radius: 1rem;
+}
\ No newline at end of file