modified: main_dc/valitovgaziz/html/darkTheme.css

modified:   main_dc/valitovgaziz/html/style.css
	modified:   main_dc/valitovgaziz/html/style/about.css
	new file:   main_dc/valitovgaziz/html/style/repository_section.css
about section style photo prettify

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);
 }

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) {
-  header {
-    padding: 1rem 0;
-    font-size: 1.2rem;
+  body {
+    padding: 5px 10px;
+    margin: 5px auto;
   }
   
-  .contact-info {
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
+  header {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    padding: 1.5rem 1rem;
+  }
+  
+  .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 {
-    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 {
-    grid-template-columns: 1fr;
-  }
-
-  .project-card {
+  .section {
     padding: 1rem;
   }
   
-  .contact-info {
-    align-items: flex-start;
+  .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;
+  }
+  
+  .yalarba-stats {
+    grid-template-columns: 1fr;
+  }
+  
+  .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);
+}

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%;
-  }
-}

main_dc/valitovgaziz/html/style/repository_section.css

@@ -0,0 +1,5 @@
+.current-info {
+    margin: 1rem;
+    padding: 1rem;
+    border-radius: 1rem;
+}