сделал дизайн хэдера

2025-10-27 20:11:54 +03:00
parent 4656ad6e0a
commit c18ba8e0c7
7 changed files with 172 additions and 11 deletions
@@ -0,0 +1,143 @@
+.header {
+  /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
+  background-color: var(--purple);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+}
+
+.header-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.header-menu a {
+  position: relative;
+  color: white;
+  text-decoration: none;
+  padding: 1.8rem 2rem;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 500;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.header-menu a::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.header-menu a::after {
+  content: '';
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: white;
+  text-decoration: none;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 700;
+  font-size: 1.4rem;
+  transition: all 0.3s ease;
+}
+
+.logo-image {
+  width: 340px;
+  height: 80px;
+  border-radius: 8px;
+  object-fit: contain;
+  transition: all 0.3s ease;
+  /*filter: brightness(0) invert(1);*/
+}
+
+.header-menu a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.header-menu a:hover::before {
+  width: 80%;
+}
+
+.header-menu a:hover::after {
+  left: 100%;
+}
+
+.header-menu a.active {
+  background: rgba(255, 255, 255, 0.15);
+  font-weight: 600;
+}
+
+.header-menu a.active::before {
+  width: 100%;
+  background: linear-gradient(90deg, var(--lavander), var(--light-blue));
+}
+
+/* Анимация при загрузке */
+.header-menu a {
+  animation: slideIn 0.6s ease forwards;
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.header-menu a:nth-child(1) { animation-delay: 0.1s; }
+.header-menu a:nth-child(2) { animation-delay: 0.2s; }
+.header-menu a:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes slideIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .header-menu {
+    flex-direction: column;
+    padding: 0;
+  }
+  
+  .header-menu a {
+    width: 100%;
+    text-align: center;
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .header-menu a:last-child {
+    border-bottom: none;
+  }
+}
+
+/* Эффект пульсации при наведении на кнопку выхода */
+.header-menu a[onclick]:hover {
+  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+}
+
+.header-menu a[onclick]:hover::before {
+  background: linear-gradient(90deg, #ffd89b, #ff6b6b);
+}
+