diff --git a/src/images/header-background.jpg b/src/images/header-background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fcd9d01c1fd3fab38f89105b101f10f53cef9115
Binary files /dev/null and b/src/images/header-background.jpg differ
diff --git a/src/images/sprite.svg b/src/images/sprite.svg
index c473fb3daa9928289e2d9789db40131bb2483832..bc736aa1cec624888af57b85c13a3efa2a8f695b 100644
--- a/src/images/sprite.svg
+++ b/src/images/sprite.svg
@@ -28,4 +28,18 @@
<path d="M5.5 9.5C7.70914 9.5 9.5 7.70914 9.5 5.5C9.5 3.29086 7.70914 1.5 5.5 1.5C3.29086 1.5 1.5 3.29086 1.5 5.5C1.5 7.70914 3.29086 9.5 5.5 9.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.5 10.5002L8.32495 8.3252" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
+ <symbol id="search" viewBox="0 0 32 32" width="12px" height="12px">
+<path fill="none" stroke="#fff" style="stroke: var(--color1, #fff)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M14.667 25.333c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667z"></path>
+<path fill="none" stroke="#fff" style="stroke: var(--color1, #fff)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M28 28.001l-5.8-5.8"></path>
+</symbol>
+<symbol id="logo" viewBox="0 0 32 32">
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M26.427 2.667h-20.853c-1.605 0-2.907 1.301-2.907 2.907v20.853c0 1.605 1.301 2.907 2.907 2.907h20.853c1.605 0 2.907-1.301 2.907-2.907v-20.853c0-1.605-1.301-2.907-2.907-2.907z"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M9.333 2.667v26.667"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M22.667 2.667v26.667"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M2.667 16h26.667"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M2.667 9.333h6.667"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M2.667 22.667h6.667"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M22.667 22.667h6.667"></path>
+<path fill="none" stroke="#818181" style="stroke: var(--color2, #818181)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M22.667 9.333h6.667"></path>
+</symbol>
</svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index b3521cbd35798b96e6b353fda2665e9c9b39f9a2..5dde1f9d427332be42403133a6217e9334775e79 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,7 +18,8 @@
/>
</head>
<body>
- <include src = "./partials/footer.html"></include>
+ <include src="./partials/header.html"></include>
+ <include src="./partials/footer.html"></include>
<!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. -->
<!-- <include src="./partials/example.html"></include> -->
diff --git a/src/partials/header.html b/src/partials/header.html
new file mode 100644
index 0000000000000000000000000000000000000000..dbc60850c32cd092bd560e20a80c0cf911dcc8d2
--- /dev/null
+++ b/src/partials/header.html
@@ -0,0 +1,28 @@
+<header>
+ <div class="container">
+ <nav>
+ <div class="nav__wrap">
+ <div class="logo">
+ <svg width="24px" height="24px" class="logo__icon">
+ <use href="/images/sprite.svg#logo"></use>
+ </svg>
+ <a href="index.html" class="logo__text link">Filmoteka</a>
+ </div>
+ <ul class="nav__list list">
+ <li class="nav__item nav__item--current">Home</li>
+ <li class="nav__item">My library</li>
+ </ul>
+ </div>
+ <div class="search-field">
+ <span class="search-field__wrap">
+ <input class="search-field__input" placeholder="ПоиÑк фильмов" />
+ <div class="search-field__icon--wrap">
+ <svg width="12px" height="12px" class="search-field__icon">
+ <use href="/images/sprite.svg#search"></use>
+ </svg>
+ </div>
+ </span>
+ </div>
+ </nav>
+ </div>
+</header>
diff --git a/src/sass/_header.scss b/src/sass/_header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9ebba0ddda36e30c556fd98dd3dc4af7e677847c
--- /dev/null
+++ b/src/sass/_header.scss
@@ -0,0 +1,141 @@
+header {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
+ url(../images/header-background.jpg);
+
+ height: 216px;
+ width: 100%;
+
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.logo {
+ margin-top: 40px;
+ display: flex;
+ align-items: center;
+}
+
+.logo__icon {
+ justify-self: middle;
+ margin-right: 10px;
+}
+
+.logo__text {
+ display: none;
+ font-family: Roboto;
+ font-size: 30px;
+ font-weight: 500;
+ line-height: 35px;
+ letter-spacing: 0em;
+ text-align: center;
+
+ color: white;
+ @media screen and (min-width: 768px) {
+ display: inline-block;
+ }
+}
+
+.nav__list {
+ display: flex;
+ margin-left: auto;
+ margin-top: 39px;
+ align-items: center;
+
+ color: white;
+}
+
+.nav__wrap {
+ display: flex;
+ flex-direction: row;
+}
+
+.nav__item {
+ font-family: Roboto;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 14px;
+ letter-spacing: 0em;
+ text-align: center;
+ text-transform: uppercase;
+
+ padding: 10px 0;
+ position: relative;
+
+ &:not(:last-child) {
+ margin-right: 39px;
+ }
+}
+
+.nav__item--current::after {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 3px;
+ position: absolute;
+ background-color: #ff6b08;
+}
+
+.search-field__input {
+ font-family: Roboto;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: white;
+
+ height: 20px;
+ width: 280px;
+
+ background-color: transparent;
+ border: 0;
+ border-bottom: 0.5px solid #ffffff;
+
+ @media screen and (min-width: 768px) {
+ width: 336px;
+ }
+
+ &:focus {
+ outline: none;
+ border: 0;
+ border-bottom: 0.5px solid #ffffff;
+ }
+
+ &::placeholder {
+ font-family: Roboto;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: white;
+ }
+}
+
+.search-field__wrap {
+ position: relative;
+}
+
+.search-field__icon {
+ align-items: center;
+ text-align: center;
+}
+
+.search-field__icon--wrap {
+ width: 20px;
+ height: 20px;
+ display: flex;
+ position: absolute;
+ right: 0;
+ top: 0;
+ align-items: center;
+ justify-content: center;
+}
+
+.search-field {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 41px;
+}
diff --git a/src/sass/_utility-classes.scss b/src/sass/_utility-classes.scss
index 71dcb48c8c0f28e1fb128985df07fad9304a5daa..5cb8793fbb696e6eaf3d267dcae8cbe714dc6fd5 100644
--- a/src/sass/_utility-classes.scss
+++ b/src/sass/_utility-classes.scss
@@ -1,63 +1,66 @@
body {
- background-color: $primary-white-color;
- color: $primary-text-color;
- font-family: Roboto, sans-serif;
- font-weight: 500;
+ background-color: $primary-white-color;
+ color: $primary-text-color;
+ font-family: Roboto, sans-serif;
+ font-weight: 500;
}
button {
- font-family: inherit;
+ font-family: inherit;
}
a {
- color: inherit;
+ color: inherit;
}
.container {
- padding: 0 20px;
- margin-left: auto;
- margin-right: auto;
- margin-top: 0;
- margin-bottom: 0;
- min-width: 320px;
- width: 100%;
+ padding: 0 20px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0;
+ margin-bottom: 0;
+ min-width: 320px;
+ width: 100%;
- @media screen and (min-width: 480px) {
- width: 480px;
- }
+ @media screen and (min-width: 480px) {
+ width: 480px;
+ }
- @media screen and (min-width: 768px) {
- width: 768px;
- padding: 0 76px;
- }
+ @media screen and (min-width: 768px) {
+ width: 768px;
+ padding: 0 76px;
+ }
- @media screen and (min-width: 1024px) {
- width: 1024px;
- padding: 0 71px;
-
- }
+ @media screen and (min-width: 1024px) {
+ width: 1024px;
+ padding: 0 71px;
+ }
}
.list {
- list-style-type: none;
- margin: 0;
- padding: 0;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.link {
+ text-decoration: none;
}
.img {
- display: block;
- width: 100%;
+ display: block;
+ width: 100%;
}
.visually-hidden {
- position: absolute;
- white-space: nowrap;
- width: 1px;
- height: 1px;
- overflow: hidden;
- border: 0;
- padding: 0;
- clip: rect(0 0 0 0);
- clip-path: inset(50%);
- margin: -1px;
-}
\ No newline at end of file
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ border: 0;
+ padding: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ margin: -1px;
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 597c55784dafd4b593b6b686c4a1ddf78b8c78bb..a4207e225182aac36fde75a00ab6e65c01ebd712 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,4 +6,5 @@
// Стили Ð´Ð»Ñ Ñ„Ð°Ð¹Ð»Ð° Ñ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð¾Ð¼ HTML-фрагмента
@import './variables';
@import './utility-classes';
-@import "./footer";
+@import './footer';
+@import './header';