Skip to content
Snippets Groups Projects
Unverified Commit ade65c2f authored by maria-moroz's avatar maria-moroz Committed by GitHub
Browse files

Merge pull request #6 from maria-moroz/feature/header 

Feature/header
parents 8c486613 0de5ad07
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/images/header-background.jpg 0 → 100644
+ 0
− 0
View file @ ade65c2f
src/images/header-background.jpg

114 KiB

src/images/sprite.svg
+ 14
− 0
View file @ ade65c2f
......@@ -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
src/index.html
+ 3
− 1
View file @ ade65c2f
......@@ -18,8 +18,10 @@
/>
</head>
<body>
<include src="./partials/one-card-preview.html"></include>
<include src="./partials/header.html"></include>
<include src="./partials/footer.html"></include>
<!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
<!-- <include src="./partials/example.html"></include> -->
<script src="./index.js"></script>
</body>
......
src/partials/header.html 0 → 100644
+ 28
− 0
View file @ ade65c2f
<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>
src/sass/_header.scss 0 → 100644
+ 141
− 0
View file @ ade65c2f
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%;
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;
}
src/sass/_utility-classes.scss
+ 42
− 39
View file @ ade65c2f
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 76px;
}
@media screen and (min-width: 480px) {
width: 480px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
padding: 0 71px;
@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;
}
src/sass/main.scss
+ 1
− 1
View file @ ade65c2f
......@@ -7,4 +7,4 @@
@import './variables';
@import './utility-classes';
@import './footer';
@import './components/one-card-preview';
@import './header';
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment