diff --git a/package.json b/package.json
index f89426c890253f7ab2510f715999c122391cd709..e28c93bf3cee54f365d03886f84564cb177c39b7 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"main": "index.js",
"homepage": "https://maria-moroz.github.io/goit-filmoteka",
"scripts": {
- "dev": "parcel src/*.html",
+ "dev": "parcel src/*.html --open",
"build": "parcel build src/*.html --public-url /goit-filmoteka/"
},
"repository": {
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 8d29002eff11c94f10b18c214aecd7bccc5c7294..cdf5b00a87d269083a604075e8bac138db70aceb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,6 +18,7 @@
/>
</head>
<body>
+ <include src="./partials/header.html"></include>
<include src="./partials/one-card-preview.html"></include>
<include src="./partials/footer.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/_footer.scss b/src/sass/_footer.scss
index 6e1b3f7d29efcef7361d6e47ddfe211e7da0067b..92c1f4f313751047df93ddcb49aa409949ff2526 100644
--- a/src/sass/_footer.scss
+++ b/src/sass/_footer.scss
@@ -1,5 +1,6 @@
footer {
background-color: $secondary-white-color;
+ min-width: 320px;
}
.footer_container {
diff --git a/src/sass/_header.scss b/src/sass/_header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..af4d942046981400e4b5ecb0d209a4ce0f2c8aab
--- /dev/null
+++ b/src/sass/_header.scss
@@ -0,0 +1,142 @@
+header {
+ background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
+ url(../images/header-background.jpg);
+
+ height: 230px;
+ width: 100%;
+ min-width: 320px;
+
+ 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 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 37px;
+}
+
+.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;
+}
diff --git a/src/sass/_utility-classes.scss b/src/sass/_utility-classes.scss
index 3190d38cfa760db2b8120331f20365546debc88e..374c58e6aa1e0ecae48c692bc390b66edeef8a86 100644
--- a/src/sass/_utility-classes.scss
+++ b/src/sass/_utility-classes.scss
@@ -1,47 +1,50 @@
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%;
-
- @media screen and (min-width: 480px) {
- width: 480px;
- }
+ 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: 768px) {
- width: 768px;
- padding: 0 32px;
- }
+ @media screen and (min-width: 480px) {
+ width: 480px;
+ }
- @media screen and (min-width: 1024px) {
- width: 1024px;
- padding: 0 32px;
+ @media screen and (min-width: 768px) {
+ width: 768px;
+ padding: 0 76px;
+ }
- }
+ @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 {
@@ -50,14 +53,14 @@ img {
}
.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 e393ef280d27a2d3de0867deee7205e0e44182ec..ff2165e648453677a36f782f7d144fe6c98f635c 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -7,4 +7,5 @@
@import './variables';
@import './utility-classes';
@import './footer';
-@import './components/one-card-preview';
+@import './header';
+@import './components/one-card-preview'