Skip to content

Commit

Permalink
update header
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bnd1238
Bnd1238 committed Nov 7, 2024
1 parent 183c800 commit cc5c255
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 121 deletions.
117 changes: 43 additions & 74 deletions main/_front/src/html/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,58 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Шапка сайта</title>
<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>
<svg display="none" fill="#712CF9" viewBox="0 0 50 50" width="50.000000" height="50.000000">
<symbol id="logo">
<g clip-path="url(#clip2_18)">
<path id="path"
d="M28.01 50L6.83 41.24L6.83 10.11L28.02 0L43.08 5.46L43.09 5.86L43.41 46.19L28.01 50ZM7.98 40.47L28.1 48.79L42.25 45.29L41.94 6.26L28.08 1.24L7.98 10.83L7.98 40.47Z"
fill-rule="nonzero"/>
<rect id="rect" x="27.483398" y="0.623047" width="1.150391" height="48.772457"/>
<path id="path"
d="M42.83 3.95C43 3.78 43.07 3.54 43.03 3.32C42.99 3.09 42.84 2.89 42.63 2.79C39.35 1.24 35.45 1.92 32.88 4.5C30.45 6.95 29.6 10.8 30.73 14.02L14.18 30.57C13.29 30.24 12.32 30.08 11.32 30.08C8.86 30.08 6.48 31.06 4.78 32.77C2.23 35.34 1.51 39.14 2.95 42.44C3.04 42.66 3.24 42.82 3.47 42.86C3.71 42.91 3.95 42.83 4.11 42.66L9.12 37.63C9.45 37.3 9.98 37.25 10.26 37.53L12.42 39.8C12.73 40.11 12.72 40.6 12.39 40.94L7.4 45.96C7.23 46.12 7.16 46.36 7.2 46.59C7.24 46.82 7.39 47.01 7.6 47.11C8.79 47.67 10.04 47.95 11.32 47.95C13.57 47.95 15.71 47.05 17.35 45.4C19.79 42.95 20.63 39.1 19.5 35.88L36.05 19.33C36.95 19.66 37.91 19.82 38.91 19.82C41.37 19.82 43.75 18.84 45.45 17.13C48 14.56 48.72 10.76 47.29 7.45C47.19 7.24 47 7.08 46.76 7.04C46.53 7 46.29 7.07 46.12 7.24L41.11 12.27C40.81 12.58 40.28 12.57 39.97 12.25L37.82 10.1C37.49 9.78 37.49 9.29 37.82 8.96L42.83 3.95ZM36.8 11.12L38.95 13.26C39.81 14.13 41.28 14.13 42.13 13.28L46.33 9.06C47 11.55 46.31 14.23 44.43 16.12C43 17.56 40.99 18.38 38.91 18.38C37.93 18.38 37 18.2 36.15 17.84C35.88 17.72 35.57 17.78 35.37 17.99L18.16 35.2C17.95 35.41 17.89 35.72 18 35.98C19.16 38.72 18.45 42.26 16.34 44.39C14.44 46.29 11.68 46.97 9.19 46.19L13.4 41.95C14.29 41.05 14.31 39.66 13.45 38.79L11.29 36.53C10.45 35.69 8.97 35.75 8.11 36.62L3.9 40.84C3.23 38.35 3.93 35.67 5.8 33.78C7.23 32.34 9.24 31.52 11.32 31.52C12.3 31.52 13.23 31.7 14.08 32.06C14.35 32.18 14.66 32.12 14.87 31.91L32.08 14.7C32.28 14.5 32.34 14.19 32.23 13.92C31.08 11.18 31.78 7.64 33.9 5.51C35.79 3.61 38.55 2.93 41.04 3.71L36.8 7.95C35.92 8.84 35.92 10.23 36.8 11.12Z"
fill-rule="nonzero"/>
<path id="path"
d="M44.06 45.96C43.74 46.27 43.2 46.27 42.88 45.95L28.49 31.61C28.21 31.33 27.76 31.33 27.48 31.61C27.2 31.89 27.2 32.35 27.48 32.63L41.86 46.97C42.29 47.4 42.86 47.64 43.47 47.64C44.08 47.64 44.65 47.4 45.09 46.96L47.14 44.81C48.02 43.93 48.02 42.54 47.14 41.65L32.79 27.31C32.52 27.03 32.06 27.03 31.78 27.31C31.5 27.59 31.5 28.04 31.78 28.32L46.12 42.66C46.45 42.99 46.45 43.47 46.11 43.81L44.06 45.96Z"
fill-rule="nonzero"/>
<path id="path"
d="M10.57 6.51L6.26 2.21C5.98 1.93 5.53 1.93 5.25 2.21L2.38 5.08C2.1 5.36 2.1 5.82 2.38 6.09L6.68 10.4C6.82 10.54 7.01 10.61 7.19 10.61C7.37 10.61 7.56 10.54 7.7 10.4L8.62 9.47L19.59 20.44C19.73 20.58 19.91 20.65 20.1 20.65C20.28 20.65 20.47 20.58 20.61 20.44C20.89 20.16 20.89 19.7 20.61 19.43L9.64 8.46L10.56 7.53C10.85 7.25 10.85 6.8 10.57 6.51ZM7.19 8.88L3.9 5.59L5.76 3.73L9.04 7.02L7.19 8.88Z"
fill-rule="nonzero"/>
</g>
</symbol>
</svg>
<svg display="none" viewBox="0 0 40 40" width="40.000000" height="40.000000">
<symbol id="cart">
<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>
</symbol>
</svg>
<svg display="none" viewBox="0 0 40 40" width="40.000000" height="40.000000">
<symbol id="user">
<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>
</symbol>
</svg>

<header class="header">
<div class="container">
<div class="header-inner">
<a class="header-logo logo">
<svg width="50.000000" height="50.000000">
<use width="50.000000" height="50.000000" xlink:href="#logo" class="logo"></use>
</svg>
<span class="name"> Пора Собрать ПК! </span>
</a>
<nav class="nav">
<a class="link active" href="#">Комплектующие</a>
<a class="link" href="#">Конфигуратор</a>
<a class="link" href="#">Сборки</a>
<a class="icon" href="#">
<svg width="40.000000" height="40.000000">
<use width="40.000000" height="40.000000" xlink:href="#user" class="icon"></use>
<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 class="icon" href="#">


<svg width="40.000000" height="40.000000">
<use width="40.000000" height="40.000000" xlink:href="#cart" class="icon"></use>
<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>
</nav>
</div>
</div>
</div>
</header>
Expand Down
82 changes: 35 additions & 47 deletions main/_front/src/scss/_header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,46 @@
.header-inner
{
display: flex;
justify-content: space-between;
align-items: center;
}
.header
{
padding-top: 7.5px ;
padding-bottom: 7.5px;
border-bottom: 1px #D8D8D8 solid;
@import "../vars";

.header {
padding: 15px 0;
border-bottom: 1px solid $secondary-hover;
}
.nav
{

.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
font-weight: 400;
}
.header-logo
{

.header__logo {
display: flex;
justify-content: space-between;
column-gap: 30px;
align-items: center;
}
.name
{
font-size: 28px;
font-weight: 400;
color:#712CF9;
text-decoration: none;
vertical-align: middle;
margin: 15px;
}
.logo
{
fill: #712CF9;
cursor: pointer;
}
.link
{
color: #636363;
text-decoration: none;
opacity: 1;
vertical-align: middle;
margin: 15px;
}
.icon
{
margin-left: 15px;

.header__title {
font-size: 28px;
color: $primary;
}

.link:hover, .name:hover,.logo:hover,.icon:hover
{
fill:#712CF9;
color: #712CF9;
transition: fill 0.2s ease, color 0.2s ease;
.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;
}
}

0 comments on commit cc5c255

Please sign in to comment.