Merge pull request #3 from moevm/bogdanov_header

Add header
moevm · Nov 7, 2024 · 179087e · 179087e
2 parents 6d43f11 + ee181d4
commit 179087e
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 0 deletions.
diff --git a/main/_front/src/html/header.html b/main/_front/src/html/header.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no,
+          initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="../scss/style.scss">
+</head>
+<body>
+
+<header class="header">
+    <div class="container">
+        <div class="header__inner">
+            <div class="header__logo">
+                <img src="../img/logo.svg" alt="logo">
+                <h2 class="header__title">Пора Cобрать ПК</h2>
+            </div>
+            <div class="header__nav">
+                <a href="#!" class="header__link active">Комплектующие</a>
+                <a href="#!" class="header__link">Конфигуратор</a>
+                <a href="#!" class="header__link">Готовые сборки</a>
+                <a href="#!" class="header__link">
+                    <svg viewBox="0 0 40 40" width="40.000000" height="40.000000">
+                        <g clip-path="url(#clip2_11)">
+                            <path id="path"
+                                  d="M31.86 23.95L13.33 23.95L13.33 22.7L31.86 22.7C32.38 22.7 32.83 22.31 32.89 21.79L34.14 11.79C34.18 11.49 34.09 11.2 33.89 10.97C33.69 10.75 33.41 10.62 33.11 10.62L8.88 10.62L8.88 9.37L33.11 9.37C33.76 9.37 34.39 9.65 34.83 10.14C35.26 10.64 35.46 11.29 35.38 11.95L34.13 21.95C33.99 23.09 33.01 23.95 31.86 23.95Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M31.66 28.95L15.44 28.95C14.41 28.95 13.5 28.26 13.23 27.26L8.06 8.06C7.94 7.6 7.52 7.29 7.05 7.29L3.33 7.29C2.98 7.29 2.7 7.01 2.7 6.66C2.7 6.32 2.98 6.04 3.33 6.04L7.05 6.04C8.08 6.04 9 6.73 9.26 7.73L14.43 26.93C14.56 27.39 14.97 27.7 15.44 27.7L31.66 27.7C32.01 27.7 32.29 27.98 32.29 28.33C32.29 28.67 32.01 28.95 31.66 28.95Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M16.66 35.62C15.4 35.62 14.37 34.59 14.37 33.33C14.37 32.07 15.4 31.04 16.66 31.04C17.93 31.04 18.95 32.07 18.95 33.33C18.95 34.59 17.93 35.62 16.66 35.62ZM16.66 32.29C16.09 32.29 15.62 32.75 15.62 33.33C15.62 33.9 16.09 34.37 16.66 34.37C17.24 34.37 17.7 33.9 17.7 33.33C17.7 32.75 17.24 32.29 16.66 32.29Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M29.16 35.62C27.9 35.62 26.87 34.59 26.87 33.33C26.87 32.07 27.9 31.04 29.16 31.04C30.43 31.04 31.45 32.07 31.45 33.33C31.45 34.59 30.43 35.62 29.16 35.62ZM29.16 32.29C28.59 32.29 28.12 32.75 28.12 33.33C28.12 33.9 28.59 34.37 29.16 34.37C29.74 34.37 30.2 33.9 30.2 33.33C30.2 32.75 29.74 32.29 29.16 32.29Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                        </g>
+                    </svg>
+                </a>
+                <a href="#!" class="header__link">
+                    <svg viewBox="0 0 40 40" width="40.000000" height="40.000000">
+                        <g clip-path="url(#clip2_8)">
+                            <path id="path"
+                                  d="M20 18.95C15.97 18.95 12.7 15.68 12.7 11.66C12.7 7.64 15.97 4.37 20 4.37C24.02 4.37 27.29 7.64 27.29 11.66C27.29 15.68 24.02 18.95 20 18.95ZM20 5.62C16.66 5.62 13.95 8.33 13.95 11.66C13.95 14.99 16.66 17.7 20 17.7C23.33 17.7 26.04 14.99 26.04 11.66C26.04 8.33 23.33 5.62 20 5.62Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                            <path id="path"
+                                  d="M31.66 35.62L8.33 35.62C7.98 35.62 7.7 35.34 7.7 35C7.7 31.71 8.98 28.63 11.3 26.3C13.63 23.98 16.71 22.7 20 22.7C23.28 22.7 26.37 23.98 28.69 26.3C31.01 28.63 32.29 31.71 32.29 35C32.29 35.34 32.01 35.62 31.66 35.62ZM8.97 34.37L31.02 34.37C30.69 28.57 25.87 23.95 20 23.95C14.12 23.95 9.3 28.57 8.97 34.37Z"
+                                  fill-opacity="1.000000" fill-rule="nonzero"/>
+                        </g>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </div>
+</header>
+</body>
+</html>
diff --git a/main/_front/src/img/logo.svg b/main/_front/src/img/logo.svg
diff --git a/main/_front/src/scss/elems/_header.scss b/main/_front/src/scss/elems/_header.scss
@@ -0,0 +1,50 @@
+@import "../vars";
+
+.header {
+	padding: 15px 0;
+	border-bottom: 1px solid $secondary-hover;
+}
+
+.header__inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.header__logo {
+	display: flex;
+	column-gap: 30px;
+	align-items: center;
+	cursor: pointer;
+	img {
+		width: 50px;
+		height: 50px;
+	}
+}
+
+.header__title {
+	font-size: 28px;
+	color: $primary;
+}
+
+.header__nav {
+	display: flex;
+	column-gap: 20px;
+	align-items: center;
+}
+
+.header__link {
+	font-size: 18px;
+	color: #636363;
+	transition: color .2s ease;
+	&:hover, &.active {
+		color: $primary;
+		& svg {
+			fill: $primary;
+		}
+	}
+	& svg {
+		fill: #636363;
+		transition: fill .2s ease;
+	}
+}